1. CSS 继承性
- 就像父亲的财产会遗传给儿子一样,在
CSS
中祖先元素的样式同样也会被子元素继承。 - 继承是指应用在一个标签上的那些
CSS
样式会同时被应用到其内嵌标签上。 - 比如为父元素设置了字体颜色,子元素也会应用上相同的颜色。
- 当然并不是所有的样式都会被继承,这一点我们讲到具体样式时,再去讨论。
- css 中可以和不可以继承的属性总结
2. CSS 权重问题
如果一个元素同时满足了多个选择器,哪个样式生效?
样式冲突时,必然只有一个样式生效
在页面中使用CSS
选择器选中元素时,经常出现一个元素同时被多个选择器选中。
比如:
body h1{}
h1{}
上边的两个选择器都会选择h1
元素,如果两个选择器设置的不是同一个样式那还好, 不会产生冲突,但是如果两个选择器设置的是同一个样式,这样h1
到底要应用那个样式呢?
CSS
中会默认使用权重较大的选择器设置的样式,权重又是如何计算的呢?
- 行内样式 >
id
选择器 >class
选择器 >标签选择器 - 复杂选择器权重计算
- 行内样式 1000
- id 选择器 100
- class 选择器 10
- 标签选择器 1
- 通配符/继承属性 0
- 如果两个选择器是一样的,后写的生效。
- 如果写了相同的选择器,希望某个选择器权重更高,添加
class
类名,使用交集选择器即可。
.header .nav .nav-item {
color: red;
}
.header .nav .nav-item.active {
color: blue;
}
标签的表现形式
1. 块状标签
比如:div
p
h1~h6
form
table
hr
br
ul>li
ol>li
dl>dt/dd
- 设置宽高有效
- 独占一行,换行展示。
- 不写宽度时。宽度是父元素(剩余)宽度的100%。
2. 行内块标签
比如: input
select
img
button
- 设置宽高有效。
- 同行展示。
- 不写宽度时。宽度由内容撑开。
3. 行内标签
比如:a
span
strong
del
ins
em
i
b
- 设置宽高无效。
- 同行展示。
- 不写宽度时。宽度由内容撑开。
4. display
display:
修改元素的性质。
block
:设置元素为块元素inline
:设置元素为行内元素inline-block
:设置元素为行内块元素- 转换的必要性:比如可以把
a
标签转换为块状元素,设置宽高,使用户可点击的区域增大,进而实现一个按钮的样式。
.box{
width: 100px;
height: 100px;
background-color: pink;
display: inline; /* 转换为行内元素 */
display: inline-block; /* 转换为行内块元素 */
display: block; /* 转换为块元素 */
}
vertical-align
设置图片或者行内块元素与文字或者行内元素的对齐方式。
默认:基线对齐。
img{
width:300px;
vertical-align: middle;
}
<img src="1.jpg" alt="">
<a href="#">点击查看大图</a>