首页 前端知识 007 CSS的继承和层叠 元素特性

007 CSS的继承和层叠 元素特性

2024-06-10 23:06:59 前端知识 前端哥 326 62 我要收藏

文章目录

  • 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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/11856.html
标签
评论
发布的文章

FastJson 2『使用心得』

2024-06-18 23:06:34

fastjson(版本<=1.2.24)复现

2024-06-18 23:06:21

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!