css 盒模型

時間 2020-02-12

標籤 css 模型欄目 CSS 简体版

原文原文鏈接

一、基本概念：css

　　標準盒模型 + IE 模型(怪異盒模型)html

二、區別：瀏覽器

　　標準盒模型中 width 指的是內容區域 content 的寬度；height 指的是內容區域 content 的高度。dom

　　標準盒模型下盒子的大小 = content + padding + border + margin;spa

　　IE 模型中的 width 指的是內容、邊框、內邊距的寬度（content + border + padding ）;height 同理。3d

　　IE 模型下盒子的大小 = width/height(content + padding + border) + margin;code

三、css 中如何設置標準模型和IE模型：　　orm

　　若是doctype協議缺失，會由瀏覽器本身界定，在IE瀏覽器中IE9如下（IE6.IE7.IE8）的版本觸發怪異模式，其餘瀏覽器中會默認爲W3c標準模式。htm

　　box-sizing: content-box 標準盒模型blog

　　box-sizing: border-box IE盒模型

四、js 如何設置獲取盒模型對應的寬和高：

　　dom.style.width/height（只能獲取內聯寬高）

　　dom.currentStyle.width/height（瀏覽器渲染以後的取值，只有IE支持）

　　window.getComputedStyle(dom).width/height（瀏覽器渲染以後的取值，兼容性更好）

　　dom.getBoundingClientRect().width/height/left/top（經常使用於計算位置）

五、根據盒模型解釋邊距重疊問題：

　　（1）、什麼是外邊距重疊？　

　　　　垂直方向上的相鄰外邊距會發生外邊距重疊。（a.必須是相鄰的；b.必須是垂直方向上的）

　　　　兩個或是多個盒子（可能相鄰也可能嵌套）的相鄰邊界（中間沒有任何內容、補白、邊框）重合在一塊兒而造成的一個單一邊界。

　　（2）、邊距重疊發生場景：　　

　　　　a、父元素與子元素之間，父元素的上下外邊距和子元素的上下外邊距之間重疊，選擇最大值去渲染。

<style>
    .parent{background: #e7a1c5;}
    .child{background: #ff6875;height:100px;margin-top:10px;}
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>    
</body>

　　　　預想的效果是：

　　　　實際的效果是：

　　　　父元素高度並非 110px ,而是 100px, 父元素髮生了高度崩塌。

　　　　緣由：若是塊元素的margin-top 與它的第一個子元素的margin-top之間沒有border、padding、inline content、clearance來分隔；

　　　　　　　或者塊元素的margin-bottom和它最後一個子元素margin-bottom之間沒有border、padding、inline content、height、min-height、max-height分隔。那麼外邊距就會重疊，父元素高度塌陷。

　　　　　　子元素多餘的外邊距會被父元素的外邊距截取。

　　　　b、兄弟元素，兄弟元素之間的相鄰外邊距會取外邊距的最大值而不是外邊距之和。

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .parent{overflow:hidden;width:300px;
        background: #8fdbdb;}
    .parent>p{background: #ff6875;margin:20px auto 30px;}
    </style>

</head>
<body>
    <div class="parent">
        <p>1</p><p>2</p><p>3</p>
    </div>    
</body>