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>

来源：https://www.cnblogs.com/yindanny/p/11677775.html

标签

box-sizing

padding

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!