CSS布局中的问题

Posted 2020-07-03 追梦子

1. 高度自适应的问题
　　1. 一个元素是否可以使用百分比显示，取决于它的父级元素，所以如果需要给此元素设置100%，那么需要先给父元素设置高100%。
　　2. 一级元素的父元素是body，所以如果我们想让高度100%的话，那就给body设置高100%，但是又因为body的父元素是html，所以我们同时也要给html高设置成100%。

 

2. 什么是盒模型
　　就是每个盒子都由内容(content)、填充(padding)、边框(border)、边界(margin)

 

3. 上下margin叠加的由来
　　css设计者考虑到我们要对段落进行控制，比如多个p标签，如果这些p标签都具备margin属性的话，那么它们中的第一个段落距离顶部的外边距是10px，而后面的其他p标签具离顶部都是20px，这样的话排版就不一致，所以设计出这种空白边距叠加规则。

 

4. 解决margin上下叠加问题
　　设置：float

追梦子博客。

5. IE6左右margin加倍问题以及解决
　　单我们将一个盒模型设置成float以后如果有左右margin那么这个margin会是双倍的，解决方法：设置display:inline;

 

6. 文档流
　　元素的排列方式

 

7. 文字围绕浮动之谜
　　现象1、为什么IE6下非浮动元素不会被浮动元素覆盖？
　　　　在IE中有特有的hasLayout规则，当一个元素拥有了布局，那么它忽略浮动元素应该占有的空间，所以它不会被覆盖，而是排列在浮动元素的右侧。布局就是给元素添加了宽，高等。解决方法就是不去触发IE的hasLayout。

　　现象2、为什么在IE8等浏览器下，虽然非浮动元素按照我们的理解，它是被浮动元素覆盖了，但是它包含的文字为什么不会被覆盖，而是围绕浮动元素呢？
　　　　浮动只会占据文本的，而不会占据块级元素。可以这样理解，但是从原理是不是这样，技术有限请自行查资料。

 

8. z-index的由来
　　由于当我们使用了定位属性position以后，那么这个元素将脱离了文档流，并且这个定位的元素总是会覆盖前面的元素，所以设计者设计了z-index用来自由的改变覆盖的顺序。