首页 > 代码库 > CSS的四大布局层级 和 HTML标签的‘生态系统’(三)------文档层和浮动层

CSS的四大布局层级 和 HTML标签的‘生态系统’(三)------文档层和浮动层

  文档层,每一个放置内容的元素内部都会有一个文档流的规则,即内部的内容若不是浮动或定位的元素,将会按照从左到右,从上到下的规则来排列,块元素将会独占一行,剩下文本或是行内元素则排满一行,再排下一行。

  在文档层中,元素或内容摆放位置,主要是通过padding、margin属性来移动位置,其中margin有很多的重点难点,需要去注意,比如marign-top的bug,margin可以设置负值,行内元素没有margin-top和margin-bottom,margin:0 auto居中布局等

  属性:margin、padding、width、height、border、box-sizing等

 

  浮动层,块元素独占一行,行元素不能设置宽高,但是很多布局中都会有横排的元素,并且可以设置宽高,行内块元素倒是可以解决,但是中间会有空格造成的空隙,这个时候,很多情况下,将会使用 浮动-float 来解决问题。float 属性从根本上来说,是破坏了文档流,所有加了浮动属性的元素,都可以横排且设置宽高,但是就像天上的云不在地面上一样,加了浮动的元素,也不再在文档流中了,文档流中的元素“看不到”它,会进入到它的后面(文字,img等除外)。

  浮动虽然会使我们布局速度加快,能够更快的实现更好的页面效果,但是它需要注意的点也很多,例如:浮动的停止条件(需要像素微调),浮动的子元素撑不开父元素(overflow:hidden)和清除浮动的影响(clear:both),浮动的元素无法使用部分文档流中的布局方法(如:margin:0 auto等)。

  属性:float、clear

CSS的四大布局层级 和 HTML标签的‘生态系统’(三)------文档层和浮动层