CSS 盒模型

CSS

CSS 盒模型

基本概念：标准模型 + IE模型

标准模型和IE模型的区别
- 标准模型
- IE模型
- 二者区别，前者的宽度是内容宽度，后者的宽度是内容+内边距+border

CSS 如何设置这两种模型

- 标准模型:box-sizing: content-box;
- IE模型:box-sizing: border-box;

JS 如何设置获取盒模型对应的宽和高

- 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 「边距重叠解决方案」

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

License

可以拷贝、转发，但是必须提供原作者信息，同时也不能将本项目用于商业用途。