巧用width-每日一招

背景

在编写CSS中，width可能算得上比较常见的属性，当在布局HTML时，当使用width限定，页面也就失去了流动性，会造成各种各样的排版问题，这篇3分钟文章让你了解下width的用法与使用误区；

代码实现

在一个div里，设定了width为100px，那么这个100px是针对content，还是content+padding+border+margin呢？答案是100px针对的是content，所以在给div给定border width，padding大小时，这个div的宽度早已不是原先定义的100px了，所以你要定义一个100px的div，应该采用“宽度分离”，即给外层wrapper一个width为100px的div就可以了；

不合理的使用padding，造成排版混乱：下面代码a菜单区会超过parent div1，因为padding会使定义的block width变大，这里是18px；

利用包裹性实现block元素内容少时居中显示，内容多时，左对齐；

inline-block有个最小宽度，中文按一个个字断，英文按一个个单词断，利用这个特性我们可以做出一些有意思的效果，比如利用border和css content制作“凹”和“凸”效果；

最大宽度：就是最大的连续的inline,inline-block和inline-table的宽度和，用他给一个block设定一个“很大宽度”，那么就可以实现自定义滚动效果；

box-sizing 盒尺寸的作用细节，如果要将width作用与content+padding+border，则可以定义box-sizing:border-box，比如原生的input控件，box-sizing就是border-box，其他还包括content-box(默认)，padding-box，margin-box（浏览器不支持）；

总结：在我们布局HTML时，应尽量采用width:auto默认值，一旦定义了width的宽度，页面就失去了流动性，这样内部每个元素的宽度定义都需要我们人工计算，以免width超出parent造成页面的布局和起初的定义有出入，灵活的应用width，在某些场景中能达到事半功倍的效果

关注我们的公众号