HTML5基础----盒子模型

1. 盒子模型的原理
实际宽度=左外边距+左边框+左内边距+内容+右内边距+右边框+右外边距

2. 定位：

1）绝对定位（参考点是左上的原点）
position:absolute;
(跟top/bottom/left/right联合使用)

2）相对定位（参考点是本身的位置）
position:relative;
(跟top/bottom/left/right联合使用)

3) 固定定位
position:fixed;
(跟top/bottom/left/right联合使用)

包含块的设置：
设置为包含块的元素，参考点就是这个元素左上角的一点，
移动的范围就是包含块元素的大小
4）浮动定位
float:none/left/right;
注意：如果有一个元素要浮动，相邻的元素也需要加上浮动！！！
清除浮动：
clear:left/right/both;
注意：如果想要此元素不浮动，就使用

3. 溢出属性：
overflow:hidden/scroll/visibility(默认显示);
text-overflow:ellipsis;(文本超出后用…显示)

4. 层叠
z-index:数字（不要单位）;
数字越大越在上面，越小越在下面

5. 设置居中：
margin:0px auto;