css3盒子模型 box-sizing

最新推荐文章于 2021-12-13 15:53:55 发布

MDR_0820

最新推荐文章于 2021-12-13 15:53:55 发布

阅读量203

点赞数 1

文章标签： css3 css html5

本文链接：https://blog.csdn.net/MDR_0820/article/details/120637645

版权

css3盒子模型 box-sizing

传统盒子模型计算：盒子的宽度=css中设置的width+border+padding 需要计算
css3盒子模型：盒子的宽度=css设置的宽度已经包含 border和padding ，border和padding不会撑大盒子
移动端可以全部用css3模型
*PC端如果考虑完全·兼容我们就用传统模式如果不考虑兼容可以选择css3

下面展示一些代码

<style>
        div:nth-child(1){
            width: 100px;
            height: 100px;
            border: 5px solid red;
            padding: 10px;
            background-color: skyblue;
            /* 次盒子总宽高为130*130  padding和border已撑大盒子 */
        }
        div:nth-child(2){
            width: 150px;
            height: 150px;
            border: 5px solid red;
            padding: 10px;
            /* 加上CSS3属性box-sizing：border-box 不会撑大盒子 还是原来大小 */
            box-sizing: border-box;
            background-color: hotpink；
            
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
</body>

MDR_0820

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
css3盒子模型 box-sizing

css3盒子模型 box-sizing传统盒子模型计算：盒子的宽度=css中设置的width+border+padding 需要计算css3盒子模型：盒子的宽度=css设置的宽度已经包含 border和padding ，border和padding不会撑大盒子移动端可以全部用css3模型*PC端如果考虑完全·兼容我们就用传统模式如果不考虑兼容可以选择css3下面展示一些代码<style> div:nth-child(1){
复制链接

扫一扫