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

相关推荐
李鸿耀1 小时前
主题换肤指南:设计到开发的完整实践
前端
带娃的IT创业者6 小时前
TypeScript + React + Ant Design 前端架构入门:搭建一个 Flask 个人博客前端
前端·react.js·typescript
非凡ghost7 小时前
MPC-BE视频播放器(强大视频播放器) 中文绿色版
前端·windows·音视频·软件需求
Stanford_11067 小时前
React前端框架有哪些?
前端·微信小程序·前端框架·微信公众平台·twitter·微信开放平台
洛可可白8 小时前
把 Vue2 项目“黑盒”嵌进 Vue3:qiankun 微前端实战笔记
前端·vue.js·笔记
学习同学8 小时前
从0到1制作一个go语言游戏服务器(二)web服务搭建
服务器·前端·golang
-D调定义之崽崽8 小时前
【初学】调试 MCP Server
前端·mcp
四月_h9 小时前
vue2动态实现多Y轴echarts图表,及节点点击事件
前端·javascript·vue.js·echarts
文心快码BaiduComate9 小时前
用Zulu轻松搭建国庆旅行4行诗网站
前端·javascript·后端
行者..................10 小时前
手动编译 OpenCV 4.1.0 源码,生成 ARM64 动态库 (.so),然后在 Petalinux 中打包使用。
前端·webpack·node.js