CSS 盒模型

時間 2019-12-12

標籤 css 模型欄目 CSS 简体版

原文原文鏈接

CSS 盒模型

CSShtml

CSS 盒模型

基本概念：標準模型 + IE模型瀏覽器

標準模型和IE模型的區別dom
- 標準模型
- IE模型
- 兩者區別，前者的寬度是內容寬度，後者的寬度是內容+內邊距+border

CSS 如何設置這兩種模型ui

- 標準模型:box-sizing: content-box;
- IE模型:box-sizing: border-box;

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

- dom.style.width/height
- dom.currentStyle.width/height 僅IE兼容
- window.getComputedStyle(dom).width/height 兼容性好
- dom.getBoundingClientRect().width/height 用於得到頁面中某個元素的左，上，右和下分別相對瀏覽器視窗的位置。

實例題「根據盒模型解釋邊距重疊」

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>CSS 盒模型</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
     html *{
         margin: 0;
         padding: 0;
     }
    </style>
</head>
<body>
    <section id="sec">
        <style media="screen">
            #sec{
                background: #f00;
                /* 解決重疊，BFC */
                /* overflow: hidden; */
            }
            .child{
                height: 100px;
                background: yellow;
                margin-top: 10px;
            }
        </style>
        <article class="child"></article>
    </section>
</body>
</html>

BFC 「邊距重疊解決方案」code

- BFC的基本概念
   - 塊級元素格式化上下文 
- BFC的原理
   - 在 BFC 這個垂直方向的邊距發生重疊
   - BFC 的區域不會與浮動元素的box重疊
   - BFC 在頁面上是個獨立的容器
   - 計算 BFC 高度的時候，浮動元素也會參與計算
- 如何建立 BFC
   - 只要設置了 float，就會建立
   - position 的值不是 static 或者 relative
   - display 屬性
   - overflow 相關

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>CSS 盒模型</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        html * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <section id="sec">
        <style media="screen">
            #sec {
                background: #f00;
                /* 解決重疊 */
                /* overflow: hidden; */
            }

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

    <!-- BFC元素內垂直方向邊距重疊（取最大的值）-->
    <section id="margin">
        <style>
            #margin {
                margin-top: 20px;
                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 {
                margin-top: 20px;
                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>
            #float {
                margin-top: 20px;
                background: red;
                overflow: hidden;
            }
    
            #float .float {
                float: left;
                font-size: 30px;
            }
        </style>
        <div class="float">我是浮動元素</div>
    </section>
</body>

</html>

Licensehtm