传统的盒子模型不直接, 所有新增了一个叫做 box-sizing 的 CSS 属性. 点你设置一个元素为 box-sizing:border-box; 时, 此元素的内边距和边框不再会增加它的宽度.
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8" />
- <title > 布局 </title>
- <style>
- .box{
- width: 300px;
- height: 300px;
- padding: 50px;
- border: 5px solid red;
- background-color: blue;
- box-sizing: border-box;
- }
- .room{
- width: 300px;
- height: 300px;
- padding: 50px;
- border: 5px solid red;
- background-color: blue;
- }
- </style>
- </head>
- <body>
- <div class="box">
设置 box-sizing: border-box;
- </div>
- <div class="room">
没有设置 box-sizing: border-box;
- </div>
- </body>
- </html>
- *{
- -webkit-box-sizing: border-box;
- -wmoz-box-sizing: border-box;
- box-sizing: border-box;
- }
由于是新属性的 box-sizing , 用该用上面的这种带有前缀的写法.
来源: http://www.qdfuns.com/note/49226/a2259b5c90d319ee4d4dd8ffbe1a662e.html