1.盒模型
什么是盒模型,每一个盒子都是由:内容区(content),填充区(padding),边框(border),外边界区(margin),四个部分组成
2,盒子模型共有两种:
分为标准模型和怪异模型
标准模型:标准模型是很标准的计算一个盒子的区域
一个块的总宽度(页面中占的宽度)= width + margin(左右) + padding(左右) + border(左右)
怪异模型:只是大概分析了盒子,
一个块的总宽度= width + margin(左右)(即width已经包含了padding和border值)(IE浏览器)
3.标准和怪异的转换
box-sizing:content-box; 将采用标准模式的盒子模型标准
box-sizing:border-box; 将采用怪异模式的盒子模型标准
box-sizing:inherit; 规定应从父元素继承 box-sizing 属性的值
两种边距重叠的情况:
1.父子关系的边距重叠
父子关系,如果子元素设置了外边距,在没有把父元素变成BFC的情况下,父元素也会产生外边距
解决方法:可以给父元素添加overflow:hidden
1、为什么要清除浮动?
清除浮动主要是为了解决,父元素因为子元素浮动引起的内部高度为0的问题
就是在不给父盒子加高的情况下,内部盒子会撑起父盒子,
当给子盒子浮动后,父盒子因为没有高而变为0
清除浮动的方法(最常用的四种)
一、额外标签法:给谁清除浮动就在其后面添加空白标签
优点: 通俗易懂,书写方便。(不推荐使用
)
缺点: 添加许多无意义的标签,结构化比较差
二、父级元素添加overflow方法:
可以通过触发BFC的方式,实现清楚浮动效果。必须定义width或zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度
优点: 简单、代码少、浏览器支持好
缺点: 内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素。不能和position配合使用,因为超出的尺寸的会被隐藏
三、使用after伪元素清除浮动: :after
方式为空元素的升级版,好处是不用单独加标签了。IE8以上和非IE浏览器才支持:after,,zoom(IE专有属性)可解决ie6,ie7浮动问题(较常用推荐
)
优点: 符合闭合浮动思想,结构语义化正确,不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,新浪等等)
缺点: 由于IE6-7不支持:after
,使用zoom:1
使用before和after双伪元素清除浮动:(较常用推荐
)
父级div定义 height: 父级div手动定义height,就解决了父级div无法自动获取到高度的问题。
优点: 简单、代码少、容易掌握
缺点: 只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题