关于CSS的问题

最新推荐文章于 2022-10-05 21:35:57 发布

懵逼菜鸟 13号

最新推荐文章于 2022-10-05 21:35:57 发布

阅读量154

点赞数

文章标签： css

该博客聚焦于CSS相关知识，主要介绍了盒子模型的宽度，阐述了margin纵向重叠和负值问题，还对BFC（块级格式化上下文）的理解与应用进行了探讨，有助于深入掌握CSS布局特性。

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

一、关于盒子模型的宽度

在这里插入图片描述

<style>
#div{
	width:100px;
	height:100px;
	border: 1px solid block;
	padding: 10px;
	margin: 10px;
}
</style>
<div id="div"></div>

请计算div的 offsetWidth 是多大？
border * 2 + padding * 2 + width = 122px;
如果加上 box-sizing: border-box; 是以border为宽度的计算 offsetWidth 是 100px
而 width 会变为 78px 
如果加上 box-sizing: content-box; 是以width为宽度的计算 offsetWidth 是 122px
而 width 还是 100px 这是默认情况下的。

二、margin纵向重叠

<style>
p {
	font-size: 16px;
	line-height: 1;
	margin-top: 10px;
	margin-bottom: 15px;
}
</style>
<p>AAA</p>
<p></p>
<p></p>
<p>BBB</p>
计算AAA 到 BBB 之间的距离是多少    15px

相邻元素的 margin-top margin-bottom 会重叠 
空白内容的标签 <p></p> 也会重叠 (直接忽略)

三、margin负值问题

margin-top: 10px;  自身元素向上移动 10px;

margin-left: 10px;  自身元素向右移动 10px;

margin-right: 10px;  自身元素不受影响，下方元素向左移动 10px;

margin-bottom: 10px;  自身元素不受影响，下方元素向上移动 10px;

四、BFC的理解与应用

Block format context  块级格式化上下文

一块独立渲染区域，内部元素的渲染不会影响边界以外的元素

形成BFC的常见条件
	1.float 不是 none 
	2.position 是 absolute 或 fixed 
	3.overflow 不是 visible
	4.display 是 flex inline-block