基于CSS盒子模型float属性解析.pdf

《基于CSS盒子模型float属性解析.pdf》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、学术探讨应用技术与研究2015年第4期基于CSS盒子模型float属性解析蒋昀昕(福建卫生职业技术学院公共基础部，福建福州350101)[摘要]本文介绍了盒子模型与标准文档流的概念，阐述了盒子在标准流中的定位原则。重点解析了CSS中的浮动属性，并通过具体的网页布局实例进一步说明浮动属性的用法。[关键词]CSS；浮动；盒子模型；标准文档流中图分类号：TP311文献标识码：A文章编号：1008-66609(2015)04-0060-03流”。HTML文档中的元素可以分为两大类：块级元素和行1引言内元素。盒子模型是CSS控制页面时一个重要的概念。只

2、有掌握了盒子模型以及其中每个元素的用法，才能真正地控制好页面中的各个元素。本文主要介绍盒子模型的基本概念，以及在标准流情况下的盒子相互关系，解析了盒子模型的float属性。2盒子模型的概念所谓盒模型，就是浏览器为页面中的每个HTML元素生成的矩形盒子。这些盒子们都要按照可见版式模型（visualformattingmodel）在页面上排布。可见的页面版式主要由三个属性控制：position属性、display属性和float属性。其中，position属性控制页面上元素间的位置关系，display属性控图1标准盒子模型制元素是堆叠、并排或是根

3、本不在页面上出现，float属性提供控制的方式，以便把元素组成多栏布局[1]。(1)块级元素（blocklevel）：总是以一个块的形式表现出盒子模型是CSS的基石之一，它指定元素如何显示以及来，并且跟同级的兄弟块依次竖直排列，左右自动伸展，直到各元素之间如何相互交互。页面上的每个元素都被浏览器包含它的元素的边界，在水平方向不能并排。看成是一个矩形的盒子，这个盒子由元素的内容、填充、边框(2)行内元素（inline）：对于文字这类元素，各个字母之间和边界组成。网页就是由许多个盒子通过不同的排列方式横向排列，到最右端自动折行，这就是另一种元素，

4、称为“行（上下排列，并列排列，嵌套排列）堆积而成。每个HTML元内元素”。行内元素不占据单独的空间，依附于块级元素，行素都可以看作是一个装了东西的盒子。盒子里面的内容到内元素没有自己的区域。它同样是DOM树中的一个节点，盒子的边框之间的距离即填充(padding)，盒子本身有边框在这一点上行内元素和块级元素是没有区别的。(border)，而盒子边框外和其它盒子之间，还有边界(margin)。4盒子在标准流中的定位原则如图1所示，默认情况下盒子的边框是无，背景色是透明，所如果要精确地控制盒子的位置，就必须对margin有更深以我们在默认情况下看

5、不到盒子。入的了解。Padding只存在于一个盒子内部，所以通常它不3标准文档流会涉及与其它盒子之间的关系和相互影响的问题。Margin标准文档流（NormalDocumentStream），简称“标准流”，则用于调整不同的盒子之间的位置关系，因此必须要对mar-是指在不使用其它的与排列和定位相关的CSS规则时，各种gin在不同情况下的性质有更深入的了解[2]。元素的排列规则。通俗地说，将窗体自上而下地分成一行(1)行内元素之间的水平margin：当两个行内元素紧邻行，并在每行中按从左至右的顺序排放元素，即称为“文档时，它们之间的距离为第1个

6、元素的margin-right加上第2个——————————————作者简介：蒋昀昕，女，安徽合肥人，讲师，硕士，研究方向：优化算法。-60-应用技术与研究学术探讨2015年第4期元素的margin-left。预料。浮动图片元素则不需要，因为图片本身有其默认的宽(2)块级元素之间的竖直margin：两个块级元素之间的度。距离不是margin-bottom与margin-top的总和，而是两者中的在标准流中，块级元素的盒子都是上下排列，行内元素较大者。这个现象称为margin的“塌陷”现象，意思是较小的的盒子都是左右排列，如果仅仅按照标准流的方

7、式进行布margin塌陷到了较大的margin中。局，就只有几种可能性，限制太大。CSS的设计者也想到了(3)嵌套盒子之间的margin：当一个