盒子模型
知识要点：
HTML页面实际上就是由一堆盒子组成的。
盒子模型(Box Model )是从CSS 诞生之时便产生的一个概念，每个盒子都有边界( margin )边框( border )、填充( padding )和内容( content ) 4个属性。
其中填充、边框、边界属性分别由CSS3的padding.border、margin属性设定。
而内容属性宽度和高度则由width属性和height属性设定。
内容常指文本、图片等元素，但是也可以指嵌套的HTML元素;填充是指HTML元素的内容与其边框之间的填充厚度﹔边框是指盒子的外围;边界是指HTML元素与其他元素之间的距离。
每个HTML元素均可以看作一个盒子，盒子存在4条边，因此边框、填充和边界属性均包含4个部分，分别是上( top )、右( right )、下( bottom )、左( left )
width和height属性只能用于设置内容content的大小，而内容只是盒子中一个部分，盒子还有其他3个属性border、padding以及margin，这些属性的设置都将影响到盒子的实际尺寸以及所占据空间的大小。
一个盒子实际的大小是由“内容＋填充＋边框”所决定的，而所占据空间的大小则是由“内容＋填充＋边框＋边界”所决定的。
例子：
<!doctype html>
<html>
<head>
<meta charset= "utf-8">
<title>盒子的大小</title>
<style type="text/css">
*{
padding:Opx;
margin:0px;
}
#t{
width:200px;
height:150px;
padding: 10px 20px;
border:5px solid red;
margin:10px;
}
</style>
</head>
<body>
<div id="t">
宽度:200px<br/>
高度:150px<br/>
填充:上下10px左右20px<br/>
边框: 5px<br/>
边界:10px
</div>
</body>
</html>
注意：
灵活利用盒子的相关属性，如边距border.内边距padding和外边距margin，我们才有能力应付各种各样的排版要求。
列子：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>元素内容的垂直居中对齐</title>
<style type="text/css" >
#cat{
width:120px;
height:30px;
border: 1px solid lightgray;
color:red;
font-size:12px)
</style>
</head>
<body>
<div id="cat">fate</div>
</body>
</html>
注意：
在盒子模型中，content、padding以及border都是盒子内部的距离，而margin则表示盒子自身之外所占据的距离。
盒子实际大小的计算以及三种关系下margin属性设置的效果。盒子模型是页面布局的基础，只有深入理解了盒子模型，才能灵活自如的实现页面的布局设计。
标准文档流
知识要点：
标准文档流是指浏览器读取HTML内容后对元素进行排列的一种标准方式，在这种标准方式中，浏览器会根据读取到标签的先后顺序来排列HTML元素，在显示网页时，元素按照从左到右、自上而下的顺序进行排列。
行内元素与块状元素从直观上存在以下3点区别:
(1)排列方式不同。
(2)内嵌元素不同。
(3)属性设置不同。
注意：
页面元素将按照其出现的顺序从左到右，自上而下的方式进行排列，而在CSS中又将页面元素分为行级元素和块状元素，行级元素允许多个元素存在于同一行，块状元素则独占一行。
页面中的行级元素和快状元素存在一些差异，但可以通过display属性进行相互转换。
5946
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
