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%。

猜你喜欢

转载自blog.csdn.net/ld395353765/article/details/82560762