7. CSS盒子模型

7.1 看透网页布局的本质

网页布局过程∶

1. 先准备好相关的网页元素，网页元素基本都是盒子Box。

2. 利用CSS设置好盒子样式，然后摆放到相应位置。

3. 往盒子里面装内容.

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

7.2 盒子模型(Box Model )组成

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

• border边框

• content内容

• padding内边距

• 外边距margin

7.3 边框(border)

border可以设置元素的边框。边框有三部分组成:边框宽度(粗细)边框样式 边框颜色

语法∶

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

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框的样式:solid实线边框 dashed虚线边框 dotted 点线边框
border-color	边框颜色

 

CSS边框属性允许你指定一个元素边框的样式和颜色。边框简写︰

border: 1px solid red;没有顺序

边框分开写法∶

border-top: 1px solid red;/*只设定上边框,其余同理*/
​
​

课堂要求∶请给一个200*200的盒子，设置上边框为红色，其余边框为蓝色(提示:一定注意边框的层叠性)

7.4 表格的细线边框

border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。

语法︰

border-collapse:collapse;

• collapse单词是合并的意思

• border-collapse: collapse;表示相邻边框合并在一起

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

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

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

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

7.6 内边距( padding )

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

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

padding简写

值的个数	表达意思
1个值	padding：上下左右内边距;
2个值	padding: 上下内边距 左右内边距 ；
3个值	padding：上内边距 左右内边距 下内边距；
4个值	padding: 上内边距 右内边距 下内边距 左内边距 ；

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

1. 内容和边框 有了距离，添加了内边距。

2. 盒子会变大

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

padding不影响盒子大小情况：如果没有给一个盒子指定宽度， 此时，如果给这个盒子指定padding， 则不会撑开盒子。

7.7 外边距（margin）

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

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

margin值的简写 （复合写法）代表意思 跟 padding 完全相同。

块级盒子水平居中

• 盒子必须指定宽度（width）

• 然后就给左右的外边距都设置为auto

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

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

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

• margin: auto;

• margin: 0 auto;

文字居中和盒子居中区别

1. 盒子内的文字水平居中是 text-align: center; 而且还可以让 行内元素和行内块居中对齐

2. 块级盒子水平居中 左右margin 改为 auto

插入图片和背景图片区别

1. 插入图片我们用的最多 比如产品展示类 移动位置只能靠盒模型 padding margin

2. 背景图片我们一般用于小图标背景或者超大背景图片、背景图片，移动位置只能通过 background-position

7.8 外边距合并

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

(1). 相邻块元素垂直外边距的合并

• 当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom

• 下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和

• 「取两个值中的较大者」这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。

(2). 嵌套块元素垂直外边距的合并（塌陷）

• 对于两个嵌套关系的块元素，如果父元素没有上内边距及边框

• 父元素的上外边距会与子元素的上外边距发生合并

• 合并后的外边距为两者中的较大者

「解决方案：」

1. 可以为父元素定义上边框。

2. 可以为父元素定义上内边距

3. 可以为父元素添加overflow: hidden。

还有其他方法，比如浮动、固定、绝对定位的盒子不会有问题，后面咱们再总结。。。

7.9 清除内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。

• 行内元素为了照顾兼容性,尽量只设置左右内外边距，不要设置上下内外边距。

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

注意∶行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了公