CSS基础——盒子模型

CSS基础——盒子模型

在接触HTML 的过程中，除了各种标签、属性、声明之外，必不可少的还需要对页面的排版布局来考虑。此时盒子模型就显得尤为重要了。

​ 顾名思义，盒子模型就是在CSS中可以将HTNL标签当成一个个的盒子，通过盒子的内外边距，边框和内容，来协调控制各内容的排版。

标准盒模型组成：

内容区content + 填充补白（里面的)padding + 边框 border+外边距（margin）

用个简单的div来看下效果：

​ 里面的div长宽为200px，加上3px的边框，20px的内外边距

​
盒子被撑大了，显然，一个盒子容器的大小是由内容区，padding和border决定的，所以，增加padding和border会使原有的盒子撑大。

Padding:

​ 控制内容到边框之间空白区域的距离，增加padding会使得盒子被撑大，内容区域的大小就是盒子模型所设置的大。

Margin:

margin的用处就是控制最外围元素到边框的距离，增加margin属性，不会改变盒子的大小。通过绿色的背景可以看到，border以内的范围都是背景的显示区域。

margin让人“省心”的地方除了它不会撑大盒子大小外，还可以使用margin自动水平居中，对子元素添加声明 margin：0 auto;

​ .small{

​ width: 110px;

​ height: 110px;

​ margin: 0 auto;

​ background-color: #00FF00;

​ }

Margin和padding的写法：

每个盒子标签都有上下左右，四个边距，CSS可以单独声明也可以4个一起简写，以margin为例：

上外边距：margin-top: 10px;

右外边距：margin-right：10px;

下外边距：margin-bottom： 10px;

左外边距：margin-left： 10px;

Padding写法相同；

还可以使用简写的方式同时设置四边的边距，以margin为例：

Margin：10px; 表示，上下左右外边距都为10px.

Margin:10px 20px; 表示，上下为10px，左右边距为20px;

Margin:10px 20px 30px; 表示上边距为10px;左右边距为20px；下边距为30px.

Margin:10px 20px 30px 40px; 表示，上右下左边距分别为10，20，30，40px;（顺时针方向）

Padding写法相同

Margin可以写负值：

当margin给负值时，元素的显示会可能超出父元素的范围。

Padding不支持负值的写法。

除了标准盒模型，还有一种怪异盒模型（也叫IE盒模型）

​ 给元素添加CSS3属性box-sizing：border-box；来触发怪异盒模型

​ 同一个div当我们给他触发怪异盒模型后：

区别在于，padding和border并不会撑开盒子的大小，盒子的大小是固定的。

小技巧：

使用怪异盒子的这一特性，减轻了计算量，有时会帮我们省下很多代码

例如：当我们需要横向排列几个大小一致的内容时：

.div{

​ float: left;

​ box-sizing: border-box;

​ width: 25%;

​ height: 100%;

​ padding: 20px;

​ border: 3px solid #008000;

​ }

只需要确定的大小，不管里面的内容和边距大小如何变化，都不会影响排版