CSS页面布局
概述
页面布局主要要有整体意识，合理利用模块化，由外向内。实现网页页面布局一般有表格布局、框架布局、DIV+CSS页面布局三种方法。
表格布局实现简单，各个元素可位于表格独立的单元格中，相互影响较小，兼容性好。但在某些情况下，表格要在全部下载完后才能显示，影响体验，另外在多重表格嵌套的情况下，代码可读性较差，所以除了应对规模小的网站，一般不采用表格布局。
框架布局是利用框架对页面空间进行有效的划分，每个区域可显示不同的内容。其使得网页简洁清晰，下载更快，但可能会有兼容性问题，所以一般也偏向用于规模小的网站。
DIV+CSS页面布局在应对大规模、较复杂的网站时优势明显。其代码精简清晰、运行速度快、容易维护，对搜索引擎的支持更友好。
网页区域划分
网页主要包括页头、banner、导航区域、内容、页脚等几个区域。
页头即网页的页眉，用于定义页面标题。banner横幅广告，也可以是其他内容。导航区域可以看出网站的定位，通常以导航条的形式出现。内容即网页的主体内容。页脚位于网站最底，通常用来展示版权信息、法律声明信息、网站备案信息、联系方式等。
元素类型
（1）块元素：块元素在页面中以区域块的形式出现，每个块元素通常都会独自占据一整行或多个整行、可以对其设置宽度、高度、对齐等属性。常见有<h1>~<h6>、<p>、<div>、 <ul>、<ol>、<li>等，<div>最常用。
（2）行内元素：行内元素也叫内联元素或内嵌元素，一个行内元素通常会和其前后的其他行内元素显示在同一行中，不占独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置高度、对齐等属性，常用于控制页面中文本的样式。常见有<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<a>、<span>等，<span>最典型。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> </title>
<style type="text/css">
p{
background-color: pink;
}
ol{
background-color: red;
}
span{
background-color: yellow;
}
i{
background-color: #cff;
}
div{
background-color: #ffc;
}
</style>
</head>
<body>
<p>p--标记 ------------块元素</p>
<ol>ol--标记----------块元素</ol>
<span>span标记---------行内元素</span>
<i>i标记---------行内元素</i>
<div>div标记--------块元素</div>
</body>
</html>
（3）块元素与行内元素转换：使用display属性对元素的类型进行转换。常用属性值inline将显示为行内元素（行内元素默认的display属性值），block将显示为块元素（块元素默认的display属性值），inline- block将显示为行内块元素，可对其设置宽度、高度和对齐等属性，但是该元素不独占一行，none将被隐藏，不显示。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> </title>
<style type="text/css">
p{
background-color: pink;
display: inline;
}
ol{
background-color: red;
display: inline;
}
span{
background-color: yellow;
display: block;
}
i{
background-color: #cff;
}
div{
background-color: #ffc;
display: inline;
}
</style>
</head>
<body>
<p>p--标记 ------------块元素</p>
<ol>ol--标记----------块元素</ol>
<span>span标记---------行内元素</span>
<i>i标记---------行内元素</i>
<div>div标记--------块元素</div>
</body>
</html>
定位
CSS有三种基本定位机制，为普通文档流、浮动、定位，普通文档流中元素位置由元素在HTML中的位置决定。块元素之间的垂直距离是由元素的垂直外边距计算出来的。行内框在一行中水平布置，可使用水平内边距、边框和外边距来调整各框之间的间距。
定位的含义是允许定义某个元素脱离其原来在普通文档流应该出现的正常位置，而是设置其相对于父元素、某个特定元素或浏览器窗口本身的位置。利用定位属性，可以建立列式布局，将布局的一部分与另一部分重叠，这种方法可以完成原来需要使用多个表格才能完成的任务，这种使用CSS定位的好处是可以根据浏览器窗口的大小进行内容显示的自适应。通过使用定位属性（position）可以选择4种不同类型的定位，这会影响元索的显示位置:定位属性的取值可以是static（静态定位）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）。
（1）静态定位：元素默认的定位方式，是各个元素在HTML文档流中的默认位置，在静态定位中无法通过位置偏移属性top、 bottom、left或right 来改变元素位置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
P{
border: solid 5px blue;
text-align: left; /* 左对齐 */
width: 110px;
height: 20px;
}
</style>
</head>
<body>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
</body>
</html>
（2）相对定位：普通文档流的一部分，相对于本元素在文档流原来出现位置的左上角进行定位，可以通过位置偏移属性改变元素位置。虽然其移动到其他位置，但该元素仍占据原来未移动时的位置，该元素移动后会导致其覆盖其他框元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
P{
border: solid 5px blue;
text-align: left; /* 左对齐 */
width: 110px;
height: 20px;
}
p.relative{
position: relative; /*选定元素为相对定位*/
top: 20px;
left: 50px;
background: blue;
color: white;
}
</style>
</head>
<body>
<p>hello world</p>
<p class="relative">hello world</p>
<p>hello world</p>
</body>
</html>
（3）绝对定位：绝对定位脱离文档流，不占据其原来未移动时的位置，是相对于父级元素或更高的祖先元素中有relative定位并且离本元素层级关系上最近元素的左上角进行定位。在祖先元素没有设置relative定位时则默认相对于body进行定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
#box{
theight: 200px;
width: 300px;
background: red;
position: relative; /*块元素使用相对定位*/
margin: 0 auto; /*块元素自动居中*/
}
#box p{
text-align: center;
border: solid 5px blue;
width: 100px;
height: 15px;
background: pink;
}
#box p.absolute{
background: yellow;
position: absolute; /*使用绝对定位方式*/
top: 10px;
left: 40px;
}
</style>
</head>
<body>
<div id="box">
<p>hello world</p>
<p class="absolute">hello world</p>
<p>hello world</p>
</div>
</body>
</html>
（4）固定定位：绝对定位的一种特殊形式，以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可设置固定定位。当对元素设置固定定位后，该元索将脱离标准文档流的控制，始终依据浏览器窗口的左上角来定义自己的显示位置。不管浏览器滚动条如何滚动、浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置
（5）定位元素层叠：多个块元素形成多个层，可使用z-index属性对层进行层叠设置。z-index属性设置一个定位元素沿z轴的位置，z轴定义为垂直延伸到显示区的轴，为正数则离用户更近，为负数表示离用户更远，即z-index属性值大的元素顺序在上
浮动
浮动的框可以向左或向右移动，直到其外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档普通流中，所以文档普通流中的块元素表现得就像浮动框不存在一样
浮动属性
float属性：在CSS中，通过float属性可以实现元素浮动，且可以定义向哪个方向浮动。任何元素都可以浮动，浮动元素会生成一个块级框，无论本身是何种元素
clear属性：clear属性规定元素的哪一侧不允许出现浮动元素。在CSS中，通过自动为清除元素增加上外边距实现
img{
float:left; /* 左浮动*/
clear:both; /* 左右两侧都不允许出现浮动*/
}
浮动的实践例子
（1）创建三个div不浮动
（2）调整框1向左浮动，视觉上框2消失，但实际上没有消失，而是隐藏在框1下面。原因是浮动元素会脱离原来的文档流，空间会释放，框1释放原来的空间后，框2就会自动上去
（3）使框1向右浮动，可以看见框2
（4）若让框2也向左浮动，视觉上框3消失，实际上框3隐藏在框1下面
（5）若让三个框都向左浮动，可以看到
（6）框1向左浮动直到碰到包含框，另外两个框也向左浮动，直到碰到前一个浮动框。三个框都向左浮动，如果包含框太窄，水平排列只能容纳两个框，其他框向下移动，直到有足够的空间，效果如下
（7）若浮动元素的高不一样，那么向下移动的时候可能会被其他浮动元素“卡住”，效果如下
盒子模型
概述
HTML文档中的每个元素都被描绘成矩形盒子，这些矩形盒子通过一个模型来描述其占用的空间，这个模型称为盒子模型。盒子模型用四个边界描述：margin（外边距）、border（边框）、padding（内边距）、content（内容区域）。
盒子模型中最内部分及content所占高度由height属性决定，内容所占宽度由width属性决定，包围内容的是padding，内边距指显示的内容与边框之间的间隔距离，并且会显示内容的背景色或背景图片，包围内边距的是边框，边框以外是外边距，外边距指该盒子与其他盒子之间的间隔距离。如果设定背景色或者图像，则会应用于由内容和内边距组成的区域。
网页其实是由多个盒子嵌套排列的结果
外边距
外边距指盒子模型的边框与其他盒子之间的距离，使用margin属性定义，margin默认值是0。外边距没有继承性，给父元素设置的margin值不会自动传到子元素中。
margin可以有1~4个值，例如margin: 20px; 表示4个方向的外边距都是20px；margin: 20px 5px; 表示上下外边距是20px,左右外边距是5px；margin: 10px 5px 15px; 表示上外边距是10px,左右外边距是5px,下外边距是15px；margin: 10px 5px 15px 20px; 表示上外边距是10px,右外边距是5px,下外边距是15px,左外边距是20px
margin外边距合并的原则有：（1）块级元素的垂直相邻外边距会合并，且其垂直相邻外边距合并之后的值为上元素的下外边距和下元素的上外边距的较大值；（2）行内元素实际上不占上下外边距，行内元素的左右外边距不会合并；（3）浮动元素的外边距不会合并。
（对参数进行调整，观察各参数对边距的影响，效果如下）
CSS边距
元素的边框（border）是围绕元素内容和内边距的一条或多条线，CSS中使用border属性设置元素边框的样式、宽度和颜色。格式为border：宽度 样式 颜色;
边框宽度可通过border-width属性指定，为边框指定宽度可以指定长度值，或使用thin、medium、thick关键字。边框颜色可使用border-color属性来设定，可以通过实例查看效果如下
所以也可以利用对边框样式的属性设置来实现某些特殊边框，效果如下
内边距
内边距指盒子模型的边框与显示内容之间的距离，使用paddig属性定义
比如设置h1元素的各边都有10像素的内边距h1 {padding: 10px;}
例如按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值h1 {padding: 5px 6px 7px 8px;}
同理可以通过padding-top、padding -right、padding-bottom、 padding-left四个属性分别设置上、右、下、左内边距
DIV+CSS 页面布局
两栏布局
两栏布局是将网页分为左侧和右侧两列，这种布局方式也是网络中用得比较多的布局。两栏布局的实现方法为：（1）创建两个层，再设置两个层的宽度；（2）设置两栏并列显示。
多栏布局
将一个元素中的内容分为两栏或多栏显示，并且确保各栏中内容的底部对齐，叫作多栏布局。多栏布局先把网页通过DIV块划分成多个区域，再在这些区域内添加相关内容，以达到网页制作的要求。
总结
安排了一段时间进行有关CSS页面布局的实践，在此期间也有参考一些很好的资料，通过实践深入理解了其中的一些技巧，学到了很多，但通过查阅资料也发现相关的技巧还有很多，所以也会继续进行相关内容的学习并进行CSS页面布局技巧的积累完善。
