CSS:盒子模型与定位

盒子模型

盒子模型规定了元素框处理元素内容、内边框、边框和外边距的方式

一个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值大的层位于其值小的层上方