css3中box-sizing实例应用中最方便的地方讲解

css3中box-sizing实例应用中最方便的地方讲解

现在css3出来了很多好用的属性，看着很简单，但是有时候就是不会用，或者是不清楚他到底使用到什么地方，才会发挥它的优势。这里特此讲解一个最常用的属性：border-box

在网页排版设计中最经常用到的是，ul li,在ul li中我们为了好看往往会加边框。这样显的工整。如图(右侧图片是css样式)：

下面让大家看看不加那个属性的样子下当增加border的宽度的时候，会出现下面的情况，这里就加了7px边框就变得不好看了:如图：

下面再给大家看一下加完box-sizing：border-box的情况，其他都没有变，只是加了这一个属性，一切都变了就，如图：

通过添加一个属性以后，一切都变的那么美好，再也不用担心添加宽度，而换行的问题了，而且变的那么的好看。这就是说加上他以后，border和padding则是被包含在宽高之内的。这样大家应该就明白了吧。哪怕padding和border加很多他也不会变行。