标签：概念 博客 它的 tps 允许 浮动 单元 扩展 基本概念
㈠基本概念是什么？
⑴页面就是由一个个盒模型堆砌起来的，每个HTML元素都可以叫做盒模型，盒模型由外而内包括：边距（margin）、边框（border）、填充（padding）、内容（content）。它在页面中所占的实际宽度是margin + border + paddint + content 的宽度相加。
⑵盒模型有两种：标准盒模型和怪异盒模型（IE盒模型）
有关盒模型的相关知识可以看我的这篇博客：https://www.cnblogs.com/shihaiying/p/11246482.html
㈡ 标准模型和IE模型区别是什么？
宽和高的计算方式不同。标准模型的宽度指的就是content的宽度，不包含padding和border。
怪异准盒模型：width = content + padding + border；
标准盒模型：width = content；
有关两者的区别可以看我的这篇博客：https://www.cnblogs.com/shihaiying/p/11329595.html
㈢CSS如何设置这两种模型？
⑴标准盒模型下设置：box-sizing: content-box;
⑵浏览器默认设置：box-sizing: border-box; 是IE下的设置。
有关box-sizing的相关知识可以看我这篇博客：https://www.cnblogs.com/shihaiying/p/11589477.html
㈣对于padding、margin的取值相关理解？
⑴不赋值：默认情况下为0，也就是不会有内外边距
⑵不允许取负值
⑶赋值（以padding为例）
①一个值时：Padding：10px； 四个内边距都为10px
②两个值时：Padding：10px 20px; 上下内边距为10px，左右内边距为20px
③三个值时：Padding：10px 20px 30px；上10px,左右20px，下30px
④四个值时：Padding：10px 20px 30px 40px;上右下左分别为10 20 30 40
有关取值的具体内容可以看我的这篇博客：https://www.cnblogs.com/shihaiying/p/11246482.html
扩展：有关定位的知识可以看我的这篇博客：https://www.cnblogs.com/shihaiying/p/11253597.html
㈤js如何设置获取盒模型对应的宽和高？
⑴dom.style.width/height(只适用获取内联元素的宽和高)
⑵dom.currentStyle.width/height(获取渲染后的宽高，但是仅IE支持)
⑶window.getComputedStyle(dom).width/height(与2原理相似，但是兼容性，通用性会更好一些)
⑷dom.getBoundingClientRect().widht/height(计算元素绝对位置，获取到四个元素left,top,width,height)
有关这个问题的详细代码示例可以看我的这篇博客：https://www.cnblogs.com/shihaiying/p/11600229.html
㈥边距重叠在什么时候或者什么情况下会发生呢？
⑴父与子之间：子级的上下margin会与父级上下margin重叠，以最大值为标准去渲染
⑵空元素：如果设置了margin-top和margin-bottom，它会在这两之间取一个最大值作为它的最终边距值
⑶兄弟元素之间：每个兄弟之间都有上边距或者每个兄弟之间都有下边距，原则就是取最大的值
从第六个问题开始到结束相关的知识可以看我这篇博客：https://www.cnblogs.com/shihaiying/p/11616055.html
㈦什么是BFC？BFC的基本概念是什么？
BFC的基本概念–BFC就是“块级格式化上下文”的意思，也有译作“块级格式化范围”。它是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。通俗的讲，就是一个特殊的块，内部有自己的布局方式，不受外边元素的影响。
㈧BFC的原理是什么？
⑴BFC内部的盒子，会在垂直方向，一个接一个地放置。垂直方向上也会发生边距重叠。
⑵BFC就是页面上的一个独立容器，容器里面的子元素不会影响到外面的元素，外边的也不会影响里边的。
⑶BFC的区域不会与float box重叠。
⑷计算BFC的高度时，浮动元素也被计算在内。
㈨如何创建BFC？如何触发BFC？那些情况会产生新的BFC？
⑴根元素或其它包含它的元素
⑵浮动 (元素的 float 不为 none)
⑶绝对定位元素 (元素的 position 为 absolute 或 fixed)
⑷行内块 inline-blocks (元素的 display: inline-block)
⑸表格单元格 (元素的 display: table-cell，HTML表格单元格默认属性)
⑹表格标题 (元素的 display: table-caption, HTML表格标题默认属性)
⑺overflow 的值不为 visible的元素
⑻弹性盒 flex boxes (元素的 display: flex 或 inline-flex)
希望看完这篇博客和文中链接的详细内容理解的博客，希望能帮助更深刻的了解盒模型！
标签：概念 博客 它的 tps 允许 浮动 单元 扩展 基本概念
原文地址：https://www.cnblogs.com/shihaiying/p/11620932.html
