当前位置 > it书童 > 大前端 > 正文

css3 盒子模型(box-sizing)

大前端 it书童 2020-02-07 11:36:33 0赞 0踩 83阅读 0评论

传统模式计算 css 的盒子宽度令人望而生畏,后端同学处理起来更是手忙脚乱,总是小心翼翼,一不小心,整个布局样式都乱了,内心充满了无力感

传统模式的公式: 盒子的宽度 = css 中设置的 width + border + padding

css3 终于解决了这个问题,盒子的宽度 = css 中设置的宽度,即 width 包含了 boder 和 padding

也就是说,我们的 css3 中的盒子模型, padding 和 border 不会撑大盒子了

要实现此功能,只需要添加以下属性:

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

移动端可以全部 css3 盒子模型,PC端如果完全需要兼容,我们就用传统模式,如果不考虑兼容性,我们就选择 css3 盒子模型

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div:nth-child(1) {
            /* 传统盒子模型= width + border + padding */
            width: 200px;
            height: 200px;
            background-color: pink;
            padding: 10px;
            border: 10px solid red;
            box-sizing: content-box;
        }
        
        div:nth-child(2) {
            /* 有了这句话就让盒子变成CSS3盒子模型 */
            /* padding 和 border 不会再撑大盒子了 */
            box-sizing: border-box;
            width: 200px;
            height: 200px;
            background-color: purple;
            padding: 10px;
            border: 10px solid blue;
        }
    </style>
</head>

<body>
    <div>传统盒子,border 和 padding 会撑大盒子</div>
    <div>css3 盒子,border 和 padding 包含在盒子宽度中</div>
</body>

</html>

转载须注明出处:https://www.itshutong.com/articles/395/css3-box-sizing
标签: 讲义
关于我
一个文科出身的程序员,追求做个有趣的人,传播有价值的知识,微信公众号主要分享读书思考心得,不会有代码类文章,非程序员的同学请放心订阅
发表评论
我有句话,不知当讲不当讲?
要讲之前请先 登录