请选择 进入手机版 | 继续访问电脑版

技术控

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

[其他] css之盒子模型

[复制链接]
秀才 发表于 2016-10-2 22:53:01
381 5
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之盒子模型

css之盒子模型-1-技术控-宽度,盒子,内容,margin,border

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

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

css之盒子模型

css之盒子模型-2-技术控-宽度,盒子,内容,margin,border

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

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

css之盒子模型

css之盒子模型-3-技术控-宽度,盒子,内容,margin,border

  再看盒子的宽度

   前面提到,为盒子模型设置宽度,结果只是设置了内容的宽度,这个不合理。如何解决这一问题? 答案就是 : box-sizing:border-box
   

css之盒子模型

css之盒子模型-4-技术控-宽度,盒子,内容,margin,border

   如上图, div 设置了 box-sizing:border-box 之后, 300px 的宽度是内容 + border + 边框的宽度(不包括 margin ),这样就比较符合我们的实际要求了。
   建议大家在为系统写 css 时候,第一个样式是
   

css之盒子模型

css之盒子模型-5-技术控-宽度,盒子,内容,margin,border

  纵向margin的重叠

   如下图, <p> 的纵向 margin 是 16px ,那么两个 <p> 之间纵向的距离是多少?
   按常理来说应该是 16 + 16 = 32px ,但是答案仍然是 16px 。因为纵向的 margin 是会重叠的,大的会把小的“吃掉”
   

css之盒子模型

css之盒子模型-6-技术控-宽度,盒子,内容,margin,border

  用div画“三角”

  “三角”在日常的网页中是很常见的,例如百度首页:
   

css之盒子模型

css之盒子模型-7-技术控-宽度,盒子,内容,margin,border

   你当然可以使用背景图片来实现这一效果,但是你也可以用 div 来实现这一效果,很简单,而且可以封装通用:
   

css之盒子模型

css之盒子模型-8-技术控-宽度,盒子,内容,margin,border
玖泰权 发表于 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
有的人,做面膜的时候,比真人好看多了。
回复 支持 反对

使用道具 举报

我要投稿

推荐阅读


回页顶回复上一篇下一篇回列表
手机版/c.CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 | 粤公网安备 44010402000842号 )

© 2001-2017 Comsenz Inc.

返回顶部 返回列表