• CSS 盒子模型


    盒子模型

    • 外边距(margin)
    • 边框(border)
    • 内填充(padding)
    • 内容(content)
      盗图一份:
      标准盒模型

    两种盒子模型:计算宽高的方式不一样

    • W3C盒模型(标准盒模型) :chrome、IE9+、(添加doctype)

      • 实际宽度 = 设置宽度(content值) + border值 + padding值
    • 怪异盒模型(又称ie盒模型):IE 678 下(不添加doctype) 使用ie盒模型

      • 实际宽度 = 设置宽度(content值)

    例如:一个宽度为200px的div,padding值为20px。
    那么在w3c盒模型下,这个div实际宽度为240px。
    在怪异盒模型下,这个div实际宽度为160px

    box-sizing

    为了解决标准盒模型和IE盒模型的不同,CSS3增添了盒模型属性box-sizing,content-box(默认),border-box 让元素维持IE传统盒子模型, inherit 继承 父盒子模型

    盒子分类:块级盒子(Block box) 和 内联盒子(Inline box)

    • 块级盒子
      • 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间,在绝大数情况下意味着盒子会和父容器一样宽
      • 每个盒子都会换行
      • width 和 height 属性可以发挥作用
      • 内边距(padding), 外边距(margin) 和 边框(border) 会将其他元素从当前盒子周围“推开”
    • 内联盒子
      • 盒子不会产生换行。
      • width 和 height 属性将不起作用。
      • 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。
      • 水平方向的内边距、外边距以及边框会被应用而且也会把其他处于 inline 状态的盒子推开。

    边界塌陷

    块元素的 top 与 bottom 外边距有时会合并(塌陷)为单个外边距(合并后最大的外边距),这样的现象称之为 外边距塌陷
    看个例子

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>边界塌陷</title>
    <style>
        .div1{
            height:50px;
            background-color: red;
            margin-bottom: 10px;
        }
        .div2{
            height:50px;
            background:blue;
            margin-top:10px;
        }
    </style>
    </head>
    <body>
        <div class="div1"></div>
        <div class="div2"></div>
    </body>
    </html>
    

    上面代码的效果是div1和div2之间的上下间隔只有10px,已经形成了外边距塌陷。如下图所示
    外边距塌陷

    参考

  • 相关阅读:
    js公共时间戳方法es6
    vue权限路由
    vue中websocket心跳写法
    vue引入全局组件和局部组件的区别以及全局注册公共函数
    [干货]关于vue作用域插槽的新的深入理解
    vue系统指令v-text(前端网备份)
    浏览器兼容html头部<meta>标签主要内容详情
    如何设置td中溢出内容的隐藏显示
    7-4列表/元组/字典/集合的内置方法
    7-3 整型/浮点型/字符串/列表常用方法
  • 原文地址:https://www.cnblogs.com/xingguozhiming/p/13466273.html
Copyright © 2020-2023  润新知