CSS盒模型分析

CSS 盒模型是前端学习中的基础,总结一下~

基本概念

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

盒子模型

分类

盒模型有两种,标准盒模型IE盒模型 。主要区别是它们的 widthheight 不同

  • 标准盒模型
    标准盒模型

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

  • IE盒模型
    IE盒模型

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

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


box-sizing:

  • content-box —> 标准盒模型(默认)
  • border-box —> IE 盒模型

    通过 js 获取盒子宽高

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

  1. domElement.style.width/height

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

  2. domElement.currentStyle.width/height

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

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

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

  4. domElement.offsetWidth/offsetHeight

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

外边距折叠问题

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

兄弟元素间

外边距重合

父子元素间

外边距重合

外边距折叠解决方案(BFC)

Block Formatting Context (块级格式化上下文)

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

怎样让元素创建 BFC

  • float 的值不为 none (浮动元素)
  • overflow 的值不为 visible
  • display 的值为 inline-blocktable-captiontable-cellflexinline-flex
  • positon 的值为 absolutefixed
  • <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>

© 2019 墨夜 All Rights Reserved.
Theme by hiero