美文网首页
css盒子模型

css盒子模型

作者: 蓝莓_酸牛乳 | 来源:发表于2018-04-02 16:32 被阅读0次

    一、盒子模型

    说在前面的话:

        1、内边距出现在内容区域的周围,如果给元素添加背景,那么背景会应用于由内边距和元素内容组成的区域。

        2、在css中,width和height值得是元素内容区域的宽度和高度。(通常我们设置的背景显示区域,就是内容、内边距、边框这一块范围。而外边距margin是透明的,不会遮挡周边的其他元素)。

    IE盒子模型 标准盒子模型

    二、外边距叠加

    说在前面的话:

        1、只有普通文档流中的外边距会发生叠加,行内元素、浮动框和据绝对定位元素之间不会发生外边距叠加。创建了块级格式化上下文的元素,不会和它的子元素发生margin折叠。

        2、简单说来,当两个或者更多的垂直外边距相遇时,它们会形成一个外边距,这个外边距的高度为发生叠加的外边距中高度最大者。

    外边距叠加的几种实例:

        1、当一个元素在另一个元素上面时:

    当一个元素在另一个元素上面时

        2、当一个元素包裹在另一个元素内部时:

    子元素与父元素的外边距发生叠加

    3、空元素自身的外边距叠加:

    空元素自身的外边距叠加

    相关文章

      网友评论

          本文标题:css盒子模型

          本文链接:https://www.haomeiwen.com/subject/mvlxhftx.html