【学习笔记】2 CSS框模型
1 框模型概述
图1 框模型概述
背景应用于由内容、padding内边距、border边框组成的区域
在大多数浏览器中,width属性=元素内容的宽度;在IE5、IE6中,width属性=元素内容的宽度+padding+border,解决这个问题的方法是回避该问题 padding、border=0 将内边距添加到元素的父元素子元素
2 内边距、边框、外边距
padding(top right bottom left):默认0,不能是负值,百分比值是相对于其父元素的width/height计算的
border(top right bottom left):默认0
border-style:默认none,忘记申明border样式是常见的错误
border-width:border-style不为none的情况下可设置
border-color:border-style不为none的情况下可设置,默认是元素本身的文本颜色or父元素的文本颜色
margin(top right bottom left):默认0,可以是正负0,百分比值是相对于其父元素的width/height计算的
3 外边距合并
只有普通文档流中块框的垂直外边距才会发生外边距合并,行内框、浮动框、绝对定位之间的外边距不会合并
合并后的外边距高度=max{外边距A,外边距B}
图2 当一个元素出现在另一个元素上面
图3 当一个元素包含在另一个元素中
图4 空元素没有border padding 有margin
图5 空元素没有border padding 有margin 遇到了另一个元素
图6 这就是一系列段落元素占用空间非常小的原因,因为它们的所有外边距都合并到一起,形成一个小的外边距