首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX  ›  推广

CSS 从零开始(三)盒模型

  •  
  •   powertoolsteam · 182 天前 · 436 次点击
    这是一个创建于 182 天前的主题,其中的信息可能已经有所发展或是发生改变。

    CSS2.1 中提出了盒模型的概念,盒模型总结概括了所有元素的基本特征,那么盒模型究竟是一个什么样的概念呢,我们可以用过下面的链接来访问其中图片

    图片链接

    从图片来看,一个完整的盒模型有上面四部分组成,即 border(边框)、margin(外边距)、padding(内边距)、element(元素)。简而言之,任何元素都具有上面四个特征。

    在计算盒模型的高度宽度时候有两个计算标准分别是:标准盒模型、IE 盒模型

    标准盒模型

    该模型宽度和高度仅仅是其中 element(元素)的宽度与高度,不包括内外边距以及边框的宽度与高度。

    上面这样图就是标准盒模型的计算方式,其中 width、height 指的是 element 的宽度和高度。

    IE 盒模型

    早起的 IE 浏览器( IE6.0 以前)使用的盒模型与其他浏览器有差异,我们称之为 IE 盒模型。

    IE 盒模型与标准盒模型的不同在于,该模型的宽度与高度是将元素与内外边距、边框累加起来的总和才是整个模型占用的宽度和高度。

    简而言之就是 width = element + padding + margin + border

    CSS 中也支持手动设置模型类型, 即 box-sizing 属性,content-box 为标准盒模型,border-box 为 IE 盒模型

    设置之后宽度高度遵循上方的规则。

    /* 标准盒模型 */
    box-sizing:content-box;
    
    /*IE 盒模型*/
    box-sizing:border-box;
    

    外边距合并

    当两个盒模型相遇时,其中垂直相遇的部分的外边距( margin )将会被合并,形成一个新的外边距, 新的外边距的高度等于两个发生合并的外边距的高度中的较大者。

    下面的图可以做一个很好的说明。

    图片链接

    上图中两个盒模型,上面的有一个 20px 的 margin-bottom,下面的有一个 10px 的 margin-top,当两个模型垂直相遇时,相遇的部分会被合并,形成一个新的外边距,高度为 20px。

    这里可以看到两个 element 之间的 margin 是 20px,而不是想象中的 30px。

    当一个元素包含在另一个元素中时,它们的上和 /或下外边距也会发生合并。如下图所示

    图片链接

    4 回复  |  直到 2019-04-19 11:39:38 +08:00
        1
    powertoolsteam   182 天前
    本文由葡萄城发布,转载请注明出处:葡萄城官网( https://www.grapecity.com.cn/developer ),葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。
        2
    Blacate   182 天前   ♥ 1
    IE 盒模型 width = element + padding + border 不包括 margin 吧
    错误这么明显还写教程。。可怕。。
        3
    powertoolsteam   182 天前
    @Blacate 感谢提醒,已更正,IE 盒模型很久不用,有些概念生疏了
        4
    powertoolsteam   182 天前
    更正一下,IE 盒模型的宽度与高度的计算不包括外边距,但包括内边距和边框,再次感谢 Blacate 同学的指正
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2290 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 21ms · UTC 12:25 · PVG 20:25 · LAX 05:25 · JFK 08:25
    ♥ Do have faith in what you're doing.