再读《精通css》04:盒模型和空白边叠加
2014-06-25 00:00
197 查看
第二章:可视化格式模型
2.1 框模型概述
1、框模型:在页面上的每一个元素被看做是一个矩形的框。这个框由元素的内容(content),填充(padding),边框(border)和空白边(margin)组成。
2、元素的width和height指的是元素的内容区域的宽度和高度。
实际宽度=marginLeft+borderLeft+paddingLeft+width+paddingRight+borderRight+marginRight;
实际宽度=marginTop+borderTop+paddingTop+height+paddingBootom+borderBootom+marginBootom;
3、padding,margin,border都既可以运用于元素所有的边或只运用于某一边。
4、margin可以取负值。
5、IE6在怪异模式中使用自己专有的框模型。width和height包含了padding、margin和border。
6、空白边(margin)叠加:两个垂直方向上的空白边相遇时,他们将叠加成一个空白边。这个空白边的高度为叠加前高度较大的那一个。
7、空白边叠加可能发生在两个相邻的元素,父元素与子元素,0高度的原始自身的margin-top和margin-bottom之间。
8、只有普通文档流中的块级元素的垂直空白边才会发生叠加,行内元素、浮动元素以及绝对定位的元素的垂直空白边不会叠加。
2.1 框模型概述
1、框模型:在页面上的每一个元素被看做是一个矩形的框。这个框由元素的内容(content),填充(padding),边框(border)和空白边(margin)组成。
2、元素的width和height指的是元素的内容区域的宽度和高度。
实际宽度=marginLeft+borderLeft+paddingLeft+width+paddingRight+borderRight+marginRight;
实际宽度=marginTop+borderTop+paddingTop+height+paddingBootom+borderBootom+marginBootom;
3、padding,margin,border都既可以运用于元素所有的边或只运用于某一边。
4、margin可以取负值。
5、IE6在怪异模式中使用自己专有的框模型。width和height包含了padding、margin和border。
6、空白边(margin)叠加:两个垂直方向上的空白边相遇时,他们将叠加成一个空白边。这个空白边的高度为叠加前高度较大的那一个。
7、空白边叠加可能发生在两个相邻的元素,父元素与子元素,0高度的原始自身的margin-top和margin-bottom之间。
8、只有普通文档流中的块级元素的垂直空白边才会发生叠加,行内元素、浮动元素以及绝对定位的元素的垂直空白边不会叠加。
相关文章推荐
- 再读《精通css》04:盒模型和空白边叠加
- 再读《精通css》02:选择器
- css特性:空白外边距互相叠加
- 机器学习(六):叠加树模型
- 认识W3C标准盒子模型,理解外边距叠加
- 盒模型的外边距叠加
- ML 04、模型评估与模型选择
- (转)理解Javascript_04_数据模型
- struts 学习之04 "模型"
- 04 数据模型
- python初学-04django(数据库,模型)
- 04-AIO通讯模型
- 第02天实战技术(04):runtime字典转模型
- 再读《精通css》00
- 关于空白叠加
- 前端基础-04-盒子模型
- 再读《悟透javascript》之三、甘露模型
- ML 04、模型评估与模型选择
- The Linux Programming Interface 04 File I/O: The Universal I/O Model 通用I/O模型
- 两个相同大小的Scrollview叠加,如何点击上层scrollview的空白区域时可以让下层的scrollview的点击事件响应