文章目录
- CSS属性的继承
- CSS属性的层叠
- 选择器的权重
- HTML元素的类型
- 编写HTML注意事项
- 元素隐藏方法
- CSS属性-overflow
- CSS样式不生效可能原因
CSS属性的继承
如果一个属性具备继承性，那么在该元素上设置后，它的后代元素都可以继承这个属性
如果后代元素自己有设置该属性，优先使用后代元素自己的属性
继承过来的是计算值，不是设置值
<html>
<head>
<style>
.box {
/* 相对于自身字体(父元素的字体)*/
/*浏览器默认设置为16px*/
font-size:2em; /*32px*/
}
p {
/*32px*/
}
</style>
</head>
<body>
<div class="box">
<p>
p元素
</p>
</div>
</body>
</html>
inherit属性值可用来强制继承
CSS属性的层叠
对于一个元素来说，相同一个属性可以通过不同的选择器给它进行多次设置
属性会被一层层覆盖上去
最终只有一个会生效
判断哪个会生效
判断一:选择器的权重，权重大的生效，根据权重可以判断出优先级
判断二:先后顺序，权重相同时，后面设置的生效
选择器的权重
为了方便比较CSS属性的优先级，可以给CSS属性所处的环境定义一个权值
!important:10000
内联样式:1000
id选择器:100
类选择器、属性选择器、伪类:10
元素选择器、伪元素:1
通配符:0
HTML元素的类型
块级元素(block-level elements)：独占父元素的一行
行内级元素(inline-level elements)：多个行内级元素可以在父元素的同一行中显示
元素没有本质区别，比如div是块级元素是因为浏览器默认设置了display属性
div {
display: block;
}
CSS的display属性，能修改元素的显示类型，有4个常用值
block:让元素显示为块级元素，独占一行，可以设置宽度和高度
inline:让元素显示为行内级元素，和其他行内级元素在同一行显示，不可以设置宽度和高度，宽高是由内容决定（包裹内容）。注:行内替换元素可以设置宽高
inline-block:让元素同时具备行内级、块级元素的特征，可以和其他元素在同一行显示，也可以设置宽高
none:隐藏元素
编写HTML注意事项
块级元素、inline-block元素一般情况下，可以包含其他任何元素
特殊情况，p元素不能包含其他块级元素
行内级元素
一般情况下，只能包含行内级元素
元素隐藏方法
方法一:display设置为none
元素不显示出来，并且也不占据位置，不占据任何空间(和不存在一样)
方法二:visibility设置为hidden
设置为hidden，虽然元素不可见，但是会占据元素应该占据的空间
默认为visible，元素是可见的
方法三:rgba设置颜色，将a的值设置为0
rgba的a设置的是alpha值，可以设置透明度，不影响子元素
color : rgba(0,0,0,0);
background-color:transparent;/*rgba(0,0,0,0)*/
方法四:opacity设置透明度，设置为0
设置整个元素的透明度，会影响所有的子元素
(alpha:只是设置当前color/bgc其中的颜色透明度为某一个值，不会影响子元素
opacity:设置透明度，并且会携带所有的子元素都有一定的透明度
)
CSS属性-overflow
overflow用于控制内容溢出时的行为
visible:溢出的内容照样可见
hidden:溢出的内容直接裁剪
scroll:溢出的内容被裁剪，但可以通过滚动机制查看
会一直显示滚动条区域，滚动条区域占用的空间属于width、height
auto:自动根据内容是否溢出来决定是否提供滚动机制
CSS样式不生效可能原因
选择器的优先级太低
选择器没选中对应的元素
CSS属性的使用形式不对
元素不支持此CSS属性，比如span默认不支持width和height
浏览器不支持此CSS属性，比如旧版本的浏览器不支持一些css module3的某些属性
被同类型的CSS属性覆盖，比如font覆盖font-size
