Home > Article > Web Front-end > Detailed explanation of css3 box-sizing
Detailed explanation of css3 box-sizing
- 高洛峰Original
- 2017-02-20 11:28:541327browse
People slowly realized that the traditional box model was not straightforward, so they added a new CSS property called box-sizing.
box-sizing: Box size,Box model.
##We often encounter that the width of the left and right modules is 50%. Adding a border will cause it to fall. Adding this style can solve the problem. Take a look at the chestnut:
<!DOCTYPE html><html><head><style> p.container{width:300px;border:10px solid blue;}p.box{box-sizing:border-box;-moz-box-sizing:border-box; /* Firefox */-webkit-box-sizing:border-box; /* Safari */width:50%;height:80px;padding:10px;border:10px solid red;float:left;}</style></head><body><p class="container"><p class="box">这个 p 占据左半部分。</p><p class="box">这个 p 占据右半部分。</p><p style="clear:both;"></p></p></body></html>
The box-sizing attribute can be one of three values: content-box (default), border-box, padding- box. Content-box, border and padding are not calculated into width padding-box, padding is calculated into width border-box, border and padding are calculated into width Inside, it’s actually a weird mode. 李子：
<style type="text/css">
.content-box{
box-sizing:content-box;
-moz-box-sizing:content-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #E6A43F;
background: blue;
}
.padding-box{
box-sizing:padding-box;
-moz-box-sizing:padding-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #186645;
background: red;
}
.border-box{
box-sizing:border-box;
-moz-box-sizing:border-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #3DA3EF;
background: yellow;
}</style>For more css3 box-sizing related articles, please pay attention to the PHP Chinese website!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：css3 simulate jq click eventNext article：css3 simulate jq click event