盒模型、文档流
盒模型
一、盒子中的区域
一个盒子中主要的属性就5个：width、height、padding、border、margin。
width是“宽度”的意思，CSS中width指的是内容的宽度，而不是盒子的宽度。
height是“高度”的意思，CSS中height指的是内容的高度，而不是盒子的高度
padding是“内边距”的意思
border是“边框”
margin是“外边距”
二、认识padding
背景色会填充到padding中去，padding区域有背景颜色，background-color将填充所有boder以内的区域。
Padding有两种写法，一种小属性写法，另一种是综合性写法，综合写法时要用空格隔开。顺序是上右下左
在写padding时，要用小属性层叠大属性
例如：padding: 20px;
padding-left: 30px;
三、border
border就是边框。边框有三要素：粗细、线型、颜色。
颜色如果不写，默认是黑色。粗细和线型不写显示不出来边框。（颜色、线型缺一不可）
Border属性能够被拆开，有两大拆开方式：
1）按3要素拆开
border-width:10px; → 边框宽度
border-style:solid; → 线型
border-color:red; → 颜色。
等价于：border:10px solid red;
2）按方向拆：
按方向：border-top、border-right、border-bottom、border-left
按方向还能再拆一层，就是把每个方向的按每个要素拆开。如：
border-top-width:10px;
标准文档流
1）空白折行折叠现象
当后面的空间不足以放下本身空间时，会自动换行
2）文档流按照底部对齐，高矮不齐；
一、块级元素和行内元素
标签根据文档流分为块级元素、行内元素。
1） 块级元素
● 霸占一行，不能与其他任何元素并列
● 能接受宽、高
● 如果不设置宽度，那么宽度将默认变为父亲的100%。
2） 行内元素
● 与其他行内元素并排
● 不能设置宽、高。默认的宽度，就是文字的宽度。
根据显示内容分为：文本级、容器级。
文本级：p、span、a、b、i、u、em
容器级：div、h系列、li、dt、dd
所有的文本级标签，都是行内元素，除了p，p是个文本级，但是是个块级元素。
所有的容器级标签都是块级元素。
二、块级元素和行内元素互换
通过display相互转换
display：inline转换成行内元素。
● 此时这个div不能设置宽度、高度；
● 此时这个div可以和别人并排了
display：block转换成块级元素。
● 此时这个元素能够设置宽度、高度
● 此时这个元素必须霸占一行了，别人无法和他并排
● 如果不设置宽度，将撑满父亲
脱离标准文档流
css中一共有三种手段，使一个元素脱离标准文档流：
1） 浮动
2） 绝对定位
3） 固定定位
一、浮动
1）浮动会使元素脱离标准文档流，不受标准文档流束缚。
2）浮动元素会相互贴靠
3）浮动元素有字围效果
注意：字围只能是汉字才有的效果，英文字符数字不行！
虽然div有浮动，可以挡住p标签但是挡不住p里的内容
强调：要有浮动都浮动。
4）浮动元素会收缩
收缩：一个浮动的元素，如果没有设置width，那么将自动收缩为文字的宽度（这点非常像行内元素）。
二、浮动的清除
清除浮动的方法：
1）给浮动的元素的祖先元素加高度
如果一个元素要浮动，那么它的祖先元素一定要有高度。
只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素。所以就是清除浮动带来的影响了。
给前面一个浮动过的元素的祖元素加高度，清除浮动对后面的影像。
2）clear：both
clear就是清除，both指的是左浮动、右浮动都要清除。意思就是：清除别人对我的影响。
注意：这种方法有bug，加上clear：both后margin会失效。
3）隔墙法
在两个浮动的中间插一个div分隔开来并清除浮动clear：both。
内墙法：把div块插在浮动元素的后面，也就是浮动元素父元素里面。
“内墙法”： 浏览器渲染机制 内墙div 设置属性 clear: both即可给父亲设置高度
注意：脱标的元素是不能把父元素撑出高度的！表现出的高是假象。
两个p都浮动，所以div不能被撑出高。而在家里添加一个内墙，就能够让div被儿子撑出高度。
4）溢出清除浮动：overflow：hidden
overflow 当层的内容超出层所能容纳的范围时：
visible 层的 大小 内容会显示出来
hidden 隐藏超出层大小的内容
scroll 不管内容是否超出层的范围 都添加滚动条
auto 只在内容超出层的范围时才显示滚动条
一个父亲不能被自己浮动的儿子，撑出高度。但是，只要给父亲加上overflow:hidden; 那么，父亲就能被儿子撑出高了。这是一个偏方。
开发时，隔墙法和溢出隐藏都可以。
