CSS 盒子模型

盒子模型

网页布局过程和本质

1. 先准备好相关的网页元素，网页元素基本都是盒子Box。
2. 利用CSS设置好盒子样式，然后摆放到相应位置。
3. 往盒子里面装内容。

网页布局的核心本质：就是利用CSS摆盒子。

盒子模型组成部分

所谓盒子模型 (Box Model)：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
CSS 盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距、和实际内容。

边框 (border)

border可以设置元素的边框。

边框有三部分组成：边框宽度(粗细)，边框样式，边框颜色。

简写方式︰

border: border-width || border-style || border-color

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框的样式
border-color	边框颜色

border-style: solid;	/* 实线 */

border-style: dotted;	/* 点线 */

border-style: dashed;	/* 虚线 */

表格的细线边框

border-collapse 属性控制浏览器绘制表格边框的方式。collapse 单词是合并、折叠的意思

它控制相邻单元格的边框。

语法︰

table,
th,
td {
	border: 1px solid pink;
    /* 合并相邻的边框 */
	border-collapse: collapse;
}

边框会影响盒子的实际大小

边框会额外增加盒子的实际大小。因此我们有两种方案解决:

1. 测量盒子大小的时候，不量边框。

2. 如果测量的时候包含了边框，则 width/height 需要减去边框宽度

内边距 (padding)

语法

padding属性用于设置内边距，即边框与内容之间的距离。

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

padding 复合属性

padding属性 ( 简写属性 ) 可以有一到四个值。

值的个数	表达意思
padding: 5px;	1个值，代表上下左右都有5像素内边距
padding: 5px 10px;	2个值，代表上下内边距是5像素，左右内边距是10像素
padding: 5px 10px 20px;	3个值，代表上内边距5像素，左右内边距10像素，下内边距20像素
padding: 5px 10px 20px 30px;	4个值，上是5像素，右10像素，下20像素，左是30像素，顺时针

padding 会影响盒子的实际大小

当我们给盒子指定padding值之后，发生了2件事情：

1. 内容和边框有了距离，添加了内边距。
2. padding影响了盒子实际大小。

也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。解决方案∶

如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可。

padding 不会撑开盒子的情况

如何盒子本身没有指定 width/height 属性，则此时padding不会撑开相应的盒子大小。

外边距 (margin)

语法

margin 属性用于设置外边距，即控制盒子和盒子之间的距离。

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

margin 简写方式代表的意义跟padding完全一致。

注意∶

​ 行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距 (因为不起效果)。

​ 但是转换为块级和行内块元素就可以了。

块级盒子水平居中

外边距可以让块级盒子水平居中，但是必须满足两个条件：

1. 盒子必须指定了宽度 (width)。

2. 盒子左右的外边距都设置为 auto。

.header { 
	width: 960px; 
    margin: 0 auto; 
}

常见的写法，以下三种都可以∶

• margin-left: auto; margin-right auto;

• margin: auto;

• margin: 0 auto; (比较好)

注意：以上方法是让块级元素水平居中，要使行内或行内块元素水平居中可以给其父元素添加 text-align:center。

外边距合并

使用 margin 定义块元素的垂直外边距时，可能会出现外边距的合并。

相邻块元素垂直外边距的合并

​ 当上下相邻的两个块元素 (兄弟关系) 相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top，则他们之间的垂直间距是margin-bottom与margin-top 两个值中的较大者，这种现象被称为相邻块元素垂直外边距的合并。

解决方案：尽量只给一个盒子添加margin值。

嵌套块元素垂直外边距的塌陷

​ 对于两个嵌套关系 (父子关系) 的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

解决方案:

1. 可以为父元素定义上边框。
2. 可以为父元素定义上内边距。
3. 可以为父元素添加 overflow:hidden。
4. 脱标的盒子不会触发外边距塌陷，比如浮动，固定、绝对定位的盒子不会有塌陷问题。

清除内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器的默认值也不一致。

因此我们在布局前，首先要清除网页元素的内外边距。

* {
	padding: 0;		/*  清除内边距  */
    margin: 0;		/*  清除外边距  */
}

CSS3 盒子模型

CSS3 中可以通过 box-sizing 来指定盒子模型

有2个值：即可指定为content-box或者border-box，这样我们计算盒子大小的方式就发生了改变。

可以分成两种情况:

1. box-sizing: content-box；(默认值)

   盒子宽度为 border-left+padding-left+width+padding-right+border-right，

   盒子高度为 border-top+padding-top+height+padding-bottom+border-bottom。

   边框border和内边距padding会撑大盒子。

2. box-sizing: border-box；

   盒子宽度为 width ，盒子高度为height。

   只要边框border和内边距padding不会超过盒子的宽度width和高度height， border和 padding就不会撑大盒子。