盒子模型规定了元素框处理元素内容、内边框、边框和外边距的方式
![]()
![]()
一个div的总宽度为width+padding(左)+padding(右)+border(左)+border(右)+margin(左)+margin(右)
padding内边距（填充）（里面的值按顺时针）
padding: 10px（表示四边的内边距都为10px）
padding: 10px 20px;（表示上边距和下边距为10px，左边距和右边距为20px）
padding：10px 20px 30px（表示上边距为10px，右边距为20px，下边距为30px，左边距为20px）
padding: 1px 2px 3px 4px（指定四边的值）
也可以对四个方向的内边距单独控制
padding-top、padding-right、padding-bottom、padding-left
border边框
border-style样式
border-color颜色（透明颜色：transparent）
border-width:边框的宽度
简写：border：大小 样式 颜色
可以对四边当独设置
margin（外边距）
围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”
里面的设置与padding相识
margin中的auto用法表示取计算机的值
如块级元素居左
margin: 0px auto 0px 0px
块级元素居中
margin:auto auto
外边距合并
当"两个"垂直外边距相遇时，它们将形成"一个"外边距。合并后的外边距的高度等于两个发生合并的外边距的高度
中的较大者如：
当一个元素包含在另一个元素中时（条件：父元素没有内边距或边框），它们的上和/或下外边距也会发生合并如：
定位（position）
定位的基本思想很简单，它允许我们定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span和
strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。
用 display 属性改变生成的框的类型
display 属性设置为 block，可以让行内元素变成块级元素
把 display 设置为 none，用于隐藏元素
CSS 有三种基本的定位机制：普通流（默认）、相对定位和绝对定位。
static 默认
relative 相对定位
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute 绝对定位
元素框从文档流完全删除，并相对于其包含块定位。元素原先在正常文档流中所占的空间会关闭，就好像元素原来
不存在一样。元素定位后变成一个块级元素
相对定位
设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。
top、left、right、bottom（可以是数值、百分数）
绝对定位
使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素”为基准进行偏移。如果没有已经定位的祖先元素、
那么会以浏览器窗口为基准进行定位
绝对定位的元素从标准文档流中脱离，这意味着它们对其他元素的定位不会造成影响
设置了绝对定位但没有设置偏移量的元素将保持在原来的位置
偏移设置left、right、top、bottom可以为数字或百分比
z-index（面对自已为正）
调整元素定位时重叠层的上下位置
z-index属性值：整数，默认值为0
设置了positon属性为absolute时，z-index属性可以设置各元素之间的重叠高低关系。
z-index值大的层位于其值小的层上方