css盒模型

時間 2020-07-07

標籤 css 模型欄目 CSS 简体版

原文原文鏈接

1.盒模型基本概念：content padding border margincss

2.標準盒模型和IE盒模型瀏覽器

標準模型中，盒模型的寬高只是內容（content）的寬高dom

IE模型中盒模型的寬高是內容(content)+填充(padding)+邊框(border)的總寬高ide

3.css如何設置兩種盒模型佈局

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

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

4.js獲取元素的寬高flex

元素寬高設置方式：內聯樣式，元素節點樣式，外聯樣式spa

dom.style.width/height 只能取到dom元素內聯樣式所設置的寬高

dom.currentStyle.width/height 三種樣式設置方式的值都能取到，只支持IE

window.getComputedStyle(dom).width/height 三種樣式設置方式的值都能取到，各瀏覽器兼容

dom.getBoundingClientRect().width/height　　根據元素在視窗中的絕對位置來獲取寬高的

dom.offsetWidth/offsetHeight 最經常使用的，也是兼容最好的

5.邊距重疊code

父子元素間：子元素的margin-top會使父元素高度只有子元素高度那麼高orm

兄弟元素間：兄元素的下邊距和弟元素的上邊距重疊，取二者中的較大值較大值blog

空元素：空元素的上下邊距重疊，中二者中的較大值

6.BFC

概念：BFC全英文拼寫爲 Block Formatting Context 直譯爲「塊級格式化上下文」

原理：

BFC內部的Box會在垂直方向，一個接一個的設置；
Box垂直方向的距離由margin決定，屬於同一個BFC的兩個相鄰box的margin會發生重疊
每一個元素的margin box的左邊會與包含塊border box的左邊相接觸（對於從左到右的格式化，不然相反），即便存在浮動也會如此。
BFC的區域不會與float box的重疊
BFC就是頁面上的一個獨立容器，容器裏面的元素不會影響到外面的元素，反之亦然
計算BFC的高度時，浮動元素也參與計算

建立BFC的css方法：

根元素或其它包含它的元素
float屬性不爲none
position屬性爲absolute或fixed
display屬性爲inline-block、table-cell、table-caption、flex、inline-flex
overflow屬性不爲visible

BFC用途：

自適應兩欄佈局
清除內部浮動
防止垂直margin重疊

自適應兩欄佈局

<style >
body{
  position: relative;
  height: 400px;
}
.aside{
  height: 200px;
  width: 200px;
  background-color: pink;
  float: left;
}
.main{
  background-color: grey;
  height: 300px;
}
</style>
<body>
    <div class="aside"></div>
    <div class="main"></div>
</body>

根據BFC原理的第三條：每一個元素的margin box的左邊，與包含塊border box的左邊相接觸（對於從左到右的格式化，不然相反）。即便存在浮動也是如此。所以，即便存在浮動的aside，可是main仍是與包含塊的左邊相接觸；

按照BFC原理的第四條：BFC的區域不會與float box重疊。所以，能夠經過使main觸發BFC，來實現自適應兩列布局

.main{
  overflow: hidden;
}

當main觸發BFC後，其不會與浮動的aside重疊。所以會根據包含塊的寬度和aside的寬度，自動變窄，效果以下：

清除內部浮動

當子元素均浮動時，其沒法撐開父元素，此時能夠讓父元素生成BFC，以下：

<style>
    .par {
        border: 5px solid #fcc;
        width: 300px;
    }
 
    .child {
        border: 5px solid #f66;
        width:100px;
        height: 100px;
        float: left;
    }
</style>
<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>

根據BFC原理的第六條：計算BFC的高度時，浮動元素也參與計算。所以爲了達到清除內部浮動，能夠讓.par觸發BFC，那麼計算par的高度時，浮動元素也參與計算，par就被撐開了。

.par{
    overflow: hidden;
}

防止margin重疊

<style>
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>Haha</p>
    <p>Hehe</p>
</body>

能夠發現，兩個p元素之間的垂直margin出現了重疊。根據BFC的第二條規則：Box垂直方向的距離由margin決定，屬於同一BFC的兩個Box會發生margin重疊。所以，能夠在其中一個p上包裹容器，而後觸發其BFC，這樣兩個p就不在同一個BFC，就不會發生重疊。

<style>
    .wrap {
        overflow: hidden;
    }
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>Haha</p>
    <div class="wrap">
        <p>Hehe</p>
    </div>
</body>

1. css盒模型
2. css－－盒模型
3. CSS盒模型
4. CSS 盒模型
5. CSS-盒模型
6. 【CSS】盒模型
7. CSS：盒模型
8. css 盒模型
9. 盒模型------CSS
更多相關文章...
• ASP.NET MVC - 模型 - ASP.NET 教程
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• 委託模式
• Kotlin學習（二）基本類型

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。