本文介绍了CSS中的属性继承机制，包括哪些属性具有继承性、如何判断以及强制继承。还讲解了层叠样式表的工作原理，涉及选择器权重和优先级，以及HTML元素的块级与行内级划分。此外，讨论了display属性和overflow属性的使用，以及CSS样式不生效的一些常见原因和解决建议。
一、CSS 的属性继承
◼ CSS的某些属性具有继承性(Inherited):
-
如果一个
属性具备继承性, 那么在该元素上设置后, 它的后代元素都可以继承这个属性; -
当然, 如果
后代元素自己有设置该属性, 那么优先使用后代元素自己的属性(不管继承过来的属性权重多高);
◼ 如何知道一个属性是否具有继承性呢?
-
常见的
font-size/font-family/font-weight/line-height/color/text-align都具有继承性; -
这些
不用刻意去记, 用的多自然就记住了;
◼ 另外要多学会查阅文档, 文档中每个属性都有标明其继承性的:
<style>
.box {
color: red;
/* font-size: 30px; */
/* 相对于自身字体(父元素的字体) */
/* 浏览器 16px */
font-size: 2em;/* 32px */
}
p {
font-size: 2em;
}
</style>
<div class="box">
box本身的内容
<p>我是p元素</p>
</div>
注意(了解): 继承过来的是计算值, 而不是设置值
1.强制继承(了解)
不是继承属性想要继承父元素的属性，可以使用inherit值
<style>
.box {
color: red;
border: 2px solid purple;
}
.box p {
/* 很少用 */
border: inherit;
}
</style>
<div class="box">
<p>我是p元素</p>
<h1>我是h1元素</h1>
</div>
2.常见的继承属性
二、CSS 的属性层叠
◼ CSS的翻译是层叠样式表, 什么是层叠呢?
-
对于一个元素来说,
相同的属性我们可以通过不同的选择器给它进行多次设置; -
那么属性会被一层层
覆盖上去; -
但是最终
只有一个会生效;
◼ 那么多个样式属性覆盖上去, 哪一个会生效呢?
-
判断一:
选择器的权重,权重大的生效, 根据权重可以判断出优先级; -
判断二:
先后顺序, 权重相同时, 后面设置的生效;
◼ 那么如何知道元素的权重呢?
1.选择器的权重
◼ 按照经验，为了方便比较CSS属性的优先级，可以给CSS属性所处的环境定义一个权值（权重）
-
!important：10000
-
内联样式：1000
-
id选择器：100
-
类选择器、属性选择器、伪类：10
-
元素选择器、伪元素：1
-
通配符：0
三、HTML元素的类型
◼ 在前面我们会经常提到div是块级元素会独占一行, span是行内级元素会在同一行显示.
- 到底什么是
块级元素, 什么是行内级元素呢?
◼ HTML定义元素类型的思路:
- HTML元素有很多, 比如h元素/p元素/div元素/span元素/img元素/a元素等等;
- 当我们把这个元素
放到页面上时, 这个元素到底占据页面中一行多大的空间呢?- 为什么我们这里只说一行呢? 因为垂直方向的高度通常是内容决定的;
- 比如一个h1元素的标题, 我们必然是希望它独占一行的, 其他的内容不应该和我的标题放在一起;
- 比如一个p元素的段落, 必然也应该独占一行, 其他的内容不应该和我的段落放在一起;
- 而类似于img/span/a元素, 通常是对内容的某一个细节的特殊描述, 没有必要独占一行;
◼ 所以, 为了区分哪些元素需要独占一行, 哪些元素不需要独占一行, HTML将元素区分(本质是通过CSS的)成了两类:
块级元素（block-level elements）: 独占父元素的一行行内级元素（inline-level elements）:多个行内级元素可以在父元素的同一行中显示- 行内非替换元素：不能设置宽高
- 行内可替换元素(行内块)：可以设置宽高
1.通过CSS修改元素类型
◼ 前面我们说过, 事实上元素没有本质的区别:
-
div是块级元素, span是行内级元素;
-
div之所以是块级元素仅仅是因为浏览器默认设置了display属性而已;
div {
display: block;
}
◼ 那么我们是否可以通过display来改变元素的特性呢?
◼ 当然可以!
四、display属性
◼ CSS中有个display属性，能修改元素的显示类型，有4个常用值
-
block：让元素显示为块级元素 -
inline：让元素显示为行内级元素 -
inline-block：让元素同时具备行内级、块级元素的特征 -
none：隐藏元素
<style>
.top {
display: none;
}
</style>
<body>
<div class="top">我是div top元素</div>
<div class="bottom">我是div bottom元素</div>
</body>
◼ 事实上display还有其他的值, 比如flex, 后续会专门学习
1.display值的特性
◼ block元素:
-
独占父元素的一行
-
可以随意设置宽高
-
高度默认由内容决定
◼ inline-block元素:
-
跟其他行内级元素在同一行显示
-
可以随意设置宽高
-
可以这样理解
- 对外来说，它是一个行内级元素
- 对内来说，它是一个块级元素
◼ inline:
-
跟其他行内级元素在同一行显示;
-
不可以随意设置宽高;
-
宽高都由内容决定;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 宽高不满意: 自己来设置 */
div {
background-color: #f00;
width: 200px;
height: 200px;
}
span {
background-color: #0f0;
width: 200px;
height: 200px;
}
img {
height: 200px;
height: 150px;
}
input {
height: 60px;
}
</style>
</head>
<body>
<div>我是div元素</div>
<!-- 行内级元素设置宽度和高度不生效??? 行内非替换元素不可以设置宽高 -->
<span>我是span元素</span>
<!-- 补充: -->
<!-- img元素: inline - replaced -> 行内替换元素 -->
<!-- 行内替换元素:
1> 和其他的行内级元素在同一行显示
2> 可以设置宽度和高度
-->
<img src="../images/gouwujie01.jpg" alt="">
<input type="text">
</body>
</html>
2.编写HTML时的注意事项
◼ 块级元素、inline-block元素
- 一般情况下，
可以包含其他任何元素（比如块级元素、行内级元素、inline-block元素） - 特殊情况，p元素不能包含其他块级元素
◼ 行内级元素（比如a、span、strong等）
- 一般情况下，只能包含行内级元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- h1/p/div -->
<!-- span/a/img/strong -->
<div>
<h1></h1>
<p></p>
<a href=""></a>
<img src="" alt="">
</div>
<!-- 特殊: 不要在p元素中放div元素 -->
<p>
123
<div>我是div元素</div>
abc
</p>
<!-- 行内级元素中不要放块级元素 -->
<span>
321
<div></div>
<p></p>
cba
</span>
</body>
</html>
五、元素的隐藏
◼ 方法一: display设置为none
- 元素不显示出来, 并且也不占据位置, 不占据任何空间(和不存在一样);
◼ 方法二: visibility设置为hidden
- 设置为hidden, 虽然元素不可见, 但是会占据元素应该占据的空间;
- 默认为visible, 元素是可见的;
◼ 方法三: rgba设置颜色, 将a的值设置为0
- rgba的a设置的是alpha值, 可以设置透明度, 不影响子元素;
◼ 方法四: opacity设置透明度, 设置为0
- 设置整个元素的透明度, 会影响所有的子元素;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
display: none;
}
.content {
visibility: hidden;
}
/* alpha: 只是设置当前color/bgc其中的颜色透明度为某一个值, 不会影响子元素 */
.box1 {
/* 不是很推荐 */
/* color module */
/* color: #ff000088; */
/* webpack -> postcss -> browserslist -> rgba() */
/* 推荐下面的写法 a -> alpha 0~1 */
/* color: rgba(255, 0, 0, 0.5); */
/* 通过颜色来隐藏 */
/* color: rgba(0, 0, 0, 0) */
/* 通过背景颜色透明度来隐藏 */
/* background-color: rgba(0, 0, 0, 0); */
background-color: transparent; /* rgba(0,0,0,0) */
}
/* opacity: 设置透明度, 并且会携带所有的子元素都有一定的透明度 */
.box2 {
opacity: 0.5;
}
</style>
</head>
<body>
<div class="box">我是div元素</div>
<div>哈哈哈哈</div>
<div class="content">我是content</div>
<div>呵呵呵呵</div>
<div class="box1">
我是box1
<img src="../images/gouwujie01.jpg" alt="">
</div>
<div class="box2">
我是box2
<img src="../images/gouwujie01.jpg" alt="">
</div>
</body>
</html>
六、overflow属性
1.CSS属性-overflow
◼ overflow用于控制内容溢出时的行为
-
visible：溢出的内容照样可见 -
hidden：溢出的内容直接裁剪 -
scroll：溢出的内容被裁剪，但可以通过滚动机制查看- 会一直显示滚动条区域，滚动条区域占用的空间属于width、height
-
auto：自动根据内容是否溢出来决定是否提供滚动机制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 300px;
height: 100px;
background-color: #f00;
/* overflow: visible */
overflow: auto;
}
</style>
</head>
<body>
<div class="box">
从充满历史气息的传统对称式花园，到各地功能与美感俱佳的小小菜园，再到与大艺术家们设计园林的邂逅，还是蒙顿·唐，说着一口流利的法语，寻访法国的每个角落，让人领略到原汁原味的法国风情，体会法国人融入骨子里的浪漫与优雅。
</div>
</body>
</html>
CSS样式不生效技巧
◼ 为何有时候编写的CSS属性不好使，有可能是因为
- 选择器的优先级太低
- 选择器没选中对应的元素
- CSS属性的使用形式不对
- 元素不支持此CSS属性，比如span默认是不支持width和height的
- 浏览器不支持此CSS属性，比如旧版本的浏览器不支持一些css module3的某些属性
- 被同类型的CSS属性覆盖，比如font覆盖font-size
◼ 建议
- 充分利用浏览器的开发者工具进行调试（增加、修改样式）、查错
扫一扫
303
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
