CSS的元素显示模式-CSS的背景-CSS的三大特性
### 一、元素显示模式
#### 1、作用
一个网页的标签是非常多的，在不同的地方会使用到不同类型的标签，了解其特点可以更好的布局我们的网页
元素显示模式就是 元素(标签) 以什么方式进行显示
如：
1. < div>标签自己占一行
2. 一行可以放多个< span>
3. ......
HTML元素一般分为 块元素 和 行内元素 两种类型
#### 2、块元素
常见的块元素有 < h1>~< h6> 、< p>、< div>、< ul>、< ol>、< ki>、其中< div>是常见的块元素
特点：
1. 自己独占一行
2. 高度、宽度、内外边距都可以控制
3. 宽度是默认容器(父级宽度)的100%
4. 是一个容器及盒子，里面可以放行内元素和块元素
注意：
1. 文字类的元素内不能使用块级元素
2. < p> 、< h1>~< h6>标签主要用于存放文字，因此在以上标签内不能放块级元素，特别是不能放< div>标签
#### 3、行内元素
常见的行内元素有 < a>、< strong>、< b>、< em>、< i>、< del>、< ins>、< u>、< span>、其中 < span>是最典型的行内元素
有的地方称行内元素未内联元素
特点：
1. 相邻行内元素在一行上，一行可以显示多个
2. 高、宽直接设置是无效的
3. 默认宽度就是其本身内容的宽度
4. 行内元素只能容纳文本或其他行内元素
注意：
1. 链接里面不能放链接
2. 特殊情况链接< a>里面可以存放块级元素，但是需要给< a>转换以下块级元素最为安全
#### 4、行内块元素
在行内元素中有几个特殊的标签—— < img />、< input />、< td>，他们同时具有块元素和行内元素的特点
特点：
1. 和相邻行内元素(行内块)在一行上，但是他们之间会有空白缝隙，一行可以显示多个
2. 默认宽度就是其本身内容的宽度
3. 高度、行高、内外边距都可以控制
#### 5、元素显示模式总结
| 元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
| ----- | ------------ | -------- | ------- | ------------ |
| 块级元素 | 一行只能放一个块级元素 | 可设置宽高 | 容器的100% | 容器级可以包含任何标签 |
| 行内元素 | 一行可以放多个行内元素 | 不可直接设置宽高 | 本身内容的宽度 | 容纳文本或者其他行内元素 |
| 行内块元素 | 一行可以放多个行内块元素 | 可设置宽高 | 本身内容的宽度 | |
#### 6、元素显示模式的转换
特殊情况下，我们需要元素模式的转换
比如想要增加链接< a>的触发范围
##### 1、把行内元素转换为块级元素：display:block;
```HTML
<head>
......
<style>
a {
width: 150px;
height: 50px;
background-color: pink;
/* 把行内元素 a 转换为块级元素 */
display: block;
}
</style>
</head>
<body>
<a href="">喜羊羊</a>
<a href="">美羊羊</a>
</body>
```
##### 2、把块级元素转换为行内元素：display:inline
```HTML
<head>
......
<style>
div {
background-color: pink;
/* 把块级元素 div 转换为行内元素 */
display: inline;
}
</style>
</head>
<body>
<div> 块级元素1 </div>
<div> 块级元素2 </div>
</body>
```
##### 3、转换为行内块元素：display:inlion-block
```HTML
<head>
......
<style>
span {
width: 300px;
height: 30px;
background-color: skyblue;
/* 把行内元素 span 转换为行内块级元素 */
display: inline-block;
}
</style>
</head>
<body>
<span> 行内元素1 </span>
<span> 行内元素2 </span>
</body>
```
### 二、CSS的背景
#### 1、背景颜色
background-color 属性定义了元素背景的颜色
```CSS
div {
background-color : 颜色值;
}
```
一般情况下元素背景颜色默认值是 rtansparent (透明) ，也可以手动指定背景颜色为透明色
#### 2、背景图片
background-image 属性描述了元素的背景图像
在实际开发中常见于logo、一些装饰性的小图片、超大的背景图片，
优点是非常便于控制位置
```CSS
div {
background-image : none | url(url) ;
}
```
使用：
```HTML
<head>
......
<style>
div {
width: 300px;
height: 300px;
background-image: url(image/logo.png);
}
</style>
</head>
<body>
<div></div>
</body>
```
| 参数值 | 作用 |
| ---- | ----------------- |
| none | 无背景图（默认的） |
| url | 使用绝对地址或相对地址指定背景图像 |
#### 3、背景平铺
background-repeat 属性：在HTML页面上对背景图像进行平铺
```CSS
div {
background-repeat : repeat | no-repat | repeat-x | repeat-y ;
}
```
| 参数值 | 作用 |
| -------- | ------------------ |
| repeat | 背景图像在纵向和横向上平铺（默认的） |
| no-repat | 背景图像不平铺 |
| repeat-x | 背景图像在横向上平铺 |
| repeat-y | 背景图像在纵向上平铺 |
注意：
页面元素即可以添加背景颜色，也可以添加背景图片，
只能不过在同时存在时，背景图片会压住背景颜色
#### 4、背景图片位置
直接插入图片的话不容易调整其位置，若为设置为背景则会更好调整一些
background-position 属性：可以改变图片在背景中的位置
```CSS
div {
background-position : x y;
}
```
参数代表的意思是：x坐标和y坐标
可以使用 方位名词 或者是 精确单位
| 参数值 | 说明 |
| -------- | ------------------------------------------------------- |
| length | 百分数 \| 由浮点数字和单位标识符组成的长度值 |
| position | top \| center \| bottom \| left \| center \| right 方位名词 |
##### 1、参数是方位名词
1. 如果指定的两个值都为方位名词，则两个值的前后顺序无关，如：left top 和 top left 的效果一致
```CSS
div {
background-position : left top;
background-position : top left;
}
```
2. 如果只指定了一个方位名词，另一个省略，，则第二个默认居中对齐
```CSS
<style>
body{
/* 插入背景 */
background-image: url(images/bg.jpg);
/* 不平铺该背景 */
background-repeat: no-repeat;
/* 设置背景为水平居中，展示核心 */
background-position: center top;
}
</style>
```
##### 2、参数是精确单位
1. 如果参数值是精确单位，那么第一个肯定是x坐标，第二个一定是y坐标
```CSS
div {
/* 距离背景所在盒子左边20像素，上边50像素 */
background-position : 20px 50px;
}
```
2. 如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中
##### 3、参数是混合单位
1. 如果指定的两个值是精确单位和方位名词混合使用，则第一个值为x坐标，第二个值为y坐标
```CSS
div {
/* 水平有20像素距离，垂直是居中的 */
background-position : 20px center;
/* 水平是居中的，垂直有20像素距离 */
background-position : center 20px;
}
```
#### 5、背景图像固定（背景附着）
background-attachment 属性 ：设置背景图像是否固定 或者 随着页面的其余部分滚动
其后期可以制作视差滚动的效果
```CSS
div {
background-attachment : scroll | fixed ;
}
```
| 参数 | 作用 |
| ------ | ------------- |
| scroll | 背景图像是随对象内容滚动的 |
| fixed | 背景图像固定 |
#### 6、背景复合写法
为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性 background中
当使用简写属性时没有特定的书写顺序，但一般习惯约定顺序为：
background ：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
```CSS
<style>
body {
background-color : black;
background-image: url(image/logo.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center top;
color: #fff;
font-size: 20px;
}
</style>
/* 采用复合写法 */
<style>
body {
background: black rl(image/logo.png) no-repeat fixed center top;
color: #fff;
font-size: 20px;
}
</style>
```
#### 7、背景色半透明
CSS3提供了背景颜色半透明的效果
background: rgba(0,0,0,0.3)
最后一个参数为alpha，即透明度，取值范围在0~1之间
在开发中，也会习惯吧0.3的0省略掉，写为background: rgba(0,0,0,.3)
```CSS
div {
background: rgba(0,0,0,0.3)
background: rgba(0,0,0,.3)
}
```
注意：
1. 背景半透明是指将盒子的背景半透明，盒子里面的内容不受影响
#### 8、背景总结
| 属性 | 作用 | 值 |
| --------------------- | ------- | --------------------------------------- |
| background-color | 背景颜色 | 预定义的颜色值/十六进制/RGB代码 |
| background-image | 背景图片 | url(图片路径) |
| background-repeat | 背景平铺 | repeat / no-repat / repeat-x / repeat-y |
| background-position | 背景位置 | length / position \| 分别是 x 和 y坐标 |
| background-attachment | 背景附着 | scroll（背景滚动） / fixed（背景固定） |
| 背景简写 | 书写更简单 | 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置 |
| 背景色半透明 | 背景颜色半透明 | background: rgba(0,0,0,0.3) 后面必须是4个值 |
背景图片：实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置
### 三、CSS的三大特性
CSS有三大特性：层叠性，继承性，优先级
#### 1、层叠性
相同选择器给设置相同的样式，此时一个样式就会 覆盖(层叠) 另一个冲突的样式
层叠性主要解决样式冲突的问题
层叠性原则：
1. 样式冲突，遵循的原则是就近原则，哪个样式距离结构近，就执行哪个样式
2. 在CSS文件里，哪个靠下/靠后，就执行哪个样式（代码从上而下，下面的覆盖掉上面的）
3. 样式不冲突，不会层叠
```HTML
<head>
......
<style>
div {
color: red;
font-size: 12px;
}
div {
color: pink;
}
</style>
</head>
<body>
<!-- 最后输出的文本为pink色 文字大小不会发生改变 -->
<div> 喜羊羊 </div>
</body>
```
#### 2、继承性
子类标签会继承父类标签的某些样式，如文本颜色和字号
```HTML
<head>
......
<style>
/* 给父亲 div 设置了属性 */
div {
color: pink;
font-size: 14px;
}
</style>
</head>
<body>
<div>
<!-- 虽然未给孩子p设置属性，但给其父亲div设置，
由于继承性，p也会显示出其父亲所设置出的样式 -->
<p> 龙生龙 凤生凤 老鼠生的孩子会打洞 </p>
</div>
</body>
```
恰当的使用继承，可以简化代码，降低CSS样式的复杂性
但是，子元素并不会继承其父元素的所有样式，
其会继承 text- ,font- ,line-这些元素和文字相关的元素、以及color属性是可以继承
例如高度、盒子模型的内外边距是不会继承的
##### 行高的继承
```CSS
body {
font: 12px/1.5 'Microsoft yahei';
}
```
1. 行高可以跟单位也可以不跟单位
2. 如果子元素没有设置行高，则会继承父元素的行高为1.5
3. 此时，子元素的行高为：当前子元素的文字大小 * 1.5
4. body行高1.5 这样写法最大的优势就是里面子元素可以根据自己的文字大小自动调整其行高
```HTML
<head>
......
<style>
body {
font: 12px/1.5 'Microsoft yahei'
}
div {
/* 其字体大小发了层叠，按照14px计算，继承了行高1.5，此时div的行高为14px*1.5=21px */
font-size: 14px;
}
</style>
</head>
<body>
<div> 我是喜羊羊 </div>
</body>
```
#### 3、优先级
当同一个元素指定多个选择器时，就会有优先级的产生
```HTML
<head>
......
<style>
div {
color: pink;
}
.test {
color:red;
}
</style>
</head>
<body>
<div class="test"> 喜羊羊 </div>
</body>
```
1. 当选择器相同时，则执行层叠性
2. 当选择器不同时，则更具 选择器权重 执行
选择器权重如下所示：
| 选择器 | 选择器权重 |
| -------------- | ------- |
| 继承 或 * | 0,0,0,0 |
| 元素选择器 | 0,0,0,1 |
| 类选择器、伪类选择器 | 0,0,1,0 |
| ID选择器 | 0,1,0,0 |
| 行内样式 style=" " | 1,0,0,0 |
| !imporant | 无穷大 |
!imporant:
```HTML
<head>
......
<style>
.test {
color:red;
}
div {
/* 当加上!imporant后，其具有最高的优先级 */
color: pink !important;
}
#demo {
color:green
}
</style>
</head>
<body>
<div class="test" id="demo" style="color:purple"> 喜羊羊 </div>
</body>
```
注意：
1. 权重是有4组数字组成，但是不会有进位
2. 可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器...以此类推
3. 等级判断从左向右，如果某一位数值相同，则判断下一位数值
4. 继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0
5. a链接浏览器默认定制了一个样式，蓝色、有下划线 a { color : blue } 即：手动设置 > 默认 > 继承
##### 权重的叠加
复合选择器会有权重叠加的问题,需要计算权重
```HTML
<head>
......
<style>
/* ul li 的权重为：0，0，0，1 + 0，0，0，1 = 0，0，0，2 */
/* 其权重大于单li ， 所以最后为绿色 */
ul li {
color: green;
}
/* li的权重为； 0，0，0，1 */
li {
color: red;
}
</style>
</head>
<body>
<ul>
<li> 喜羊羊 </li>
<li> 美羊羊 </li>
</ul>
</body>
```