CSS学习34:盒子模型

阅读 48

2022-04-13

属性介绍

CSS3 中可以通过 box-sizing 来指定盒模型,有2个值:即可指定为 content-box、border-box,这样我们计算盒子大小的方式就发生了改变

可以分成两种情况:

  • box-sizing: content-box 盒子大小为 width + padding + border (以前默认的)

  • box-sizing: border-box 盒子大小为 width

如果盒子模型我们改为了box-sizing: border-box , 那padding和border就不会撑大盒子了(前提padding和border不会超过width宽度)

举个例子

<head>
    <style>
        input,button {
            /* content-box 全部用css2盒子模型计算 */
            /* border-box 全部用css3盒子模型计算 */
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <!-- input 它是css2盒子模型  边框 内边距会撑大盒子 默认content-box-->
    <input type="text">
    <!-- button 它是css3盒子模型   边框和内边距不会撑大盒子 默认border-box-->
    <button>按钮</button>
</body>
</html>

解决方法:

 

精彩评论(0)

0 0 举报