CSS盒模型

時間 2019-11-08

標籤 css 模型欄目 CSS 简体版

原文原文鏈接

CSS盒模型的認識

標準模型和 IE模型

CSS盒模型包括content，padding，border，margin 標準模型跟IE模型的區別在於計算長寬的方式不同。標準模型的長寬是content的寬高，IE模型的寬高包括border之內的寬高。 html

如何設置切換這兩種模型

通常默認的是標準模型，能夠經過CSS3的新屬性 box-sizing 來進行兩種模式的切換瀏覽器

//標準模型
box-sizing: content-box

//IE模型
box-sizing: border-box
複製代碼

JS如何獲取盒模型對應的寬和高

//第一種只能獲取內聯樣式的寬高
dom.style.width/height
//第二種得到最終渲染的寬高，可是隻支持IE
dom.currentStyle.width/height
//第三種兼容其餘瀏覽器
window.getComputedStyle(dom).width/height
//第四種dom.getBoundingClientRect()能夠獲取元素的絕對位置，返回四個值，width,height,top,left
dom.getBoundingClientRect().width/height
複製代碼

CSS實例題

子元素的高是100px，margin-top是10，那麼父元素的高度是多少？答案：100px和110px均可能。bash

由上面引出問題，邊距重疊問題（父子元素，兄弟元素，空元素）

當上訴關係的邊距重疊的時候，會取較大值做爲二者的邊距dom

邊距重疊解決方案

BFC（塊級格式化上下文）和IFC （內聯格式化上下文）佈局

BFC概念

BFC 即 Block Formatting Contexts (塊級格式化上下文)，它是頁面中的一塊渲染區域，而且有一套渲染規則，它決定了其子元素將如何定位，以及和其餘元素的關係和相互做用。flex

具備 BFC 特性的元素能夠看做是隔離了的獨立容器，容器裏面的元素不會在佈局上影響到外面的元素，而且 BFC 具備普通容器所沒有的一些特性。ui

BFC原理

1.在BFC元素的垂直方向的邊距不會發生重疊 2.BFC元素不會與浮動的元素的邊距重疊 3.bfc能夠看做一個獨立的容器，容器內外各不影響。 4.計算寬高的時候浮動元素也參與計算。spa

如何建立BFC

body 根元素浮動元素：float 除 none 之外的值絕對定位元素：position (absolute、fixed) display 爲 inline-block、table-cells、flex overflow 除了 visible 之外的值 (hidden、auto、scroll) 以上條件均可以建立一個BFC元素3d

應用場景

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS盒模型</title>
    <style media="screen">
      html *{
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
      <section class="box" id="sec">
        <style media="screen">
          #sec{
            background: #f00;
          }
          .child{
            height: 100px;
            margin-top: 10px;
            background: yellow
          }
        </style>
        <article class="child"></article>
      </section>

      <!-- 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>

  </body>
</html>

複製代碼