盒子模型和BFC
2022-08-30 本文已影响0人
欢西西西
盒子模型
- 标准盒模型
box-sizing: content-box，width是content的宽度。width固定后再设置padding、border、margin则盒子会越来越大 - 怪异盒模型
box-sizing: border-box，width是content+padding+border。如果width固定(无margin的情况下)，则无论怎么设置padding和border，盒子的大小都是固定的。
image.png
BFC（block formatting context，块级格式化上下文）
具有BFC特性元素的子元素不会受到外界元素的影响，也不会影响外部元素
那什么时候会触发BFC呢？常见的情况如下：
• <html>根元素
• float的值不为none (浮动元素本身BFC化，然而浮动元素有破坏性和包裹性，失去了元素本身的流体自适应性)
• overflow的值为auto、scroll或hidden（本身还是个普通元素，保留了块状元素的流体特性）
• display的值为table-cell、table-caption和inline-block中的任何一个
• position的值不为relative和static（absolute和fixed都会脱离文档流，所以跟其他元素互不影响）
