前端Day13

overflow属性的应用

        当盒子内的元素超出盒子自身的大小时,内容就会溢出(IE6除外),这时如果想要规范溢出内容的显示方式,就需要使用CSS的overflow属性。

前端Day13_第1张图片

1.在默认值visible的情况下:不隐藏

前端Day13_第2张图片

2.属性值为hidden:超过容器大小则隐藏超过的部分

前端Day13_第3张图片

3.属性值为auto:有一个滚动条,若文本小于容器的大小,则不会显示滚动条

前端Day13_第4张图片

4.属性值为scroll:有两个滚动条,若文本小于容器大小,也仍会显示两个滚动条

前端Day13_第5张图片

页面布局


        版心的概念:“版心”是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示,常见的宽度值为960px、980px、1000px、1200px等。   


清除浮动

清除浮动,就是让当前元素左右两边都不存在浮动元素的时候才把元素放到标准流汇中显示。

前端Day13_第6张图片

常用的几种清除浮动的方法:

第一种:隔墙法

在需要设置浮动的元素下面增加一个div,然后让这个div设置清除左右浮动。

第二种:综合的clearfix的方法

使用overflow进行包裹所有的浮动子元素。有误伤。

Ckearfix的使用场景:

1、父盒子要把所有的子盒子包裹住。

2、父盒子是包裹正行的div元素,需要前后进行清除浮动。

你可能感兴趣的:(前端Day13)