盒子模型

1、什么是盒子模型？

模型是一个及其通用的描述，是一种以矩形对象的布局的方法，这些矩形对象称为盒子。

2、盒子模型组成

• content ---- 网页内容
• border ----- 边框
• padding ----- 内边距
• margin ------ 外边距
• 这四部分组成一个盒子模型。

3、边框:有三个属性

• color   颜色
• width  宽
• height  高

4、盒子模型分为四个边框

• top  上
• right  右
• bottom 下
• left    左

注意：上面这四个属性准守顺时针顺序。上、右、下、左

5、外边框

位于盒子边框外，指与其他盒子之间的距离，也就是指网页中与元素之间的距离。

外边距与盒子一样，也分上、右、下、左边距。

margin:5px 4px 3px 2px;

注释：设置外边距

6、内边距

用于控制内容与边框之间的距离，内边距也分上、由、下、左边距。

padding：0px 0px 0px 0px;

注释：设置内边距

注意：在使用盒子模型时，外边距位于边框外面，内边距位于边框内部。

margin:0px auto  可以让整个盒子居中。

7、盒子模型尺寸

内盒尺寸：

border + padding + 内容宽/高

外盒尺寸：

border + padding + margin + 内容宽/高

8、box - sizing拯救布局

box -  sizing：

• content -box 是默认值
• border - box 标准
• inherit 

9、圆角边框

border - radius：

分别有4个属性，左上，右上，右下，左下，顺时针，没有属性时参照对边。

制作圆形：

• 元素的宽/高 必须相同
• 圆角半径为元素的一半，或者直接设置圆角半径为50%.

制作半圆：

• 制作上半圆或者下半圆时，元素宽度是高度的2倍，而且圆角半径为元素的高度值。
• 制作左半圆或者右半圆时，元素高度是宽度的2倍，而且圆角半径是元素的宽度值。

注意：在制作圆形时，要准守三同三不同。

三同：元素宽度、高度、圆角半径相同。

三不同：圆角取值位置相同。

10、盒子阴影

box - shadow 

box - shadow:inset x y blur-radius color;

注释：inset 是内阴影，x是水平位置，y是垂直位置，blur- radius是阴影模糊半径，color是颜色