博客已经迁移至 萌萌的IT人 ,谢谢支持--------------------------------------------------
可以参考《精通CSS 高级WEB标准解决方案》第三章。
可视化格式模型
可视化格式模型要掌握的3个最重要的CSS概念是 浮动、定位、盒模型。 这些概念控制在页面上安排和显示元素的方式, 形成CSS的基本布局。
主要学习内容:
- 盒模型的复杂性和特点
- 如何以及为什么使用外边距
- 绝对定位和相对定位之间的差异
- 浮动和清理是如何工作的
1、盒模型概念
盒模型是CSS的基石之一, 它指定元素如何显示以及(在某种程度上)如何相互交互。 页面上的每个元素被看做一个 矩形框, 这个框由元素的内容、 内边距、 边框和外边距组成。如下图所示:如果给元素添加背景, 背景会应用于内容和内边距组成的区域。 添加边框会在内边距的区域外加一条线。 这些线可以由多种样式, 如实线、 虚线或点线。 外边距是透明的, 一般使用它控制元素之间的间隔。
CSS2.1 包含outline属性。 与border不同, 轮廓绘制在元素框之上。所以它们不影响元素的大小或定位。
在CSS中, width和height指的是元素内容区域的宽度和高度。 增加内边距、边框和外边距不会影响内容区域尺寸, 但是会增加元素框的总尺寸。
内边距、边框、外边距可以应用于一个元素的所有边, 也可以应用于单独的边。 外边距也可以为负值。
1.1 IE和盒模型
IE的早期版本, 包括IE6, 在混杂模式中使用自己的非标准盒模型。 在CSS中, 这些浏览器的width、height属性不是内容的宽/高, 而是内容、 内边距和边框的宽/高总和。
这实际上很有道理, 现实中的框具有固定尺寸, 而内边距是放在框里面的。 添加的内边距越多, 给内容留下的空间越少。 尽管符合逻辑, 但是这些IE版本不符合规范。
有几个办法可以解决这个问题, 但是目前最好的解决办法是回避这个问题。 也就是说, 如果已经为元素指定了宽/高, 就不要给元素添加具有指定宽度的内边距, 而是将内边距或外边距添加到元素的父元素或子元素。
1.2 外边距叠加
外边距叠加是一个相当简单的概念。 但是,在实践中对网页进行布局时, 它会造成许多混淆。 简单的说, 当两个或更多个垂直边距相遇时, 它们将形成一个外边距。这个外边距的高度等于两个发生叠加的外边距的高度中的较大者。
一般来说, 垂直外边距叠加有三种情况:
- 元素自身叠加
- 相邻元素叠加
- 包含(父子)元素叠加
元素自身叠加
我们知道, 盒模型是 内容→内边距→边框→外边距 这样逐层包含的结构。 当元素没有内容(即空元素)、内边距、边框时, 它的上下边距就相遇了, 即会产生叠加(垂直方向)。 当为元素添加内容、 内边距、 边框任何一项, 就会取消叠加。
相邻元素叠加
这个比较好理解, 相邻的两个元素, 如果它们的上下边距相遇,即会产生叠加。
包含(父子)元素叠加
包含元素的外边距隔着 父元素的内边距和边框, 当这两项都不存在的时候, 父子元素垂直外边距相邻, 产生叠加。 添加任何一项即会取消叠加。
只有普通文档流中块框的垂直外边距才会发生外边距叠加。 行内框、 浮动框或绝对定位框之间的外边距不会叠加。
有关普通文档流、 浮动、 定位等概念会在下一节 定位里介绍。
相关推荐
欲学习Javascript 中CSS概念的初级介绍..
<br>本书将最有用的CSS技术汇总在一起,在介绍基本的CSS概念和最佳实践之后,讨论了核心的CSS技术,例如图像、链接、列表操纵、表单设计、数据表格设计以及纯CSS布局。每一章内容由浅入深,直到建立比较复杂的...
part4 精通CSS(css mastery)中文版 part5 精通CSS(css mastery)中文版 part6 这些文件名搜索一下,然后下载,解压缩会自动解成一个文件 <br>本书将最有用的CSS技术汇总在一起,在介绍基本的CSS概念和...
在介绍基本的CSS概念和最佳实践之后,讨论了核心的CSS技术,例如图像、链接、列表操纵、表单设计、数据表格设计以及纯CSS布局。每一章内容由浅入深,直到建立比较复杂的示例。之后本书用两章讨论招数、过滤器、bug和...
【css概念: 1、csss(层叠样式表)控制网页的样式和布局 2、作用:▷样式定义如何显示HTML元素。 ▷样式为了解决内容与表现分离的问题。 ▷外部样式表可以极大提高工作效率,外部样式表通过存储在css文件中。 css...
本书将最有用的CSS技术汇总在一起,在介绍基本的CSS概念和最佳实践之后,讨论了核心的CSS技术,例如图像、链接、列表操纵、表单设计、数据表格设计以及纯CSS布局。每一章内容由浅入深,直到建立比较复杂的示例。...
使用HTML和CSS概念创建网站。 功能概念 •强:negrito。 Tem fechamento。 •em:意大利。 Tem fechamento。 •h:título。 Tem 6níveis(h1,h1等)。 Tem fechamento。 •p:parágrafo。 Tem fechamento。 ...
css资料 # 课程目标: > 1. 学会使用CSS选择器 > 2. 熟记CSS样式和外观属性 > 3. 熟练掌握CSS各种选择器 > 4. 熟练掌握CSS各种选择器 > 5. 熟练掌握CSS三种显示模式 > 6. 熟练掌握CSS背景属性 > 7. 熟练掌握CSS三大...
本书将最有用的CSS技术汇总在一起,在介绍基本的CSS概念和最佳实践之后,讨论了核心的CSS技术,例如图像、链接、列表操纵、表单设计、数据表格设计以及纯CSS布局。每一章内容由浅入深,直到建立比较复杂的示例。之后...
本书将最有用的CSS技术汇总在一起,在介绍基本的CSS概念和最佳实践之后,讨论了核心的CSS技术,例如图像、链接、列表操纵、表单设计、数据表格设计以及纯CSS布局。每一章内容由浅入深,直到建立比较复杂的示例。之后...
本书将最有用的CSS技术汇总在一起,在介绍基本的CSS概念和最佳实践之后,讨论了核心的CSS技术,例如图像、链接、列表操纵、表单设计、数据表格设计以及纯CSS布局。每一章内容由浅入深,直到建立比较复杂的示例。之后...
本书将最有用的CSS技术汇总在一起,在介绍基本的CSS概念和最佳实践之后,讨论了核心的CSS技术,例如图像、链接、列表操纵、表单设计、数据表格设计以及纯CSS布局。每一章内容由浅入深,直到建立比较复杂的示例。之后...
part4 精通CSS(css mastery)中文版 part5 精通CSS(css mastery)中文版 part6 这些文件名搜索一下,然后下载,解压缩会自动解成一个文件 <br>本书将最有用的CSS技术汇总在一起,在介绍基本的CSS概念和...
part4 精通CSS(css mastery)中文版 part5 精通CSS(css mastery)中文版 part6 这些文件名搜索一下,然后下载,解压缩会自动解成一个文件 <br>本书将最有用的CSS技术汇总在一起,在介绍基本的CSS概念和...
part4 精通CSS(css mastery)中文版 part5 精通CSS(css mastery)中文版 part6 这些文件名搜索一下,然后下载,解压缩会自动解成一个文件 <br>本书将最有用的CSS技术汇总在一起,在介绍基本的CSS概念和...
本书将最有用的CSS技术汇总在一起,在介绍基本的CSS概念和最佳实践之后,讨论了核心的CSS技术,例如图像、链接、列表操纵、表单设计、数据表格设计以及纯CSS布局。每一章内容由浅入深,直到建立比较复杂的示例。之后...
本书将最有用的CSS技术汇总在一起,在介绍基本的CSS概念和最佳实践之后,讨论了核心的CSS技术,例如图像、链接、列表操纵、表单设计、数据表格设计以及纯CSS布局。每一章内容由浅入深,直到建立比较复杂的示例。之后...
本书将最有用的CSS技术汇总在一起,在介绍基本的CSS概念和最佳实践之后,讨论了核心的CSS技术,例如图像、链接、列表操纵、表单设计、数据表格设计以及纯CSS布局。每一章内容由浅入深,直到建立比较复杂的示例。之后...
本书将最有用的CSS技术汇总在一起,在介绍基本的CSS概念和最佳实践之后,讨论了核心的CSS技术,例如图像、链接、列表操纵、表单设计、数据表格 设计以及纯CSS布局。每一章内容由浅入深,直到建立比较复杂的示例。...
本书将最有用的CSS技术汇总在一起,在介绍基本的CSS概念和最佳实践之后,讨论了核心的CSS技术,例如图像、链接、列表操纵、表单设计、数据表格设计以及纯CSS布局。每一章内容由浅入深,直到建立比较复杂的示例。...