Web全栈-盒子box-sizing属性 

    <title>盒子box-sizing属性</title>
    <style>
        .content{
            width: 300px;
            height: 300px;
            background-color: red;
        }
        .aside{
            width: 100px;
            height: 200px;
            background-color: green;
            float: left;
        }
        .article{
            /*
            1.CSS3中新增了一个box-sizing属性, 这个属性可以保证我们给盒子新增padding和border之后, 盒子元素的宽度和高度不变
            2.box-sizing属性是如何保证增加padding和border之后, 盒子元素的宽度和高度不变
            和我们前面学习的原理一样, 增加padding和border之后要想保证盒子元素的宽高不变, 那么就必须减去一部分内容的宽度和高度
            3.box-sizing取值
            3.1content-box
                元素的宽高 = 边框 + 内边距 + 内容宽高
            3.2border-box
                元素的宽高 = width/height的宽高
            
            具体可以在浏览器调试窗口查看详细的盒子模型情况。
            
            再复习下：
            1.内容的宽度和高度
            就是通过width/height属性设置的宽度和高度

            2.元素的宽度和高度
            宽度 = 左边框 + 左内边距 + width + 右内边距 + 右边框
            高度 同理可证

            3.元素空间的宽度和高度
            宽度 = 左外边距 + 左边框 + 左内边距 + width + 右内边距 + 右边框 + 右外边距
            高度 同理可证
            */

            box-sizing: border-box;
            width: 200px;
            height: 200px;
            background-color: blue;
            float: right;
            border: 20px solid #000;
            padding: 20px;
        }
    </style>
</head>
<body>

<div class="content">
    <div class="aside"></div>
    <div class="article"></div>
</div>

</body>
</html>
posted @ 2019-10-15 15:07  yindanny  阅读(286)  评论(0)  编辑  收藏  举报