CSS盒子模型&BFC的简单用法_chonyhaha

网络 02-07 2990

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

解决方法，就是在将原本的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://·/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的相对大小会自动适应调整

题外话，今天的知识点乱糟糟的，临时想起来要看rem与em。因此，我觉得，需要面对字符大小的部分整理一下。学习之路漫长，你我共勉。明天再不写纸质材料，心里就真撑不住了