css盒子模型
2018-04-02 本文已影响0人
蓝莓_酸牛乳
一、盒子模型
说在前面的话:
1、内边距出现在内容区域的周围,如果给元素添加背景,那么背景会应用于由内边距和元素内容组成的区域。
2、在css中,width和height值得是元素内容区域的宽度和高度。(通常我们设置的背景显示区域,就是内容、内边距、边框这一块范围。而外边距margin是透明的,不会遮挡周边的其他元素)。
IE盒子模型 标准盒子模型二、外边距叠加
说在前面的话:
1、只有普通文档流中的外边距会发生叠加,行内元素、浮动框和据绝对定位元素之间不会发生外边距叠加。创建了块级格式化上下文的元素,不会和它的子元素发生margin折叠。
2、简单说来,当两个或者更多的垂直外边距相遇时,它们会形成一个外边距,这个外边距的高度为发生叠加的外边距中高度最大者。
外边距叠加的几种实例:
1、当一个元素在另一个元素上面时:
当一个元素在另一个元素上面时2、当一个元素包裹在另一个元素内部时:
子元素与父元素的外边距发生叠加3、空元素自身的外边距叠加:
空元素自身的外边距叠加