技术控

    今日:126| 主题:49289
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] css之盒子模型

[复制链接]
秀才 发表于 2016-10-2 22:53:01
230 5

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
Created at 2016-08-21 Updated at 2016-10-02  CategoryFront-End   TagCSS  
  盒子的宽度

  在盒子模型中,我们设置的宽度都是内容宽度,不是整个盒子的宽度
   盒子的宽度= margin-right+margin-left+border-left+padding-left+width+padding-right+border-right
  设置了固定宽度的情况下

   
css之盒子模型-1 (浏览器,display,border,模型,友好)

   因此,在盒子模型中,我们设置的宽度都是内容宽度,不是整个盒子的宽度。而整个盒子的宽度是:( 内容宽度 + border宽度 + padding宽度 + margin宽度 )之和。这样我们改四个中的其中一个,都会导致盒子宽度的改变。这对我们来说不友好
  充满父容器的情况下

   默认情况下, div 的 display:block ,宽度会充满整个父容器。如下图:

css之盒子模型-2 (浏览器,display,border,模型,友好)

   这个 div 是个盒子模型,它的整个宽度包括( 内容宽度 + border宽度 + padding宽度 + margin宽度 ),整个的宽度充满父容器。
   问题就在这里。如果父容器宽度不变,我们手动增大 margin 、 border 或 padding 其中一项的宽度值,都会导致内容宽度的减少。
  极端情况下,如果内容的宽度压缩到不能再压缩了(例如一个字的宽度),那么浏览器会强迫增加父容器的宽度。这可不是我们想要看到的
  包裹内容的情况下

   这种情况下比较简单,内容的宽度按照内容计算,盒子的宽度将在内容宽度的基础上再增加( padding宽度 + border宽度 + margin宽度 )之和
1234下一页
友荐云推荐




上一篇:第94期
下一篇:众里寻她千百度--正则表达式
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

玖泰权 发表于 2016-10-2 23:16:17
总有一天我会骄傲的对你说:滚,我不需要你。
回复 支持 反对

使用道具 举报

念桃 发表于 2016-10-7 11:53:41
在神经的人群里呆久了,我发现我正常了。
回复 支持 反对

使用道具 举报

周金平 发表于 2016-10-15 00:40:15
我在尘世间默默无闻,你在菜市场颠倒众生。
回复 支持 反对

使用道具 举报

贾瑞 发表于 2016-11-20 20:51:35
边撸边过
回复 支持 反对

使用道具 举报

mfchotid 发表于 2016-11-21 02:41:21
有的人,做面膜的时候,比真人好看多了。
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表