zoukankan      html  css  js  c++  java
  • 盒子模型

    盒子模型

    盒模型:分为内容(content)、填充(padding)、边界(margin)、边框(border)四个部分

    传统盒子模型(W3C标准盒模型content-box):盒子的宽度 = CSS中设置的width + border + padding

    CSS3盒子模型(IE盒模型border-box):盒子的宽度 = CSS中设置的宽度width里面包含了boder和padding也就是说,我们的CSS3中的盒子模型,padding和border不会撑大盒子

    /*CSS3盒子模型*/
    box-sizing: border-box;
    /*传统盒子模型*/
    box-sizing: content-box;
    

    例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div:nth-child(1) {
                 200px;
                height: 200px;
                background-color: pink;
                border: 10px solid red;
                padding: 10px;
    
            }
            div:nth-child(2) {
                /*有了这句话就让盒子变成了CSS3盒子模型*/
                /*padding和border不会再撑大盒子*/
                box-sizing: border-box;
                 200px;
                height: 200px;
                background-color: deepskyblue;
                border: 10px solid red;
                padding: 10px;
    
            }
        </style>
    </head>
    <body>
        <div></div>
        <div></div>
    </body>
    </html>
    

    如何选择

    移动端可以全部CSS3盒子模型

    PC端如果完全需要兼容,就用传统模式,如果不考虑兼容性,就选择CSS3盒子模型

  • 相关阅读:
    二分 || UOJ 148 跳石头
    等边n边型
    激光样式
    n个数中选k个数和为sum
    引爆炸弹
    光盘行动
    (二分)分蛋糕问题
    总结
    个人测试
    第三次团队作业
  • 原文地址:https://www.cnblogs.com/wahaha-/p/13973971.html
Copyright © 2011-2022 走看看