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

文章目录

CSS属性的继承

如果一个属性具备继承性,那么在该元素上设置后,它的后代元素都可以继承这个属性

如果后代元素自己有设置该属性,优先使用后代元素自己的属性

继承过来的是计算值,不是设置值

html 复制代码
<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属性

css 复制代码
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值,可以设置透明度,不影响子元素

css 复制代码
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

相关推荐
一斤代码5 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子5 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年5 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子5 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina6 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路6 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说7 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409197 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding7 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜7 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui