CSS之盒模型（九）

该文主要讲解了盒子模型属性，标准盒模型与怪异盒模型的区别及转换，以及margin负值的一些特性和规则。

1、盒子模型简介

所有HTML标签都可以看成矩形盒子，具有 盒子模型 结构；
 
盒模型分别由 content padding border margin 4个部分组成；
 
盒模型有 width height border padding margin 5个属性；
 
在标准盒子模型下，content部分就是元素的width和height属性组成的矩形区域。
 

2、盒子模型属性

2.1、width和height属性

width：盒子内容的宽度 （单位：px或百分比，移动端常为vw,vh,rem等单位）；
 
height：盒子内容的高度 （单位：px或百分比，移动端常为vw,vh,rem等单位）。

宽高特性：

块级元素：

• 当块级元素没有设置width属性时，盒子宽度会自动撑满它的父元素（这并不是继承，width不能继承）；
• 没有设置高度时，其高度为内容高，如果内容为空，则高度为0；
• 支持宽高属性的设置。
   

内联元素：

• 内联元素的宽高是由其内容决定，如果内容为空，则宽高默认为0；
• 不支持宽高属性的设置。

2.2、border边框属性

/* border属性的值由三部分组成：线宽，风格，颜色 */
/* 连写方式，相当于大属性 */
border: 1px solid red; /* 线宽-1px  风格-实线  颜色-红色 */

/* 相当于小属性，用来层叠大属性的 */
border-width: 1px;   /*线宽-1px*/
border-style: solid; /*风格-实线*/
border-color: red;   /*颜色-红色*/

常用线风格	描述
none	无边框，需要去掉边框时使用
solid	实线
dashed	虚线
dotted	点状线
double	双边框
groove	定义3D凹槽边框，效果取决于 border-color 值
ridge	定义3D垄状边框，效果取决于 border-color 值
inset	定义3Dinset边框，效果取决于 border-color 值
outset	定义3Doutset边框，效果取决于 border-color 值
hidden	隐藏边框

四个方向的边框：

/* 连写方式，相当于大属性 */
/* 上边框的线宽-5px，风格-点状线，颜色-蓝色 */
border-top: 5px dotted blue;

/* 相当于小属性，用来层叠大属性的 */
border-top-(width/style/color): ;  /* 上边框线宽/风格/颜色 */
border-right-(width/style/color): ;  /* 右边框线宽/风格/颜色 */
border-bottom-(width/style/color): ;  /* 下边框线宽/风格/颜色 */
border-left-(width/style/color): ;  /* 左边框线宽/风格/颜色 */

/* 单独去掉某一边框线，只要将属性值设为none即可 */
border-left: none;  /* 去掉左边框 */

border-radius 圆角属性：

/* border-radius 属性的值通常为`px`单位 ，表示圆角的半径 */
/* 如果是正方形则为圆，正方形宽度的50% */
border-radius: 50%;

/* 如果是边长为100px的正方形则为圆，正方形宽度的一半即：圆的半径 */
border-radius: 50px;

/* 单独设置四个圆角 */
border-radius: 10px 20px 30px 40px;  /* 分别代表：上 右 下 左 四个值 */

/* 相当于小属性，用来层叠大属性用的 */
border-top-left-radius	   /* 左上角 */
border-top-right-radius	   /* 右上角 */
border-bottom-left-radius  /* 左下角 */
border-bottom-right-radius /* 右下角 */

/* 以百分比为单位
border-radius 属性的值也可以用百分比做单位，表示圆角起始于每条边的哪里
正方形盒子 设置`border-radius: 50%;` 为正圆形
长方形盒子 设置 `border-radius: 50%;` 为椭圆形，不能用 px 为单位
*/

2.3、padding内边距

/* 内边距就是盒子里面的内容到边框内壁之间的距离 */
/* padding属性值4种写法，相当于大属性 */

/* 上右下左内边距-10px */
padding: 10px; 
/* 上下内边距-10px 左右内边距-20px */
padding: 10px 20px; 
/* 上内边距-20px 左右内边距-10px 下内边距-30px */
padding: 20px 10px 30px; 
/* 上右下左内边距-10px */
padding: 10px 20px 30px 40px; 

/* 相当于小属性，用来层叠大属性的 */
padding-top: 20px; /* 上内边距为20px */
padding-right: 20px; /* 右内边距为20px */
padding-bottom: 20px; /* 下内边距为20px */
padding-left: 20px; /* 左内边距为20px */

/* 应用场景：如果设置父子间间距，可以给父元素添加内边距来实现 */

2.4、margin外边距

/* 外边距就是盒子与其他盒子之间的间距 */
/* margin属性值4种写法，相当于大属性 */

