盒子模型的简介

盒子的组成

一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）、content（内容）。会发现margin、border、padding是css属性，因此可以通过这三个属性来控制盒子的这三个部分。而content则是HTML元素的内容。

盒子的类型

• 第一种是W3C标准的盒子模型（标准盒模型）
• 第二种IE标准的盒子模型（怪异盒模型）

标准盒模型与怪异盒模型的表现效果的区别之处 

• 标准盒模型中width指的是内容区域content的宽度；height指的是内容区域content的高度

W3C标准盒模型下盒子的大小 = width （ content ） + border + padding + margin 

• 怪异盒模型中的width指的是内容、边框、内边距总的宽度；height指的是内容、边框、内边距总的高度 

怪异盒模型下盒子的大小 = width （ content + border + padding ） + margin 

 如何在CSS 设置这两个模型

标准盒模型：

box-sizing: content-box

怪异盒模型：

box-sizing: border-box

定位：

• 绝对定位（参考点是左上的原点）

position:absolute;
(跟top/bottom/left/right联合使用)

• 相对定位（参考点是本身的位置）

position:relative;
(跟top/bottom/left/right联合使用)

• 固定定位

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

包含块的设置：
设置为包含块的元素，参考点就是这个元素左上角的一点，
移动的范围就是包含块元素的大小

• 浮动定位

float:none/left/right;
注意：如果有一个元素要浮动，相邻的元素也需要加上浮动！！！

• 清除浮动：

clear:left/right/both;
注意：如果想要此元素不浮动，就使用

• 溢出属性：

overflow:hidden/scroll/visibility(默认显示);
text-overflow:ellipsis;(文本超出后用…显示)

• 层叠

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

•   设置居中：

margin:0px auto;