十.盒子模型

1.什么是盒子模型

盒子模型是网页设计中常用的思维模型，是指每个标签都可以看成一个矩形盒子，一个页面由很多的盒子组成

2.盒子模型分类

w3c标准盒子模型

IE和盒模型（怪异盒模型）低版本ie浏览器解析方式

3.标准盒子模型

content（content）：内容由width，height宽高组成，用于展示内容

padding（内边距）：介于内容与边框的区域，无内容，默认与背景颜色一致

border(边框)：可以设置大小颜色

margin(外边距):盒子与盒子或者浏览器边框的距离

4.盒子模型计算

width = width + padding-left + padding-right + border-left + border-right + margin-left +margin-right

height = height + paddding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

5.padding内边距写法

padding:10px;上下左右都10px

padding:10px 20px;上下10px,左右20px

padding：10px 20px 10px;上10px 左右20px 下10px

padding:10px 20px 10px 20px;上10px 右20px 下10px 左20px

6.margin问题

1.margin重叠时，margin计算
如果两个元素在垂直方向上有margin相遇时，最终值取上一个元素margin-bottom与下一元素margin-top中的较大值；
3.两个浮动元素中，两个浮动元素的间距计算方式，magin左右相加，margin上下相加
3.margin-top bug，高度塌陷
两个元素嵌套的时候，如果外层容器与内层容器之间没有别的元素，浏览器会把内层元素的margin-top作用于父元素
解决方法
1.父元素设置浮动
2.父元素设置padding-top:1px；
3.父元素设置边框,border:1px solid trsparent;
4.父元素设置成display:inline-block;
5.父元素设置overflow：hidden；(最好的一种方法)

7.overflow属性

决定子元素超出父元素后，如何让处理
设置父元素
超出隐藏：overflow:hidden
不超出不显示，超出时自动显示滚动条：aoverflow:auto
不管是超出都会显示滚动条：overflow:scroll
超出时显示：overflow:visible

8.写css前对网页元素边距清零

* {
padding：0；
margin：0；
list-style:none;
}

9.display属性

用于决定元素在页面中的显示：
1.把元素变为块级元素，有宽高：display:block
2.把元素变为行内元素，无宽高：display:inline
3.把元素变为行内块元素，可以设置宽高，不会独占一行：display:inline-block
4.把元素变成表格特性,：display:table-cell
单元格内可以用：vertical-align:middle
文字居中，（行内元素）：text-align:center

10.伪元素

伪元素：是对一些元素特定内容进行操作
1.：：before 在元素之前添加元素
2.：：after 在元素之后添加元素
3.必须设置content属性content:""
4.伪元素为行内元素，不能设置宽高