1

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

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

spoiler
94 声望8 粉丝

因为在奔跑 所以耳边有风🍃