盒子的组成
一个盒子由外到内可以分成四个部分:
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;