CSS盒模型深入

CSS盒模型

标准模型IE模型

标准模型width表示content的宽度,IE模型width表示border+padding+content的宽度。

设置这两种模型可使用:

box-sizing: content-box;   /*浏览器默认*/
box-sizing: border-box;

获取宽高

dom.style.width/height

只有通过内联样式设置的宽高才能获取到,用<link>标签引入的css获取不到。

dom.currentStyle.width/height  //IE
window.computedStyle(dom).width/height  //标准

无论样式是什么类型,都可以获取到宽高,且是渲染后的实际宽高。

dom.getBoundingClientRect().width/height

获取元素的宽高,和相对于视口的lfet top

边距重叠

子元素的外边距会反应在父元素上,相邻元素外边距会取较大值,空元素上下外边距会取较大值。

BFC

BFC指块级格式化上下文,是一个有特别规则的区域,规定内部元素如何布局,与外部元素无关。

1.BFC有一下几个规则:

  • 内部上下相邻元素外边距会重叠。
  • BFC块不会与浮动元素重叠。
  • 内部浮动元素也参与BFC高度的计算。

2.BFC的触发:

  • float属性不为none;
  • position: absolute/fixed;
  • overflow: auto/hidden;
  • display: inline-block、table-cells、table-captions、或inline-flex

BFC应用

1.解决边距重叠问题

<style>
    div { overflow: auto; }
    p { margin: 5px auto 10px; }
</style>
<div>
    <p></p>
</div>
使div触发BFC,内部元素外边距不会反映到父级元素上。
<style>
    .wrap { overflow: auto; }
    p { margin: 5px auto 10px; }
    .bfc { overflow: auto; }
</style>
<div class='wrap'>
    <p></p>
    <div class='bfc'>
        <p></p>
    </div>
</div>
两个<p>标签都有上下外边距,给<p>标签加父级,且触发BFC,外边距不会在重叠。

2.清除浮动

<style>
    div { overflow: auto; }
    p { float: left; }
</style>
<div>
    <p></p>
</div>
使div触发BFC,内部浮动元素元素也参与高度计算。

相关推荐