7. CSS盒子模型
7.1 看透网页布局的本质
网页布局过程∶
-
先准备好相关的网页元素，网页元素基本都是盒子Box。
-
利用CSS设置好盒子样式，然后摆放到相应位置。
-
往盒子里面装内容.
网页布局的核心本质:就是利用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 边框会影响盒子实际大小
边框会额外增加盒子的实际大小。因此我们有两种方案解决:
-
测量盒子大小的时候不量边框.
-
如果测量的时候包含了边框,则需要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件事情：
-
内容和边框 有了距离，添加了内边距。
-
盒子会变大
解决措施：如果保证盒子跟效果图大小保持一致，则让width/height减去多出来的内边距大小即可。
padding不影响盒子大小情况：如果没有给一个盒子指定宽度， 此时，如果给这个盒子指定padding， 则不会撑开盒子。
7.7 外边距（margin）
margin属性用于设置外边距。margin就是控制盒子和盒子之间的距离
| 属性 | 作用 |
|---|---|
| margin-left | 左外边距 |
| margin-right | 右外边距 |
| margin-top | 上外边距 |
| margin-bottom | 下外边距 |
margin值的简写 （复合写法）代表意思 跟 padding 完全相同。
块级盒子水平居中
-
盒子必须指定宽度（width）
-
然后就给左右的外边距都设置为auto
.header { width: 960px; margin: 0 auto;}
常见的写法，以下下三种都可以。
-
margin-left: auto; margin-right: auto;
-
margin: auto;
-
margin: 0 auto;
文字居中和盒子居中区别
-
盒子内的文字水平居中是 text-align: center; 而且还可以让 行内元素和行内块居中对齐
-
块级盒子水平居中 左右margin 改为 auto
插入图片和背景图片区别
-
插入图片我们用的最多 比如产品展示类 移动位置只能靠盒模型 padding margin -
背景图片我们一般用于小图标背景或者超大背景图片、背景图片，移动位置只能通过 background-position
7.8 外边距合并
使用margin定义块元素的「垂直外边距」时，可能会出现外边距的合并。
(1). 相邻块元素垂直外边距的合并
-
当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom
-
下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和
-
「取两个值中的较大者」这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。
(2). 嵌套块元素垂直外边距的合并（塌陷）
-
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框
-
父元素的上外边距会与子元素的上外边距发生合并
-
合并后的外边距为两者中的较大者
「解决方案：」
-
可以为父元素定义上边框。
-
可以为父元素定义上内边距
-
可以为父元素添加overflow: hidden。
还有其他方法，比如浮动、固定、绝对定位的盒子不会有问题，后面咱们再总结。。。
7.9 清除内外边距
网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。
-
行内元素为了照顾兼容性,尽量只设置左右内外边距，不要设置上下内外边距。
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}
注意∶行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了公
