CSS 盒子模型

一.盒子模型及其构成

盒子的构成：
盒子是由外边距margin，背景颜色background-color，背景照片background-image，内边距padding，内容content，框线border，6部分组成。

1.border

①边框颜色border-color:{border-color: #000;}
②边框粗细border-width:{border-width:像素值; }
③边框类型border-style:{border-style:solid;}
框线类型：double none hidden dotted dashed solid 。其中solid（实线），dashed（虚线），最为常用。
④border简写：
{border: 1px solid #000;}

2.margin

①外边距的使用方法
{margin:1px;}，所有外边距都是1px；
{margin:1px 2px;}，上下外边距是1px，左右外边距是2px；
{margin:1px 2px 3px}，上边距是1px，下边距是2px，左右边距是3px；
{margin:1px 2px 3px 4px;}，上边距1px，右边距2px，下边距3px，左边距4px。
注：大括号内描述外边距的数字，从上边距开始，延顺时针排列，哪边没有数据，就和对边的数据一样计算。同理，内边距和框线也这样计算。
②外边距的妙用
将上下外边距设为0，左右边距设为自动，可在网页中将盒子居中对齐。
{margin：0px auto;}

3.padding

①内边距的使用方法
{padding:1px;}，所有外边距都是1px；
{padding:1px 2px;}，上下外边距是1px，左右外边距是2px；
{padding:1px 2px 3px}，上边距是1px，下边距是2px，左右边距是3px；
{padding:1px 2px 3px 4px;}，上边距1px，右边距2px，下边距3px，左边距4px。

4.盒子模型的尺寸

盒子模型总尺寸=border+padding+margin+内容宽度

二.box-sizing

语法：{box-sizing：content-box | border-box | inherit;}
content-box：默认值，盒子的总尺寸
border-box：盒子的宽度或高度等于元素内容的宽度或高度
inherit：元素继承父元素的盒子模型模式

三.圆角边框

1.语法：{border-radius: 20px 10px 50px 30px;}

四个属性从左上角开始，按顺时针排序，表示每个角的圆角的半径。

2.利用radius做圆

代码：
div{
width: 100px;
height: 100px;
border: 4px solid red;
border-radius: 50%;
}
条件：元素的宽度和高度必须相同；圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%。

3.利用radius做半圆

上半圆代码：
div{
width: 200px;
height: 100px;
border: 4px solid red;
border-radius: 100% 100% 0 0；
}
条件：制作上半圆或下半圆时，元素的宽度是高度的2倍，而且圆角半径为元素的高度值。左半圆反之。

4.利用radius做1/4圆

左上1/4圆代码：
div{
width: 100px;
height: 100px;
border: 4px solid red;
border-radius: 100% 0 0 0；
}
条件：元素宽度、高度、半径相同。

四.盒子阴影

语法：{box-shadow:inset x-offset y-offset blur-radius color;}
inset：阴影类型内阴影
x-offset：X轴位移，指定阴影水平位移量
y-offset：Y轴位移，指定阴影垂直位移量
blur-radius：阴影模糊半径阴影向外模糊的模糊范围
color：阴影颜色，定义绘制阴影时所使用的颜色