盒子模型

在使用CSS进行网页布局时，我们一定离不开的一个东西————盒子模型。盒子模型，顾名思义，盒子就是用来装东西的，它装的东西就是HTML元素的内容。或者说，每一个可见的 HTML 元素都是一个盒子，下面所说的盒子都等同于 HTML 元素。
盒子模型的组成
一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）、content（内容）。
盒子模型的大小
盒子模型总尺寸=border+podding+margin+内容宽度
语法：
box-sizing:cotent-box |border-box|
content-box:默认值 盒子的总长度
borser-box:内容+内边距的宽度为设置的总宽度
圆角边框：
border-radius：
像素数值越大越圆
四个属性值按顺时针排列：
左上 右上 右下 左下
利用 border-radius 制作圆的两个要点：
元素宽高必须相同
圆角半径为宽度一半或直接设置为50%
利用 border-radius 制作制作半圆的要点
制作上下半圆时，宽是高的二倍，圆角半径为元素德尔宽
扇形遵循三同一不同
三同是指宽 高 圆角半径相同
一不同是取值位置不同
盒子阴影
box-shadow:inset x-offset y-offset