css-------box-sizing 秒速五厘米 2022-09-29 04:20 14阅读 0赞 一般来说，我们说元素的总宽度是不包括它的边距（margin)的，而box-sizing这个属性就是设置了元素计算宽度的时候应该从哪个位置开始算起，它的默认值为content-box，也就是说对元素所设定的宽度会应用带钙元素的内容上，而填充和边框值会照常添加上去。 如果把值设置为border-box，则设定的width值是内容，填充和边框的总宽度。 首先，我们先来看看， 以下这段代码产生出来的效果 .top \{ border: 5px solid black; background-color: yellow; width: 50px; height: 50px; padding: 10px; margin: 10px; \} ![Center][] 由这张图片可以看得出来，元素的宽度是等于80px的，也就是说包括了内容的width=50px,左右border共=10px,左右padding共=20px，所以80=50+10+20。 而今天提到的这个box-sizing属性，我们就可以把元素的宽度真的控制在50px。下面，当我们设置box-sizing这个属性为content-box，其实这个属性的效果跟上图的效果是一致的，内容的宽度依旧是50px. 但是当我们把box-sizing的属性设为border-box的时候呢，效果就是如下图一样，我们设置内容宽度为50px，然后整体表现出来的也是50px ,实际上内容的宽度已经发生改变了，因为当我们设置这个box-sizing为border-box的时候，它的宽度就把内边距和边框都设置进来了，所以内容的宽度只能适应了，由下图可以知道，内容的宽度已经变为20px,但是padding和border依旧没有发生改变的。就是如果我们把width设置为一个值，那么从整体上来，这个元素的宽度就是变现为这个值了。 ![Center 1][] ![Center 2][] 这个属性在所有主要的浏览器中已经被实现的了，但是在某些浏览器中，该属性前使用浏览器特定的前缀。 在Firefox:-moz-box-sizing 在safari:-webkit-box-sizing 等等。 [Center]: /images/20220708/89f5a76673d144b6b332669cf655f1ca.png [Center 1]: /images/20220708/51fff1b7b8bf41d58d314eabb63c05b2.png [Center 2]: /images/20220708/f6e32eff2940456d85536a82fa7e7e9f.png
还没有评论，来说两句吧...