本文详细介绍了CSS中的元素显示模式，包括块元素、行元素和行内块元素的特点及转换方法。同时，深入探讨了背景属性，如颜色、图片、平铺、位置等，并讲解了背景颜色的半透明实现。此外，还阐述了CSS的层叠性和继承性，以及优先级规则。通过实例解析，帮助读者理解如何在实际开发中应用这些概念。
元素显示模式
1. 块元素
常见：<h1>~<h6 <p> <div> <ul> <ol> <li>
特点：（1）独占一行；
（2）可调宽高，内外边距；
（3）宽度默认是容器（父级宽度）的100%，是一个容器及盒子，里面可以放行内或者块级元素
●注意：文字类的块元素内不能使用块级元素，如<p><div></div></p>会出错
2. 行元素
常见：<a> <strong> <b> <em> <i> <span>
特点：（1）一行元素可以显示多个
（2）高，宽直接设置无效
(3)默认宽度就是它本身内容的宽度
（4）行内元素只能容纳文本或其他元素
●注意：链接里面不能放链接，特殊情况链接<a>可以放块级元素，但是给<a>转换一下块级模式最安全
3. 行内块元素
常见：<img/> <input/> <td>
特点：（1）和相邻的行内元素(行内块)在同一行上(针对块元素不在同一行上特点)，之间有空白间隙，一行显示多个
（2）宽度是本身内容宽度（行内元素特点）
（3）高度，宽度， 外边距内边距都可以控制（块元素特点）（针对行元素宽高不能调的特点）
显示模式的转换
概念：一个模式的元素切换到另一种模式
转换为块元素：使用：display:block;
转换为行内元素：使用：display：inline
转换为行内块元素：使用：display：inline-block
postion：absolute 找最近的定位
案例:简洁版小米侧边栏
总结：
-
在
<a>内设置文字水平居中对齐需要在css中设置line-height的值为<a>的一样高度，即单行文字垂直居中的解决方案：让文字的行高等于盒子的高度，即可让文字垂直居中 -
-
这个效果可以用text-indent：text-indent属性用来指定文本的第一行的缩进，通常是将段落的首行缩进
CSS的背景
1. 背景颜色
color或者transparent（透明的）
2. 背景图片
优点：①比起直接插入img标签，非常便于控制位置②当图片的大小超过电脑屏幕时，设置为背景图片可以完全显示
值：none或者url
3. 背景平铺
添加背景图片之后，如果图片小于容器的值，默认会平铺，我们需要取消平铺效果
``background-repeat:repeat|no-repeat|repeat-x|repeat-y``
4. 背景图片位置
background-position:x y; //参数代表的意思是x坐标和y坐标，可以使用方位名词或者精确单位
参数值：length：由浮点数和单位标识符组成的长度长度值
参数值：poition：top|bottom|left|center|right 方位词
注意：①如果指定的两个值都是方位名词，则两个顺序前后无关（如果是精确的数值，反过来不一样）
②如果只指定了一个方位名词，另一个省略，则第二个值默认居中对齐
背景图像固定
③如果是数值，第一个位置指定数值，第二个位置不指定数值，则第一个位置一定是x的坐标位置，第二个位置是默认居中对齐的
④混合单位第一个是x值，第二个是y值
5. 背景图像固定（附着）
background-attachment:scorll | fixed
默认是scroll：背景图像随对象内容滚动
fixed：背景图像锁定
6. 背景图像的复合写法
书写顺序： background：背景颜色: color | 背景图片地址: url | 平铺：repeat | 滚动 ：attachement | 位置：position
顺序可以颠倒，与字体的复合属性写法有区别
7.背景颜色的半透明
background:rgba(参数1,参数2,参数3,参数4)其中参数123是颜色的rgb，第四个参数是透明度，0时不透明，1时全透明
综合案例：五彩导航
练习：
- 元素的模式转换
- 单行文字的垂直居中
- 链接需要设置背景图片
- 需要用到背景相关属性设置
- 鼠标经过时元素会发生变化
- 练习伪类选择器
CSS的三大特性
1. 层叠性
概念: **相同选择器**设置**相同的样式**，此时一个样式就会覆盖另一个冲突的样式，层叠样式主要解决样式冲突的问题
原则：就近原则，离谁近就执行哪个样式
样式不冲突不会层叠
``
<style type="text/css">
div{
color:red;
font-size:18px
}
div{
color:green;
}
</style>
//颜色样式会冲突，字体样式不会冲突
``
2. 继承性
概念：子标签会继承父标签的某些样式，如文本颜色和字号
注意：●恰当使用继承可以简化代码
●子元素可以继承父元素的样式（text-，font-，line-这些开头的可继承，以及color属性）
行高的继承性：
1）行高可以跟单位也可以不跟单位
2) 如果子元素没有设置行高，则会继承父元素的行高
3）body{ font:12px/1.5 Microsoft YaHei; }//1.5的写法是当前子元素的文字大小*1.5倍，得到的数字就是行高的大小
3. 优先级
概念：权重高的样式会覆盖权重低的样式
优先级注意点： 1）权重4组数字组成，不会有进位 2）可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，依次类推
3）等级判断从左向右，如果某一位相同，判断下一位
4）可以简记为：通配符继承权重为0，标签选择器为1，类（伪类）选择器为10，id选择器为1000，!important无穷大
5）继承的权重为0，如果该元素没有直接选中，不管父元素权重多高，子元素的得到的权重都是0
<style>
/*父亲的权重是无穷大*/
#father{
color:red!important
}
p{
color:pink;
}
/*p继承的权重为0*/
/*所以p的最终颜色是粉色*/
</style>
<body>
<div id="father">
<p>我是div的儿子</p>
</div>
</body>
这也很好的解释了为什么在body里面修改文字的颜色时，a标签的颜色不受影响，因为浏览器默认给a标签设置了颜色，故a标签的权重为1，继承body里的样式权重为0；
权重的叠加
概念：对选择器的权重进行叠加，不进位，当某一位相同时，比较下一位
权重的两个练习题
扫一扫
301
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
