盒子模型

标准盒子模型

标准盒子模型有4层结构：

a)最核心区域是内容层（蓝色区域），用于显示子元素和文本，在标准盒子模型下，宽高指的是内容区的宽高，加背景色是给内容区加背景色；

b)核心区外一层是填充区，padding，padding区会被内容区染色;

padding和margin都支持4个属性值

1、当只有一个属性值时，四个方向都是这个属性值；

2、当有两个值的时候，第一个表示上下方向的属性值，第二个值表示左右的属性值；

3、当有三个值的时候，第一个值表示上，第二个表示左右，第三个表示下；

4、当有四个属性值的时候，四个值的顺序分别是上、右、下、左；

padding也可以使用padding-top, padding-left, padding- bottom, padding-right分别设置上下左右的属性值；

c)边框，border区，边框具有厚度、样式、颜色，语法:border:5px solid #ff0000;（border:边框厚度 边框样式 边框颜色）

1）样式分为：solid 实线、dashed 虚线、dotted 点划线、double 双线、none 去掉边框；

2）可以使用border-top、、、等控制哪边有边框；

3）设置圆角的办法：border-radius可以同时设置1到4个值。简洁法:

如果设置1个值，表示4个圆角都使用这个值。border-radius:40px;

如果设置两个值，表示左上角和右下角使用第一个值，右上角和左下角使用第二个值。border-radius: 10px 50px;

如果设置三个值，表示左上角使用第一个值，右上角和左下角使用第二个值，右下角使用第三个值。border-radius: 10px 50px 40px;

如果设置四个值，则依次对应左上角、右上角、右下角、左下角（顺时针顺序）。border-radius: 10px 20px 30px 40px;

4）单独设置一个角的写法
border-top-left-radius: 20px; //设置左上角
border-top-right-radius: 20px; //设置右上角
border-bottom-left-radius: 20px; //设置左下角
border-bottom-right-radius: 20px; //设置左下角

5）原始写法：还可以用border-radius:100px/50px;来设置边角，原理就是用一个水平宽度为1002px，垂直高度502px的椭圆去内切边角得到一个边角的样式；

其实根据上面的原始写法不难推测出，这个切割圆角的原理就是通过设定一个圆的半径（一个参数）去切割这个角或者一个椭圆（两个参数：参数/参数）去切割这个圆。

d)外边距，margin，用于控制标签与标签的距离，

可以使用margin-top、、、等控制某边的间距；

但是对于独占一整行的标签，例如p标签，h标签，margin右侧仍会填充一整行；

span标签的上下margin是为零的，直接设置margin只能设置左右的margin大小；

上下相邻的两个标签的margin会重叠，以最大的margin为准，左右相邻的margin不会重叠，左右相邻的两个标签的margin是相加的；

靠近父元素顶部的子元素的margin，会跑到父元素外面，需要给父元素加上 overflow:hidden; 可以解决这个问题；

margin：取值可以为负值，取为负值后，别的元素会干扰元素内部布局；

padding：不可取负值；