开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第十四天，点击查看活动详情
7.元素显示模式
7.1 块元素
常见的块元素有< h1>~< h6>、< p>、< div>、< ul>、< ol>、< li>等，其中< div>是最经典的块元素
块元素的特点:
- 独占一行
- 高度、宽度、外边距以及内边距都可以控制
- 默认宽度是容器(父级宽度)的100%
- 是一个容器的盒子，里面可以放行内或者块级元素
注意：
- 文字类的标签内不能使用块级元素
- < p>标签主要用于存放文字，因此< p>里面不能放块级元素，特别是不能放< div>
- < h1>~< h6>同理
7.2行内元素
常见的行内元素有< a>、< strong>、< b>、< em>、< i>、< del>、< s>、< ins>、< u>、< span>
其中< span>标签是最典型的行内元素。有的地方也将行内元素称为内联元素。
特点：
- 相邻行内元素在一行上，一行可以显示多行
- 高、宽直接设置是无效的。
- 默认宽度就是他本身内容的宽度
- 行内元素只能容纳文本或其他行内元素
注意：
- 链接里面不能放链接
- < a>里面可以放块级元素，但是给< a>转换一下块级模式最安全
7.3 行内块元素
在行内元素中有几个特殊的标签——< img/>、< input/>、< td>。
行内块元素的特点：
- 和相邻行内元素（行内块）在一行，但是他们之间会有空白缝隙。一行可以显示多个。
- 默认宽度就是他本身内容的宽度
- 高度、行高、外边距以及内边距都可以控制。
7.4模式转换
- 转换为块元素： display：block
- 转换为行内元素：display：inline
- 装换为行内块 ：display：inline-block
8.背景属性
8.1背景平铺
如果需要HTML页面上对背景图像进行平铺，可以使用background-repeat属性
background-repeat: repeat | no-repeat | repeat-x | repeat-y
| 参数值 | 作用 |
|---|---|
| repeat | 背景图像在纵向和横向上平铺（默认的） |
| no-repeat | 背景图像不平铺 |
| repeat-x | 背景图像在横向上平铺 |
| repeat-y | 背景图像在纵向上平铺 |
8.2背景图片位置
利用background-position属性可以改变图片在背景中的位置
background-position: x y;
参数代表的意思是：x 坐标和y 坐标，可以使用 方位名词和精确名词
| 参数值 | 说名 | ||||
|---|---|---|---|---|---|
| length | 百分数 | 由浮点数和单位标识符组成的长度值 | |||
| position | top | center | bottom | left | right 方位名词 |
