再读《精通css》04:盒模型和空白边叠加
第二章:可视化格式模型
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、只有普通文档流中的块级元素的垂直空白边才会发生叠加,行内元素、浮动元素以及绝对定位的元素的垂直空白边不会叠加。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?
2009-03-04 Ajax+jQuery实现LightBox与服务器通信