本文深入讲解CSS的显示模式，包括块级、行内和行内块元素的特点与转换，探讨行高处理技巧，解析CSS的层叠性、继承性和优先级三大特性，以及LVHA链接伪类的选择器权重。
HTML+CSS基础知识个人笔记_3
一、CSS显示模式
（一）块级元素: block-level
1.总是从新行开始
2.宽高可调
3.默认宽度为容器的100%
4.内可含其他块级元素或者行内元素
div {
/*块级元素，block-level
1.总是从新行开始
2.高宽，内外边距皆可调
3.内可放内联元素和其他块元素，但 p h dt 等文字类块级元素，不能放
其他块级元素
4.默认宽度，容器的100%*/
height: 200px;
width: 200px;
background-color: pink;
}
（二）行内元素: inline-level
1.和相邻元素在同一行
2.宽高不可调
3.默认宽度就是内容宽度
4.内只能含行内或者文本元素，（a不可含a，可含块级元素）
/*行内元素，inline-level
1.和相邻元素在同一行
2.宽高无效
3.默认宽度就是本身内容宽度
4.只能容纳文本或其他行内元素，a除外，a可以放块级元素，不能再放链接！！！*/
span {
height: 100px;
width: 100px;
background-color: purple;
}
（三）行内块元素: inline-block
1.和相邻元素在同一行
2.宽高可调
3.默认宽度是内容宽度
/*行内块元素，属于行内元素，inline-block
1.处于一行，但之间有空隙
2.默认宽度为本身内容宽度
3.宽高可调
如:<input /> <img /> <td> </td>*/
input {
width: 300px;
height: 20px;
background-color: deeppink;
}
（四）显示模式转换
div { /*块级元素*/
width: 100px;
height: 100px;
background-color: red;
}
span { /*行内元素转换为块级元素*/
width: 150px;
height: 150px;
background-color: green;
display: block;
}
a { /*行内元素转换为行内块*/
width: 80px;
height: 20px;
background-color: blue;
display: inline-block;
}
a:hover {
background-color: orange;
}
（五）显示模式注意点
-
p h dt 等文字型标签不可放其他块级元素
-
a不可含a
-
a可含其他块级元素
<!-- 1.错误，p h dt等文字型标签不可以放其他块元素 --> <p> <div></div> </p> <!-- 2.错误，a不可再包含a --> <a href="#"> <a href="#"></a> </a> <!-- 3.正确，a可包含其他块级元素 --> <a href=""> <img src="" alt=""> </a>
二、CSS行高的处理
行高分为上距离，下距离和内容高度三部分，上距离 == 下距离。
故可以推出，在过盒子重心的水平线与行的中线重合时，是为垂直居中。
一般的，盒子的水平分割线就是所要求的行的中线，
那么inline-height = height 如此设置就是垂直居中。
若有偏差，通过调试校准即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03_行高.html</title>
<style>
.nav {
width: 50px;
height: 50px;
background-color: orange;
color: #fff;
display: inline-block;
text-align-last: center;
/*行高 等于盒子高度，一般可以居中，针对于盒子水平中线与背景等显
示内容水平中线一致时
行高本质上的理解，分为上距离 + 下距离 + 内容高度 三块，而上距离
与下距离适中相等
defaul，上下 = 0，当盒子高度和行高相同时，刚好内容居于盒子中间
注意，是盒子中间，对非均匀几何形状及其他水平重心线未重合的情况，
可适当通过浏览器inspect调试出合适行高*/
line-height: 50px;
/*行高实例见04_尖叫导航栏*/
}
</style>
</head>
<body>
<a class="nav">123</a>
</body>
</html>
特殊例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04_尖叫导航栏</title>
<style>
.talk {
width: 200px;
height: 129px;
background-color: pink;
display: inline-block;
text-decoration: none;
text-align: center;
background-image: url(images/talk.png);
color: white;
line-height: 100px; /*行高调小合适*/
}
</style>
</head>
<body>
<div class="nav"><a href="#" class="talk">talk</a></div>
</body>
</html>
尖叫导航栏
三、CSS三大特性
（一）层叠性
当有多个选择器，对同一个标签，设置相同的属性时，会发生冲突。
在权重相同的时候，根据层叠性处理冲突。
故，在样式冲突，且权重相同不为零，发生层叠性处理
其他情况，不层叠
层叠性：后来的有效，就近原则
/*样式冲突，后来者为准，或者说就近原则
样式不冲突，则不层叠
CSS,cascading style sheets*/
div {
color: red;
font-size: 20px;
}
div {
color: blue;
}
（二）继承性
指的是，从 父级 继承而来的属性值
个人理解成，先向父级继承，如果父级没有对应属性值，就再向上继承
故，如此，不单单是子代可以继承，后代皆可以继承
1.一般font- text- line- color 等文字相关的，可以继承
2.a标签的文字颜色和下划线是不能被继承的 -->
3.h标签的文字大小是不能被继承的
4.只有当一个元素的某个属性没有被直接指定时,才会继承父级元素的值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06_继承性.html</title>
<style>
/*p {
color: red;
}*/
.father {
color: pink;
font-size: 50px;
text-decoration: none;
}
</style>
</head>
<body>
<div class="father">
<!-- 一般font- text- line- color 等文字相关的，可以继承 -->
<p>son</p>
</div>
<div class="father">
<!-- a 这里只继承了font-size，原因暂不明 -->
<!-- https://blog.youkuaiyun.com/haha_hello/article/details/54972876 -->
<!-- a标签的文字颜色和下划线是不能被继承的 -->
<!-- h标签的文字大小是不能被继承的 -->
<!-- 继承是向父级继承！父级没有指定，则再向上面找！ -->
<a href="#">son2</a>
</div>
</body>
</html>
（三）优先级
1.特殊性（权重）
一般的，优先级：
行内>id>类（伪类）>标签
内部与外部样式表，好像是根据层叠性，暂时不理
| name | 权值 |
|---|---|
| !important | 无穷大 |
| 行内 | 1，0，0，0 |
| id | 0，1，0，0 |
| 类（伪类） | 0，0，1，0 |
| 标签 | 0，0，0，1 |
| 通配符* | 0，0，0，0 |
| 继承 | 0，0，0，0 但是继承比通配符还要低！可理解成空 |
1.比较时，从左向右，相同就向右继续比，不然大者优先
2.是四个数，相互独立，没有进位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>07_优先级.html</title>
<style>
div { /*无穷大*/
color: orange!important;
}
#na { /*0, 1, 0, 0*/
color: pink;
}
.name { /*0, 0, 1, 0*/
color: blue;
}
div { /*0, 0, 0, 1*/
color: red;
}
/* 继承 无 为最小
* 通配符选择器 0，0，0，0
标签选择器 0，0，0，1
类 或者 伪类选择器 0，0，1，0
id选择器 0，1，0，0
!important 无穷大
行内样式 1，0，0，0*/
/*计算方法， 四位单独计算 没有进制，自左向右，相同再比 皆相同，层叠性
解决*/
</style>
</head>
<body>
<!-- 行内样式 1，0，0，0 -->
<div class="name" id="na" style="color: green">123</div>
</body>
</html>
2.权重的计算
计算方法，四位单独计算，没有进制，自左向右，相同再比。皆相同，层叠性解决。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>08_权重计算.html</title>
<style>
/*计算方法， 四位单独计算 没有进制，自左向右，相同再比 皆相同，层叠性解决*/
/*注意以下两个计算，特殊性值是一样的，但所表达的对象不完全同，注意空格，同理，id的#也是如此*/
/*所以，CSS对权重的处理，当有冲突时，按照权值以大为主，相同时，层叠处理，继承时权值为空，比0小*/
.nav li.sum { /*0010 + 0001 + 0010 = 0021*/
color: green;
}
.nav li .sum { /*0010 + 0001 + 0010 = 0021*/
color: pink;
}
div { /*0001*/
color: red;
}
.sum {
color: orange;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li class="sum">和</li>
<li>
<p class="sum">test</p>
</li>
</ul>
</div>
<p class="nav">name</p>
</body>
</html>
（四）三大特性小结
对于判断盒子的效果是生效于哪里，一般如此判断：
1.确认是否继承
只有当一个元素的某个属性没有被直接指定时,才会继承父级元素的值，如果继承，则权值为空，比通配符还要低。
1.1 发生继承（没有直接指定）
如果多个继承，则权值都是0000，先继承父级的。
1.2 没有继承（有直接指定）—> 2
例1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>10_从父级继承</title>
<style>
* {
color: orange;
}
span {
color: green;
}
div {
color: red;
}
</style>
</head>
<body>
<div>
<span>
<p>
test
</p>
</span>
</div>
</body>
</html>
例2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>09_继承的权重为空.html</title>
<style>
/* * { 0000 > 空
color: red;
}*/
/*任你权重再高，继承后就是0*/
/*https://www.aliyun.com/jiaocheng/639195.html*/
/*继承而来的属性值,权重永远低于明确指定到元素的定义。*/
/*只有当一个元素的某个属性没有被直接指定时,才会继承父级元素的值。*/
/*所以，对下面的同样是inherit, .nav 和 div 都是父级，而.nav 比 div 大，所以继承.nav 的值*/
.nav {
color: green;
}
div {
color: orange;
}
/*继承向父级找，父级没有，再向上找，所以此处，.sec是父级，而div和.nav在更高的地方，虽然都是继承，但继承了.sec的值*/
.sec {
color: pink;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li class="sec">
<p>name</p>
</li>
</ul>
</div>
</body>
</html>
2. 计算权重，进行比较
2.1 如果权重相同
2.1.1 权重相同不为0，—> 3
2.1.2 权重相同等于0
一般为通配符，因为已知没有继承。
2.2 如果权重不同
权重大的优先。
3.层叠性处理
（五）L V H A 的由来
链接伪类选择器：
a:link a:visited a:hover a:active
首先这四个都是伪类，0，0，1，0，一致，
则hover权重要大于link，
active权重要大于link和hover，
visited和其他三个无关，故位置可任意，只要满足 L H A
则，
V L H A
L V H A
L H V A
L H A V
这都是可以的。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