/* 上右下左外边距-10px */
margin: 10px; 
/* 上下外边距-10px 左右外边距-20px */
margin: 10px 20px; 
/* 上外边距-20px 左右外边距-10px 下外边距-30px */
margin: 20px 10px 30px; 
/* 上右下左外边距-10px */
margin: 10px 20px 30px 40px; 

/* 相当于小属性，用来层叠大属性的 */
margin-top: 20px; /* 上外边距为20px */
margin-right: 20px; /* 右外边距为20px */
margin-bottom: 20px; /* 下外边距为20px */
margin-left: 20px; /* 左外边距为20px */

margin设置盒子水平居中：

/* 只需要给当前元素的`margin`左右值同时设置为`auto`就行了 */
margin: 20px auto; /* 上下外边距-20px 水平居中显示 */
margin: 10px auto 20px; /* 上外边距-10px 水平居中 下  外边距-20px */

外边距层叠现象（也叫：外间距重叠，外边距合并/穿透/塌陷）：

1、兄弟元素之间<>上下外边距合并：

• 元素垂直排列时，第一个元素的下外边距与第二个元素的上外边距会发生合并，合并后的间距就是二者之间最大的那个值，解决方案如下：
   

/* 
1、任何一个元素加上`display:inline-block`
2、把外边距只加在一个元素上
3、任意一个元素外边距换成对应的`padding`内边距 
*/

2、父子元素之间<>上外边距合并：

• 当一个元素包含在另一个元素中时，如果父元素没有设置内边距或边框把外边距分隔开，它们的上外边距也会发生合并，解决方案如下：
   

/*
1、给父元素加上`overflow: hidden;`溢出内容隐藏
2、给父元素添加`border`边框
3、给子元素的margin改成padding
*/

2.5、盒子模型占位计算

盒模型的内容区大小：

• 在 标准盒子模型 中，content 内容区就是 width 和 height 形成的矩形区域，内容区的大小决定了子元素能够占用的大小；
• 如果只有一个子元素（行内元素，行内块级元素），子元素的宽度超过父元素，就会溢出；
• 如果有多个子元素，子元素的宽度加起来超过了父元素，那么超过的那个子元素就会换行显示。
   

盒模型可视宽高：

• 可视区宽=宽度+左右内边距+左右边框宽；
• 可视区高=高度+左右内边距+左右边框高。
   

盒模型实际占位宽度：

• 实际占位宽=宽度+左右内边距+左右边框宽+左右外边距；
• 实际占位高=高度+上下内边距+上下边框宽+上下外边距；

注意： 如果占位宽超过了元素的内容区宽，就会达不到我们想要的布局效果。

3、box-sizing 怪异盒模型

在CSS3中新增了 怪异盒子模型，也叫 IE盒子模型。

3.1、标准盒模型与怪异盒模型区别

标准盒模型 和 IE盒模型 的区别在于设置宽高时，所对应的范围不同：标准盒模型的宽高属性的范围只包含了 content 内容区，IE盒模型则包含了 border , padding , content

• 尺寸计算公式如下：

  • width = border + padding + 内容的宽度

• height = border + padding + 内容的高度

button 标签就是典型的怪异盒模型 !

3.2、盒模型转换

通过 box-sizing 属性来切换：

box—sizing: content-box; 是默认值，盒子以标准盒模型特性来渲染；
 
box-sizing: border-box; 盒子以怪异盒模型特性来渲染。

怪异盒子模型应用场景：

如果我们期望不管内容区，边框、内边距大小如何变化，元素的可视宽高始终不变时，就可以给元素添加 box-sizing:border-box; 属性，以怪异盒模型来渲染；
 
不管元素的占位宽如何变化，始终保持边框和内边距不变，希望通过改变内容区大小来达到目的；
 
常见的响应式开发中、栅格系统等。

4、margin负值

4.1、margin负值特性

margin-left 设置负值，元素向左移动；
 
margin-right 设置负值，自身不受影响，右边元素向左移动；
 
margin-top 设置负值，元素向上移动；
 
margin-bottom 设置负值，自身不受影响，下方元素向上移动。

4.2、margin负值在塌陷时合并规则

margin重叠也叫：外间距重叠，外边距合并/穿透/塌陷，只针对垂直方向，不针对水平方向。
 
两种塌陷方式：

• 兄弟元素之间<>上下外边距合并（重叠）
• 父子元素之间<>上外边距合并（穿透）
   

外边距重叠计算规则：

• 全部都为正值，取最大值
• 一正一负，取两者相加的值
• 都为负值，取绝对值最大的那个

---

上一篇文章	下一篇文章
CSS常用属性之其它属性（八）	CSS之三大特性（十）