文章目录
- 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