收藏
天蓬老师批改状态：合格
老师批语：
box-sizing的两个属性：
- border-box，IE盒子，计算盒子宽高的时候不包含内边距和边框；
- content-box，w3c盒子，默认属性，计算盒子宽高的时候回包含内边距和边框
现在这个盒子是w3c盒子，所以现在盒子宽是20+10x2+1x2=42px，高是一样的
<style>div{width:20px;height:20px;padding:10px;border:1px #000 solid;}</style><body><div></div></body>现在这个盒子是ie盒子，所以现在盒子宽就是设置的宽20px，高20px
<style>div{box-sizing: border-box;width:20px;height:20px;padding:10px;border:1px #000 solid;}</style><body><div></div></body>总结：ie盒子更好用，不用再考虑加上内边距后会撑大盒子导致页面布局乱
<style>div{width：400px；height: 400px;border: 1px solid #000;}div>h2{左右居中text-align: center;让行高等于父级块的高度就能垂直居中line-height:400px;}</style><body><div><h2>我喜欢PHP中文网</h2></div></body>
<style>.box {box-sizing: border-box;width: 400px;用内边距来撑开外面的盒子达到上下居中的效果，不能加高padding: 100px 0;border: 1px solid #000;}.box div {width: 100px;height: 100px;用外边距俩撑开外面的盒子达到左右居中的效果，要让左右的距离智适应margin: 0 auto;background-color: aqua;}</style><body><div class="box"><div></div></div></body>
<style>.box {box-sizing: border-box;width: 400px;height: 400px;border: 1px solid #000;position: relative;}.box div {width: 100px;height: 100px;background-color: aqua;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;}</style><body><div class="box"><div></div></div></body>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
