CSS盒子模型&BFC的简单用法_怎么把一个div盒子设置成bfc-CSDN博客

本文链接：https://blog.csdn.net/chonyhaha/article/details/120940267

css 盒子模型

盒子模型包含哪些？

主要是content(内容区域)、padding、margin
总的分为两种类型：IE盒子模型、css标准盒子模型
IE盒子模型中，width和height指的是内容区域+border+padding的宽度和高度
css标准盒子模型中，width和height指的就是内容区域的宽度与高度，增加内边距、边框、外边距并不会影响内容区域的尺寸，总尺寸会发生改变

如何设置两种盒子模型

box-sizing: content-box; /* 标准盒子模型*/
box-sizing:border-box; /* ie盒子模型 */

js获取元素的宽高

1、element.style.width/height
2、 ie独有的方式
element.currentStyle.width/height
3、通用型
window.getComputedStyle(element).width/height
4、api的那种形式
element.getBoundingClientRect().width/height;

margin塌陷、margin重叠

标准文档流中，数值方向的margin不叠加，只取较大的值作为margin(水平方向是可以叠加的，因此没有塌陷现象)
主要是兄弟元素之间，比如两个div。margin-bottom:50px(div1),下面的兄弟div则是margin-top：10px。结果并不是上下距离60px，而是取margin的最大值，也就是50px

<style type=text/css>
        .block1{
            width: 100px;
            height: 100px;
            background-color: royalblue;
            margin-bottom: 70px;
            overflow: auto;
        }
        .block2 .block2_child{
            width: 150px;
            height: 150px;
            background-color: saddlebrown;
            margin-top:90px;
            overflow: auto;
        }
        .block2{
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="block1"></div>
    <div class="block2">
        <div class="block2_child"></div>
    </div>
</body>

解决方法，就是在将原本的div2定义为一个父盒子，之后在里面定义新的div块，margin-top则会面向父盒子div2。我们需要设定border,不然的化，父元素的高度会掉下来。

BFC(块级格式化上下文，可以把它理解成一个独立的区域)

在我的理解中，它更像是一种渲染规则。
(1) BFC里面的元素，在垂直方向上，边距会发生重叠
例子1呢，在上面代码中，将border修饰语句去掉就会出现重叠现象
(2)BFC在页面里是独立的容器，外面的元素不会影响里面的元素，反之亦然
在这里插入图片描述
// 在刚开始的时候，它会有一个右侧div侵占左侧div下方空间的问题
// 我们对右侧div进行bfc处理以后

我们可以清楚地看到，左侧出现了父盒子的背景色
(3)BFC的区域不与旁边的float box区域重叠（可以用来清除浮动带来的影响）
// 可以参考（2）的图去理解
(4)计算BFC的高度时，浮动的元素也参与计算
在这里插入图片描述

对比（4）中上下两幅图像去理解这个问题。BFC的高度
你会发现，父元素高度，基本上接近与浮动元素的高度

如何生成BFC

1、overflow: 不是visible，可以让属性是 hidden、auto
2、浮动中：float的属性值不为none,也就是说，只要设置了浮动，当前元素就创建了BFC
3、position: 只要不是static、relative即可
4、display: inline-block、table-cell、table-caption、flex、inline-flex

这里是引用
原文地址：https://www.cnblogs.com/qianguyihao/p/8512617.html

补充：css的基本单位问题，有些头疼，必须花点时间
%：百分比，这个需要具体来看用法，它是相对于谁的
大体来说，是有三种的：1、相对于父盒子 2、相对于盒子本身 3、相对于定位元素
(此处指的是position相关属性，你需要明白，它所指向的参照物是哪一个)

.wrap {
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

举个例子，left与right是相对于父盒子的，那是它的参照物;
后面的translate是相对于它自身的参数（长宽）设定
in:英寸
cm:厘米
mm:毫米
em: 1em相当于当前字体的尺寸
子元素字体大小是相对于父元素字体大小；
元素的width、height、padding、margin用em的话是相对于该元素的font-size。em每次的参照物会因为父盒子的改变而变化，因此，一般使用rem的比较多一些，原因是rem的参照物只有一个，那就是html元素。计算起来更加清晰
ex: 1ex是字体的x-height,通常是字体尺寸的一半
pt:磅 1pt = 1/72 in
px: 像素
pc: 12点活字（1pc=12点） // 这个挺少见的，都没听过。。。
rem：是指相对于根元素的字体大小的单位，它是相对于html的。
html{
font-size:100px; // 此时，1rem=100px;
}
也就是说，现在的字体大小是100px
如果想要调整到 font-size:10px
-webkit-text-size-adjust:none; 在新版本的chrome中，它已经被禁用了,因此font-size小于12px它就只会显示12px
最好的方式还是采用 transform:scale() 来进行调试,缩放就可以啦
比如
p{
font-size:0.12rem
transform:scale(0.83);
}
rem 自适应布局
document.documentElement.style.fontSize = document.documentElement.clientWidth / 640*100 + ‘px’;
// 640指的是设计样式的大小。也就是说，我们将内容的大小按照设计图的整体比例进行了缩放，即使页面屏幕大小发生变化，rem的相对大小会自动适应调整