css盒子模型

盒子模型（box model）又叫盒模型，框模型。CSS将页面中的所有元素都设置为了一个矩形的盒子，之后对页面的布局就变成了将不同盒子摆放到不同的位置。

盒子的组成

一个盒子包括content（内容区），padding（内边距），border（边框）和margin（外边距）。其中，前三者决定盒子可见框的大小，margin决定盒子的位置。

content内容区

元素中的所有子元素和文本内容都在内容区进行排列；
内容区的大小由width（宽度）和height（高度）来设置；

padding内边距

内容区与边框间的距离就是内边距，如上图所示，共有四个方向的内边距，即padding-top,padding-right,padding-bottom,padding-right;
设置padding时可以进行简写，简写情况如下：

1. 一个值：则上右下左四个方向全部设置；
2. 两个值： 第一个值为上下方向的padding，第二个值为左右方向的padding；
3. 三个值：第一个为上内边距，第二个为左右内边距，第三个为下内边距；
4. 四个值：按上右下左顺序设置内边距

设置内边距会影响盒子大小，背景颜色会延申到内边距中。

border边框

边框就是盒子边缘，其大小也会影响盒子大小，设置边框必须至少包含三个样式：

1. border-width: 边框的宽度，默认为3px，使用方法与padding基本一致。
2. border-color: 边框颜色，省略不写则默认使用color的颜色。
3. border-style: 边框样式，默认值为none，表示没有边框，可设置的值有：solid：实线；dotted：点状；dashed：虚线；double：双线。

可以使用border-xxx-xxx的形式转为一条边框设置样式，例如border-top-width:5px;表示单独将上边框宽度设置为5px，border-left-color:red;表示将左边框设置为红色。

可以使用border-xxx的形式设置一条边框的所有样式，样式没有顺序要求，例如border-top:orange solid 2px;表示将上边框设置为橘色，实线，2px。

可以使用border同时设置四个边框，同样没有顺序要求。

margin外边距

外边距不会影响盒子可见框的大小，但会影响盒子的位置，外边距也有四个方向可以设置：margin-top,margin-right,margin-bottom,margin-right。margin也可以进行简写，简写与padding相同。

margin可以设置正值和负值，当设置负值时，盒子向反方向移动。

margin-right在默认情况下即使修改也不会产生效果。

box-sizing

box-sizing用于设置盒子尺寸的计算方式，就是设置width与height的决定范围。
可选值：

1. content-box：默认值，width与height用于设置content大小；
2. border-box：width与height用于设置可见框的大小，即width与height指content，padding，border的总和。

outline轮廓线

用于设置元素的轮廓线，用法与border一样。

outline与border的区别：outline不会影响可见框的大小，即不会对页面布局造成影响。

box-shadow阴影

用于设置元素的阴影效果，不会影响页面布局。

用法：例如box-shadow: 5px 6px 7px red;用于使元素有一个向左偏移5px，向下偏移6px，模糊半径为7px，颜色为red的阴影。
box-shadow后的第一个值表示水平偏移量，第二个值表示垂直偏移量，第三个值表示模糊半径，第四个值表示阴影颜色。

border-redius圆角

border-redius用于给盒子边框设置圆角，值为圆的半径大小。

border-redius可以设置椭圆圆角，需要给定两个值，第一个代表横轴半径，第二个代表纵轴半径。

可以使用border-top-left-redius给左上边框设置，其他三个方向类似。一般情况下使用简写border-redius直接设置（顺时针）：

1. 一个值给四个方向同时设置相同圆角；
2. 两个值对应左上与右下，右上与左下；
3. 三个值对应左上，右上与左下，右下；
4. 四个值对应左上，右上，右下，左下。

这种情况下要设置椭圆需用/隔开，例如border-redius: 10px/20px。

将元素设置为一个圆形可以使用百分比：border-redius:50%;