HTML的页面元素具有：宽度，高度，位置等属性，如果通过控制这些属性就可以任意控制元素在页面中的位置和其宽度和高度。
为了讲清楚CSS是如何布局页面元素，如何和页面的元素协作来完成各种布局。网页其实就是由许多不同的盒子的排列方式堆积而成。
一、盒模型
1、盒子的尺寸、周长和位置。元素的高（height）、宽(width)、边距（border）、内边距（padding）和外边距（margin）属性来决定最后盒子在浏览器中的显示（当然这个前提是该元素的display的属性不为'none'）。在浏览器中的大致模型如下图
在浏览器中元素就是这样存在着。这里在不同的浏览器又会表现出不同。主要是IE和W3C标准之间的在计算内容宽度时，出现一些差别。
元素盒子大小的计算：
盒子宽度
左外边距（margin-left）+左边框（border-left）+左内边距（padding-left）+内容（content）+右外边距（margin-right）+右边框（border-right）+右内边距（padding-right）
这个计算方式对不同浏览器会有所不同，
在IE下的盒子模型，如果文档中没有加文档类型(DOCTYPE)那么IE7以下的就安装（Quirk模式）来解析和渲染页面。
随着CSS的发展，在CSS3中出现了弹性盒模型，该模型用于决定元素在盒子中的分布方式以及如何处理盒子的可用空间。
由于该该模型提出的时间比较晚（2009年），到现在还没有被大多数浏览器实现。
二、文档流
提出这么一个概念，那么什么是文档流呢？百度百科给的一个定义是【
文档中可显示对象在排列时所占用的位置】，其实这已经很直白了但是对于刚接触这个概念的人来说还是有点不知所云。那么咱先就当从概念本身来讲两层意思，对象在文档中是显示的也就是元素的display的值不是none,其次就是元素排列在文档中的位置。下面就具体的展示文档流。
1、对于块级（block）元素（不设置CSS设置该元素的position和float属性，这里只是默认的情况）来说，它们在文档中占据一行
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<title>文档流--测试</title>
-
<meta charset="GBK">
-
<style>
-
div{
-
height:20px;
-
border:1px solid red;
-
}
-
</style>
-
</head>
-
<body>
-
<div id="div1"></div>
-
<div id="div2"></div>
-
<div id="div3"></div>
-
</body>
-
</html>
这三个div在文档中的位置如图所示：
2、还有行内（inline）元素，在文档中只占有其本身的大小的区域并且行内元素是相互挨着，宽度随内容而变化
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<title>文档流--测试</title>
-
<meta charset="GBK">
-
<style>
-
img{
-
height:40px;
-
width:40px;
-
border:1px solid red;
-
}
-
</style>
-
</head>
-
<body>
-
<img id="img1"></div>
-
<img id="img2"></div>
-
<img id="img3"></div>
-
</body>
-
</html>
行内元素在文档中的排列形式如下图：
当元素在文档中的位置还会受到元素的display,postion,float的属性的影响。到这里关于文档流的内容基本就是这些，在HTML文档中通过CSS来对元素进行布局和定位时，这些概念对于理解和使用postion是非常有帮助。
如果没有postion是static也是文档默认的属性，文档中的元素就属于正常流，显示的顺序是按照从左到右边，从上到下的顺序，这就必须得考虑是块级还是行内。
三、块级元素和行内元素
这里列出HTML中的块级和行内的元素
内联元素(inline element)
a - 锚点
b - 粗体(不推荐)
br - 换行
em - 强调
font - 字体设定(不推荐)
i - 斜体
img - 图片
input - 输入框
label - 表格标签
select - 项目选择
small - 小字体文本
span - 常用内联容器，定义文本内区块
strike - 中划线
strong - 粗体强调
sub - 下标
sup - 上标
textarea - 多行文本输入框
tt - 电传文本
u - 下划线
块级元素(block element)
address - 地址
blockquote - 块引用
div - 常用块级容易，也是css layout的主要标签
dl - 定义列表
fieldset - form控制组
form - 交互表单
h1~h6 - 标题
hr - 水平分隔线
ol - 排序表单
p - 段落
pre - 格式化文本
table - 表格
ul - 非排序列表
四、元素的定位
将元素放置在文档中哪个具体的位置，这时就需要用到CSS中的利器了。position用来说明元素在文档流中是属于那种形式
position: static | relative | absolute | fixed，这里有四种定位。另外还有元素的top,left,right,bottom来精确地设定元素相对包含该元素的父元素的位置。
1、position:static,此时定位方式是静态定位，这是文档中所有元素默认情况下的定位方位，也就是说如果你不对该元素的display属性进行设置那么此时的position就是static，该元素是正常流。
2、position:relative，相对定位。元素不同脱离文档流，参考自身位置通过top,bottom,left和right进行定位，元素仍保持其未定位前的状态，它原本所占的空间仍然保留，所以相对定位的元素可能覆盖其他元素。
3、position:absolute或fixed，绝对定位和固定定位。元素脱离了文档流，元素原先在正常文档流中所占的空间被关闭，就像该元素不存在。但是绝对定位和固定定位还是有些差别。
绝对定位(absolute)是相对最近已经定位的祖先元素，如果没有已定位的祖先元素，那么它的位置相对于最初的包含块。
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<title>文档流--测试</title>
-
<meta charset="GBK">
-
<style>
-
div{
-
height:40px;
-
width:40px;
-
border:1px solid red;
-
}
-
#parent{
-
position:relative;
-
height:100px;
-
width:80px;
-
border:1px solid green;
-
}
-
#div2{
-
position:absolute;
-
background:lightgray;
-
top:20px;
-
left:20px;
-
}
-
#div1{
-
background:pink;
-
}
-
#div3{
-
background:lightblue;
-
}
-
</style>
-
</head>
-
<body>
-
<div id="parent">
-
<div id="div1">div1</div>
-
<div id="div2">div2</div>
-
<div id="div3">div3</div>
-
</div>
-
</body>
-
</html>
绝对定位通过top,left,right,bottom来实现对元素的精确定位。
固定定位（fixed）是绝对定位的一种特殊形式，是相对于浏览器的窗口的，即使设置为fixed的元素固定在浏览器的某个位置，拖动滚动条该元素的位置也不会变动。
五、元素的浮动(float)
在布局中经常定义float属性定义元素在哪个方向浮动，起初浮动是为了让
![]()
周围的文字围绕在图片周围。现在在CSS中，任何元素都可以浮动，浮动元素产生一个块级宽，而不论元素本身是什么元素。
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<title>元素的浮动--测试</title>
-
<meta charset="GBK">
-
<style>
-
#parent{
-
position:relative;
-
height:200px;
-
width:100px;
-
border:1px solid green;
-
}
-
a{
-
float:right;
-
width:100px;
-
height:50px;
-
border:1px solid red;
-
}
-
</style>
-
</head>
-
<body>
-
<div id="parent">
-
<a>你好</a>
-
<a>您好</a>
-
</div>
-
</body>
-
</html>
行内元素向右浮动后
但是，浮动在布局中有一个缺陷就是浮动元素脱离了原来的文档流，这时包含这些浮动元素的就是空的。如图
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<title>元素的浮动--测试</title>
-
<meta charset="GBK">
-
<style>
-
#parent{
-
border:1px solid green;
-
}
-
.f-1{
-
float:left;
-
height:30px;
-
width:60px;
-
border:1px solid red;
-
}
-
</style>
-
</head>
-
<body>
-
<div id="parent">
-
<div class="f-1" id="div1">div1</div>
-
<div class="f-1" id="div2">div2</div>
-
<div class="f-1" id="div3">div3</div>
-
</div>
-
</body>
-
</html>
如何解决，这里要用到clear属性。有三种解决方案，
方案一，在浮动元素后面添加空div元素clear:both,缺点是页面浮动元素过多时，会增加很多空的div；
方案二，在父级元素div定义overflow:hidden，此时浏览器会自动检测浮动区域的高度，从而是父容器高度包含子容器的高度，缺点是超出的部分会被隐藏。在没有是使用position:absolute或者fixed时可以使用；
方案三，在父级元素div，定义伪类:after和zoom，通过after的伪类:after和IE hack来实现，完全兼容所有主流浏览器（强力推荐）。
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<title>元素的浮动--测试</title>
-
<meta charset="GBK">
-
<style>
-
#parent{
-
border:1px solid green;
-
zoom:1;/*兼容IE*/
-
}
-
#parent:after{
-
visibility:hidden;
-
display:block;
-
font-size:0;
-
content:"";
-
clear:both;
-
height:0;
-
}
-
.f-1{
-
float:left;
-
height:30px;
-
width:60px;
-
border:1px solid red;
-
}
-
</style>
-
</head>
-
<body>
-
<div id="parent">
-
<div class="f-1" id="div1">div1</div>
-
<div class="f-1" id="div2">div2</div>
-
<div class="f-1" id="div3">div3</div>
-
</div>
-
</body>
-
</html>
得到的效果
到此，与布局相关的CSS知识基本上这些了，也许在CSS3中还存在一些没有涉及，但是这些已经能够全面地理解CSS在页面布局上的用处。这里对CSS做一个比较系统全面的总结让自己能得到进一步的提升！如文中有欠妥或者错误，还望看到的朋友不吝指出，我会进一步改进向真理靠近。
阅读(2472) | 评论(0) | 转发(1) |
