学会使用box-sizing布局

box-sizing

• 语法：box-sizing: content-box | border-box | inherit;

• 与上面不同的是，当你设置box-sizing:border-box以后，这就能达到你想要的目的。例如，上面我们想要一个宽度为200px的盒子，那么我们直接设置宽度为200px。是不是看起来清晰多了。当再设置它的左右边框和左右补白后，它的内容区会自动调整。这可能更直接和一目了然。CSS代码如下：

div {
    box-sizing: border-box;
    width: 200px;
    padding: 20px;
    border: 1px solid #DDD;
}

• 实际上，这更被设计者和开发者推崇

• 一些开发人员觉得box-sizing使用起来十分方便,所以他们主张通过通用选择器将这个属性应用于每个元素

• 但这样的观点未免有些偏激,而且还会导致不必要的困难,所以更好的方法是只在实际需要时才使用这个属性

*{
     margin:0;
      padding:0;
     box-sizing:border-box;
}

• 写上 box-sizing: border-box; ，设置padding值 也不用担心没有减小宽度值而变形

作者：poetries
链接：https://www.jianshu.com/p/e2eb0d8c9de6
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。