CCS 盒模型分析

墨夜_
965 阅读3分钟

基本概念

页面中的每个元素都可以看成一个盒子，盒子里面可以装其他盒子，层层嵌套。html 标签就是最外面的大盒子。每个盒子由内向外分别是 content, padding, border, margin 。

盒子模型

分类

盒模型有两种，标准盒模型 和 IE盒模型 。主要区别是它们的 width 和 height 不同

  • 标准盒模型
    标准盒模型

盒子宽高是 content(内容) 的宽高

  • IE盒模型
    IE盒模型

盒子宽高是 border + padding + content 的宽高

浏览器默认使用标准盒模型，在 ie8+ 中 可以通过设置 box-sizing 样式属性改变盒模型
box-sizing:

  • content-box ---> 标准盒模型（默认）
  • border-box ---> IE 盒模型

通过js获取盒子宽高

以下 domElement 是表示 HTML 元素的伪代码

  1. domElement.style.width/height

只能获取内联样式中的宽高

  1. domElement.currentStyle.width/height

获取的是浏览中渲染完成后元素的宽高，只有 IE 浏览器支持

  1. window.getComputedStyle(domElement).width/height

和方式2一样，但可以兼容更多浏览器

  1. domElement.offsetWidth/offsetHeight

不管使用的什么盒模型，获取的都是 IE盒模型 的宽高

外边距折叠问题

相邻元素在竖直方向上的外边距在相遇时会发生合并，合并后的外边距的高度等于两个外边距中较大的那个值。

兄弟元素间

外边距重合

父子元素间

外边距重合

外边距折叠解决方案（BFC）

Block Formatting Context （块级格式化上下文）

BFC 可以简单地理解为某个元素的一个 CSS 属性，只不过这个属性不能被开发者显式的修改，拥有这个属性的元素对内部元素和外部元素会表现出一些特性，这就是BFC。

怎样让元素创建 BFC

  • float 的值不为 none （浮动元素）
  • overflow 的值不为 visible
  • display 的值为 inline-block 、table-caption 、 table-cell 、flex 、inline-flex
  • positon 的值为 absolute 或 fixed
  • <html>(根元素)

BFC 的布局规则

  1. 内部的 box 会在垂直方向上一个接一个地放置 （平时说的块级元素一行行放）
  2. box 间垂直方向的距离由 margin 决定 。同一个BFC中的两个相邻的 box 还是会产生外边距重叠问题
  3. BFC 的区域不会与 浮动的 box 重叠
  4. BFC 是一个独立的容器，里面的元素不会影响外面的元素，反之亦然。
  5. 包含浮动元素，计算 BFC 的高度时，浮动的元素也会参与计算

BFC 的应用场景

  • 分属于不同 BFC 的元素可以防止垂直外边距折叠
  • 清除内部浮动（使浮动元素可以撑起父盒子）
  • 自适应两栏布局（BFC 区域不会与浮动元素重叠）
  • 防止元素被浮动元素覆盖

float + BFC 两栏布局:

<div class="parent">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

<style>
    .left {
        float: left;
        width: 100px;
        background-color: blue;
    }
    .right {
        overflow: hidden; // 触发 BFC
        background-color: green;
    }
</style>

阅读原文
参考文章： 关于CSS-BFC深入理解 css 盒子模型理解

avatar
文章
阅读
粉丝