css布局常见问题

1.设置父元素的 height 和 line-height 高度一致来实现的是 :垂直居中;

2.标签选择器  <类选择器 < id选择器 <行内样式表(写的越精确，优先级越高)

3.input取消外边的边框：直接在input中加style=“outline:none;”

4.绝对定位会脱离文档流，相对定位不会脱离文档流；脱离文档流后元素会漂浮在文档流上方，使用z-index（等于-1） 属性指定一个元素的堆叠顺序，等于负一就会到正常文档流的下方。

5.为什么absoulte定位要加 top:0; left:0; 属性：

其实加上这两个属性是完全必要的，因为我们如果使用absoulte或fixed定位的话，必须指定 left、right、 top、 bottom 属性中的至少一个，否则left/right/top/bottom属性会使用它们的默认值 auto ，这将导致对象遵从正常的HTML布局规则，在前一个对象之后立即被呈递，简单讲就是都变成relative，会占用文档空间，这点非常重要，很多人使用absolute定位后发现没有脱离文档流就是这个原因，这里要特别注意~~~

少了left/right/top/bottom属性不行，那如果我们多设了呢？例如，我们同时设置了top和bottom的属性值，那元素又该往哪偏移好呢？记住下面的规则：

• 如果top和bottom一同存在的话，那么只有top生效。
• 如果left和right一同存在的话，那么只有left生效

6.img一直以来有一个很大的问题就是底部空白间隙,解决办法：直接让img变成块级元素，不在受行内基线的影响。display: block

7.遮罩层：

.zhezhao {
width: 100%;
height: 100%;
background-color: #000;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
position: fixed !important;
left: 0px;
top: 0px;
display: none;
z-index: 1000;
}
8.display：flex；弹性布局

父元素使用flex，

子元素第一个使用flex，

第二个使用flex：1

则可以使两个子元素div在一行显示，宽度总体为100%。