display

body { 　　　 display: flex; /* flex-direction: row; 表示项目在交叉轴的排列方式 flex-wrap: wrap-reverse; */ flex-flow: row wrap-reverse; } body { margin: 0px; display: flex; flex-direction: row; justify-content: space-around; /*表示项目在主轴的排列方式*/ } body { display: flex; flex-direction: column-reverse; /*表示主轴的方向(从下至上)*/ } .box { display: flex; 　　　　 /*用来适配webkit内容的浏览器*/ 　　　　display:-webkit-flex } 来源： https://www.cnblogs.com/wskb/p/12306447.html

登录框 < ! DOCTYPE html > < html > < head lang = "en" > < meta charset = "UTF-8" > < title > < / title > < style > . login - header { width : 100 % ; text - align : center ; height : 30 px ; font - size : 24 px ; line - height : 30 px ; } ul , li , ol , dl , dt , dd , div , p , span , h1 , h2 , h3 , h4 , h5 , h6 , a { padding : 0 px ; margin : 0 px ; } . login { width : 512 px ; position : absolute ; border : #ebebeb solid 1 px ; height : 280 px ; left : 50 % ; right : 50 % ; background : #ffffff ; box - shadow : 0 px 0 px 20 px #ddd ; z - index : 9999 ; margin - left : - 250 px ; margin - top :

方法1：table-cell .box1{ display: table-cell; vertical-align: middle; text-align: center; } <div class="box box1"> <span>垂直居中</span> </div> 　 方法2：display:flex .box2{ display: flex; justify-content:center; //横 align-items:Center; //竖 } 方法3：定位 .eleTag{ /*设置元素绝对定位*/ position:absolute; top 50%; left: 50%; /*css3 transform 实现*/ transform: translate(-50%, -50%); } 来源： https://www.cnblogs.com/congxueda/p/12298499.html

一、定宽高 1、绝对定位和负margin值： <section class="absolute"> <div></div> </section> <style> section{ display:block; } section.absolute { width: 100px; height: 100px; border: 1px solid #ccc; position: relative; } .absolute div { position: absolute; width: 50px; height: 50px; left: 50%; top: 50%; margin: -25px 0 0 -25px; background-color: yellow; } </style> 2、绝对定位加 transform: <section class="absoluteTransform"> <div></div> </section> <style> section{ display:block; } section.absoluteTransform { width: 100px; height: 100px; border: 1px solid #ccc; position: relative; } .absoluteTransform div { position:

手动实现模态框 设置一个用于遮罩整个页面的div，其css样式为： .mask{ width:100%; height:100%; display: none; position:fixed; background:rgba(0,0,0,0.3); z-index: 998; } js部分代码： //模态框frame $('.frame').hide(); $('.purchase').on('click', function() { //点击页面上的某个按钮出现模态框 $('.frame').fadeIn(); $('.mask').css('display','block') $('body').css('overflow','hidden')//禁止页面滚动 }); $('.cancel').on('click', function() { $('.frame').fadeOut(); $('.mask').css('display','none') $('body').css('overflow','visible') }); 来源： CSDN 作者： Dimple_z 链接： https://blog.csdn.net/Dimple_z/article/details/104220761

Template Method模式 在父类中定义处理流程的框架，在子类中实现具体处理 在Template Method模式中有以下登场角色 AbstractClass（抽象类） ConcreteClass (具体类) AbstractClass角色不仅负责实现模版方法， z 当使用AbstractClass abC = new ConcreteClass(“ABC”)时，再调用abC.templateMethod方法，会执行templateMetod方法中的内容，如果template方法中指定了method1, method2 和method3的实现，则会执行ConcreteClass实现的方法。 名字 说明 AbstractDisplay 只实现了display方法的抽象类 CharDisplay 实现了open、print、 close方法的类 StringDisplay 实现了open、 print、 close方法的类 Main 测试程序行为的类 模版方法 ： 调用抽象方法的display方法就是模版方法。它有两个核心要素一是在抽象类中，二是调用抽象方法 AbstractDisplay.java public abstract class AbstractDisplay { public abstract void open(); public abstract void

1：单行文字垂直居中： 如果一个容器中只有一行文字的话，定义height(高度)和 line-height(行高)相等即可。 　　如：<div style="height:25px;line-height:25px;overflow:hidden">aa</div> 2：多行文本固定高度垂直居中： 核心：display:table 和display:table-cell ;vertical-align:middle; 兼容：ie7+ 1 <div class="wrapper"> 2 <div class="content">content age</div> 3 </div> 相对应的css代码如下： .wrapper{ height:400px; display:table; } .content{ vertical-align:middle; display:table-cell; border:1pxsolid#FF0099; background-color:#FFCCFF; width:760px; } 核心：display:table 和display:table-cell ;vertical-align:middle; 以及使用绝对定位 兼容：ie6+ <div class="wrap"> <div class="subwrap"> <div class=

A big company decided to launch a new series of rectangular displays, and decided that the display must have exactly n pixels. Your task is to determine the size of the rectangular display — the number of lines (rows) of pixels a and the number of columns of pixels b, so that: there are exactly n pixels on the display; the number of rows does not exceed the number of columns, it means a ≤ b; the difference b - a is as small as possible. Input The first line contains the positive integer n (1 ≤ n ≤ 106) — the number of pixels display should have. Output Print two integers — the number of rows

css 盒模型 盒模型 box：盒子，每个元素在页面都会生成一个矩形区域（盒子） 盒子类型 1、行盒，display等于inline的元素 2、块盒，display等于block的元素 来源： CSDN 作者： YK_324504836 链接： https://blog.csdn.net/qq_29573903/article/details/104196616

几个实现的效果看视频吧： 动图很是不清楚 代码： html <!DOCTYPE html> < html lang = " en " > < head > < meta charset = " UTF-8 " > < title > music </ title > < link href = " ../jquery.mCustomScrollbar.css " rel = " stylesheet " > < link href = " ../../../img/sup.ico " rel = " icon " > < link href = " ../css/style.css " rel = " stylesheet " > < script src = " ../../../jquery-3.4.1.min.js " > </ script > < script src = " ../jquery.mCustomScrollbar.concat.min.js " > </ script > < script src = " ../js/player.js " > </ script > < script src = " ../js/index.js " > </ script > </ head > < body > < div class = " container "