盒模式与BFC深入学习——CSS篇

最新推荐文章于 2022-10-01 19:47:59 发布

Cutepingping

最新推荐文章于 2022-10-01 19:47:59 发布

阅读量183

点赞数

分类专栏：前端知识前端h5+css 文章标签： CSS

本文链接：https://blog.csdn.net/PINGER0077/article/details/82983648

版权

前端知识同时被 2 个专栏收录

34 篇文章 0 订阅

订阅专栏

前端h5+css

17 篇文章 0 订阅

订阅专栏

盒模式有两种：标准模型与IE模型

两种模型对比：标准模型的宽高只是内容得宽高，而IE模型的宽高是内容+填充+边框的宽高。

CSS设置模型：

<!--标准模型-->
box-sizing:content-box;
<!--IE模型-->
box-sizing:border-box;

如何获取宽高

通过JS获取盒模式对应的宽和高，有以下几种方法：

1、dom.style.width/height

这种方式只能取到dom元素内联样式所设置的宽高，也就是说如果该节点的样式是style标签中或外联的CSS文件中设置的话，通过这种方法是获取不到dom的宽高的。

2、dom.currentStyle.width/height

这种方式获取的是页面渲染完成后的结果，就是说不管是哪种方式设置的样式，都能获取到。
但这种方式只有IE浏览器支持。

3、window.getComputedStyle(dom).width/height

这种方式的原理和2是一样的，这个可以兼容更多的浏览器，通用性好一些。

4、dom.getBoundingClientRect().width/height

这种方式是根据元素在视窗中的绝对位置来获取宽高的

5、dom.offsetWidth/offsetHeight

这个就没什么好说的了，最常用的，也是兼容最好的。

边距重叠解决方案（BFC）

首先什么是边距重叠：边距重叠式是指，当子元素设置了margin-top值的时候，可以看出父元素也一起有了边距。

BFC：Block Formatting Context直译为“块级格式化上下文”

BFC的原理

1、内部的box会在垂直方向，一个接一个的放置
2、每个元素的margin box的左边，与包含块border box 的左边相接触（对于从左往右的格式化，否则相反）
3、box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box
4、bfc的区域不会与浮动区域的box重叠
5、bfc是一个页面上的独立的容器，外面的元素不会影响bfc里的元素，反过来里面的也不会影响外面的。
6、计算bfc高度的时候，浮动元素也会参与计算

怎么去创建bfc

1.float属性不为none(脱离文档流)
2.position为absolute或fixed
3.display为inline-block，table-cell, table-caption, inline-flex
4.overflow不为visible
5.根元素

应用场景

1.利用BFC阻止文本换行
2.清除内部浮动，容纳浮动元素
3.放置垂直margin重叠

重叠案例

看下例1.2中（利用BFC容纳浮动元素）：

有时候，确切的说大部分，文本会环绕浮动元素（如图Figure1），但是却不是我们想要的，我们想要Figure2

其实，在Figure1中，整个p元素实际上是处于上图中的黑色区域，p元素没有移动是因为它在浮动元素的下方，但实际上p作为块级元素（相对于行内文本）却发生了移动，因为要给float“腾”位置，而随着文本的增加，文本高度超过浮动元素的部分则不会在水平方向上收缩内部距离，因此看起来像是环绕。

要想实现图二，我们只需要为p建立BFC即可。

看下例1.2中（利用BFC容纳浮动元素）：

我们经常遇到一个容器中有浮动元素，但是这个容器的高度确是0；

HTML:

<div class="container">
    <div>sibling</div>
    <div>sibling</div>
</div>

CSS:

.container{
    background-color: green;
}

.container div{
    background-color: lightgreen;
    float:left;
    margin: 10px;
    padding: 0 50px;
}

浏览器显示：

针对上面的情形，container是不会有高度的，因为它包含了浮动元素。利用一个伪元素可以实现clear fix；但是利用BFC，可以更好地解决这个问题。因为它能够容纳浮动元素。我们让container形成BFC规则，如下所示：

.container{
    overflow: hidden;    /*create block formatting context*/
    background-color: green;
}

.container div{
    float: left;
    background-color: lightgreen;
    margin: 10px;
    padding: 10px 50px;
}

浏览器显示如下：

看下例1.3中（放置垂直margin重叠）：

<!DOCTYPE html>
<html>
<head>
	<title>BFC</title>
</head>
<style type="text/css">
	*{
		margin: 0;
		padding: 0
	}
	.top{
		margin-bottom: 30px;
		background-color: #0ff;
		height: 300px;
	}
	.bottom{
		height: 100px;
		margin-top: 50px;
		background-color: #ddd;
	}
</style>
<body>
<section class="top">
	<h1>上</h1>
	margin-bottom:30px
</section>
<!-- 给下面这个块添加一个父元素，在父元素上创建bfc-->
<div style="overflow: hidden;">
	<section class="bottom">
		<h1>下</h1>
		margin-top:50px
	</section>
</div>

</body>
</html>

浏览器显示效果

看上例中，如果把html的body部分改为下面：

<body>
<section class="top">
	<h1>上</h1>
	margin-bottom:30px
</section>
<section class="bottom">
	<h1>下</h1>
	margin-top:50px
</section>

</body>

浏览器显示效果为：

总结：只有当元素在同一个BFC中，垂直方向上的margin才会坍塌（只取一个大的margin值）；如果他们不属于同一个BFC，则不会有margin 坍塌。

Cutepingping

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
盒模式与BFC深入学习——CSS篇

盒模式有两种：标准模型与IE模型两种模型对比：标准模型的宽高只是内容得宽高，而IE模型的宽高是内容+填充+边框的宽高。CSS设置模型：&lt;!--标准模型--&gt;box-sizing:content-box;&lt;!--IE模型--&gt;box-sizing:border-box;如何获取宽高通过JS获取盒模式对应的宽和高，...
复制链接

扫一扫