CSS盒模型面試知識點

本文轉載自查看原文 2019-10-01 14:51 376 CSS盒模型

一、基本概念

1、基本概念：標准盒模型+怪異盒模型（IE模型）

基本組成：由margin、padding、content組成。

2、標准盒模型和IE模型的區別

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

標准盒模型下盒子的大小 = content + border + padding + margin

怪異盒模型中的width指的是內容、邊框、內邊距總的寬度（content + border + padding）；height指的是內容、邊框、內邊距總的高度

怪異盒模型下盒子的大小=width（content + border + padding） + margin

3、CSS如何設置標准模型和IE模型

如果doctype協議缺失，會由瀏覽器自己界定，在IE瀏覽器中IE9以下（IE6.IE7.IE8）的版本觸發怪異模式，其他瀏覽器中會默認為W3c標准模式。

box-sizing: content-box 標准盒模型

box-sizing: border-box IE盒模型

二、盒模型垂直外邊距重疊問題

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

（1）什么是外邊距重疊

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

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

邊距重疊發生場景：

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

2、空元素，如果設置了margin-top和margin-bottom，則會在兩者之間取一個最大值作為最終外邊距。

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

Ⅰ父元素邊界重疊

<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分隔。那么外邊距就會重疊，父元素高度塌陷。

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

Ⅱ 兄弟元素的邊界重疊

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