页面开发常识

8、box-sizing：content-box | border-box border-box即使定义了border和padding也不会改变对象的实际宽度

7、background-clip:padding-box; 背景绘制区域

6、ul li 内容只设置font-size 行高用padding代替距上面高度

5、消除ul 前的点可以设置font-size:0;

4、white-space: nowrap 段落中的文本不进行换行：

3、float漂浮的元素，设置vertical-align: middle;垂直居中

2、autofocus

查看鼠标焦点目标位置

1、适配水平垂直居中

initial-scale 页面初始缩放
minimum-scale=1 最小缩放
maximum-scale=1 最大缩放
user-scale=no 用户缩放

布局viewport = 设备宽度 = 度量viewpor

.mid {/*不等宽的水平垂直居中*/
position:absolute;
top:50%;
left:50%;
z-index:3;
transform:translate(-50%,-50%);
border-radius:6px;
background:#fff;
}
.mid2 {
justify-content: center;/*子元素水平居中*/
align-items: center;/*子元素垂直居中*/
display:-webkit-flex;
}
.intwoline {/*多行文本溢出*/
display:box !important;
overflow:hidden;
text-overflow:ellipsis;
word-break:break-all;
-webkit-box-orient:vertical;
-webkit-box-lines-clamp: 2;
}

1、怎么撑开float div元素外部的包裹div 1、外部div css设置overflow:hidden 2、底部<div class="clear"></div> 清除浮动

2、div 内容均匀分布如果元素不是灵活的项目，则 flex 属性不起作用。

外部div display:flex; 内部

如：#main div
{
flex:1;
}

其中，ltr是初始值，表示left-to-right，就是从左往右的意思，再具体描述下，就是内联内容是从左往右依次排布的，我们平时网页的处理都是这样的，比方说前后两个图片，默认情况下，DOM在前的就显示在左边。

rtl则是另外一个值，right-to-left缩写，就是从右往左的意思，再具体描述下，就是内联内容是从右往左依次排布的，加入应用了这个CSS声明，则前后两个图片，默认情况下，DOM在前的就显示在右侧；而且是在容器的右端。

html body 默认的高宽是0 由内容给撑开。采取绝对定位是：宽度高度用100%

png和jpg 作为背景时，png图片在上。

background-size:100%; 背景随着div变化

对ol列表排序标记
list-style-position: inside; 数字排序

list-style-position: inside; 左对齐

px em rem 定义比较：

px ：像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的

em ：是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了

rem ：是CSS3新增的一个相对单位（root em，根em）相对浏览器根目录

zoom

:1;属性是IE浏览器的专有属性，Firefox等其它浏览器不支持。它可以设置或检索对象的缩放比例。除此之外，它还有其他一些小作用，比如触发ie的hasLayout属性，清除浮动、清除margin的重叠等

页面开发常识

1、适配 水平垂直居中

1、适配水平垂直居中