Skip to content

Latest commit

 

History

History
187 lines (141 loc) · 4.65 KB

03. CSS 盒模型.md

File metadata and controls

187 lines (141 loc) · 4.65 KB
Raw

CSS 盒模型

问题

  • 说说对 CSS 盒模型的认识

技术点：

  • 基本概念：标准模型 + IE 模型
  • 标准模型和 IE 模型的区别
  • CSS 如何设置这两种模型的
  • JS 如何设置获取盒模型对象的宽和高
  • 实例题：根据盒模型解释边距重叠
  • BFC（边距重叠解决方案）、IFC

标准模型

标准模型

IE 模型

IE 模型

CSS 如何设置这两种模型的：

/* 标准模型 */
box-sizing: content-box;  // (默认)

/* IE 模型 */
box-sizing: border-box;

JS 如何设置获取盒模型对象的宽和高：

// 这种方式只能取到 dom 元素内联样式所设置的宽高，也就是说如果该节点的样式是在 style 标签中或外联的 CSS 文件中设置的话，通过这种方法是获取不到 dom 的宽高的。
element.style.width/height   // 仅内联样式

// 这种方式获取的是在页面渲染完成后的结果，就是说不管是哪种方式设置的样式，都能获取到。(仅 IE 支持)
element.currentStyle.width/height  // 渲染以后的(仅IE支持)

// 这种方式的原理和2是一样的，这个可以兼容更多的浏览器，通用性好一些。
window.getComputedStyle(element).width/height  // (chrome\Firefox)

// 这种方式是根据元素在视窗中的绝对位置来获取宽高的
element.getBoundingClickRect().width/height

// 这个就没什么好说的了，最常用的，也是兼容最好的。 为 border-box 的宽度。结果为四舍五入的整数。
element.offsetWidth/offsetHeight

// 元素的内部宽度，以像素计。该属性包括内边距，但不包括垂直滚动条（如果有）、边框和外边距。
element.clientWidth

// 表示元素内容的宽度，包括由于滚动而未显示在屏幕中内容。
// 宽度的测量方式与 clientWidth 相同：它包含元素的内边距，但不包括边框，外边距或垂直滚动条（如果存在）。
element.scrollWidth
                包含边框(border-box)         不包含边框(padding-box)
返回整数             offsetWidth              clientWidth / scrollWidth
返回小数     getBoundingRect().width              \
包括滚动部分             \                     scrollWidth

实例题：根据盒模型解释边距重叠：

<style media="screen">
  #sec {
    background: #f00;
    box-sizing: border-box;
  }

  .child {
    height: 100px;
    margin-top: 10px;
    background: yellow
  }
</style>
<section class="box" id="sec">
  <article class="child"></article>
</section>

overflow: hidden; 时, 高度变为 110px

BFC（边距重叠解决方案）

BFC 的基本概念： BFC 全称"Block Formatting Context", 中文为"块级格式化上下文"。

原理:

  1. BFC 元素的垂直方向的边距发生重叠
  2. BFC 区域不会与浮动元素的 box 重叠
  3. BFC 在页面上是一个独立的容器
  4. 计算 BFC 的高度，浮动元素也会参与计算

创建BFC的条件：

  • float 的值不为 none。（脱离文档流）
  • overflow 的值为 auto，scroll 或 hidden。
  • display 的值为 table-cell，table-caption，inline-block，flex，inine-flex中的任何一个。
  • position 的值不为 relative 和 static，即 position 为 absolute 或 fixed。
  • 根元素

BFC 的使用场景：

  • 自适应两栏布局
  • 清除内部浮动
  • 防止垂直 margin 重叠
<!-- BFC 垂直方向边距重叠 -->

  <section id="margin">
    <style>
      #margin {
        background: pink;
        overflow: hidden;
      }

      #margin>p {
        margin: 5px auto 25px;
        background: red;
      }
    </style>
    <p>1</p>
    <div style="overflow:hidden">
      <p>2</p>
    </div>
    <p>3</p>
  </section>

  <!-- BFC 不与  float 重叠 -->

  <section id="layout">
    <style media="screen">
      #layout {
        background: red;
      }

      #layout .left {
        float: left;
        width: 100px;
        height: 100px;
        background: pink;
      }

      #layout .right {
        height: 110px;
        background: #ccc;
        overflow: auto;
      }
    </style>
    <div class="left"></div>
    <div class="right"></div>
  </section>

  <!-- BFC 子元素即使是  float 也会参与计算 -->

  <section id="float">
    <style media="screen">
      #float {
        background: red;
        overflow: auto;
        /*float: left;*/
      }

      #float .float {
        float: left;
        font-size: 30px;
      }
    </style>
    <div class="float">我是浮动元素</div>
  </section>

IFC

扩展链接：

http://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/

https://www.cnblogs.com/chengzp/p/cssbox.html