119-html定位CSS权重

最新推荐文章于 2023-01-06 16:59:33 发布

原创最新推荐文章于 2023-01-06 16:59:33 发布 · 518 阅读

0 ·

CC 4.0 BY-SA版权

web 同时被 2 个专栏收录

50 篇文章

订阅专栏

html

13 篇文章

订阅专栏

本文深入探讨了CSS中盒子模型的定位方式，包括相对定位、绝对定位和固定定位，并通过实例展示了如何创建一个居中的弹窗。此外，还详细解释了CSS权重的概念，即当多个样式同时作用于一个元素时，决定哪个样式生效的优先级规则。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >




定位

文档流
文档流是指盒子按照html标签编写的顺序从上到下
每个盒子占据自己的位置

我们可以使用css的position
1.relative 相对定位
2.absolute 绝对定位
3.fixed    固定定位



来写个弹窗

<div class="pop">
	<h3>弹窗标题</h3>
	<p>弹窗内容</p>
</div>

.pop{
	width: 600px;
	height: 300px;
	background: lightblue;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-top: -150px;
	margin-left: -300px;
}



CSS权重
CSS权重指的是样式的优先级
有两个样式或者多个样式作用于一个元素的时候
权重越高的那个样式,对元素起作用

1.内联样式 写在标签上的样式
2.ID选择器
3.类,伪类
4.标签选择器