巧用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,在某些场景中能达到事半功倍的效果

关注我们的公众号

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180323G1Q3FV00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动