Html/CSS05(盒子模型,浮动)

今天是2018年7月13日

1.盒子模型扩展

有些时候我们需要padding但不希望齐元素大小发生改变,这个时候需要给元素设置box-sizing:border-box属性。


2.inline-block布局

使用nline-block可以使块级元素在同一行显示,起最经典的案例表现便是导航。


Html/CSS05(盒子模型,浮动)_第1张图片
利用line-height布局完成导航

3.浮动float

使用上述的line-height布局虽然能让块级标签在同一行显示,但却存在着一些弊端,因此我们需要学习float。



    
    
    

4.float和父级元素

当父元素不设置width时,子元素会继承父元素的width。当资源数float时,父元素的高度会坍塌。改善方法如下:
1.使用overflow:hidden属性重新获取子元素的高度。
2.使用clear:both清除浮动。
Tip:因为设置clear需要单独的使用一个div比较麻烦,所以常用伪元素来实现,如下所示。


5.快速实现导航

之前所实现的导航使用的是div,这里常使用的是ul-li



    

你可能感兴趣的:(Html/CSS05(盒子模型,浮动))