box-sizing

box-sizing:为css3添加的样式。

总结一句话:设置改样式、且有宽度,padding无法将其撑大

DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            margin-top:20px;
        }

        .box2,.box3{
            border:25px blue solid;
            padding:25px;
            /* 设置的放内容区域大小*/
            /*外加模式*/
            box-sizing: content-box;
        }

        .box2{
            /* 设置盒子模型中最大盒子大小,如果在加paddig border 只会减小放内容的区域*/
            /*内减模式*/
            box-sizing: border-box;
        }
    style>
head>
<body>
    <div class="box1">div>
    <div class="box2">div>
    <div class="box3">div>
style="border:0">iframe>
body>
html>

 

你可能感兴趣的:(box-sizing)