DIV+CSS布局

DIV+CSS布局

1、布局概述
（1）确定页面的版心宽度
版心：页面的有效使用面积，是主要元素以及内容所在的区域，一般在浏览器窗口水平居中显示。
在设计页面时，页面尺寸宽度一般为1200_{1920px。但是为了适配不同分辨率的显示器，一般设计版心宽度为1000}1200px。
（2）分析页面中的模块
页面主要有头部（header）、导航（nav）、焦点图（banner）、内容（content）、页面底部（footer）5部分组成。
（3）控制网页的各个模板。
2、布局常用属性
（1）标签的浮动属性
①浮动：指设置了浮动属性的标签会脱离标准文档流（标准文档流指的是内容元素排版布局过程中，会自动从左向右，从上向下进行流式排列）的控制，移动到其父标签中指定位置的过程。
通过float属性来定义浮动

选择器{float:属性值；}

left：标签向左浮动
right：标签向右浮动
none：标签不浮动（默认）
（2）清除浮动
由于浮动标签不再占用原文档流的位置，所以它会对页面中其他标签的排版产生影响。在CSS中，常用clear属性清除浮动，

选择器{ clear：属性值}

left：不允许左侧有浮动标签
right：不允许右侧有浮动标签
both：同时清除左右两侧浮动的影响
clear只能清除标签左右两侧浮动的影响。
受到子标签浮动的影响，没有设置高度的父标签变成了一条直线，即父标签不能适应子标签的高度。
（1）使用空标签清除浮动
在浮动标签之后添加空标签，并对该标签应用“clear：both”样式，可清除标签浮动所产生的影响，这个空标签可以是<div>、<p>、<br/>等任何标签。

选择器{ clear:both;}

清除浮动对父盒子的影响
（2）使用overflow属性清除浮动
对标签应用“overflow：hidden；”样式，也可以清除标签对该标签的影响，弥补了空标签清除浮动的不足。
清除子标签浮动对父标签的影响。
（3）使用after伪对象清除浮动
可以清除浮动，但是该方法只适用于IE8及以上版本浏览器和其他非IE浏览器，
注意：
①必须为需要清除浮动的标签伪对象设置“height：0;”样式，否则该标签会比其实际高度高出若干像素。
②必须在伪对象中设置content属性，属性值可以为空，如“content：""”;
为需要清除浮动的父标签应用after伪对象样式。
2、标签的定位属性
（1）定位属性
①定位模式
在CSS中，position属性用于定义标签的定位模式，使用position属性定位标签的基本书语法格式：

选择器{position:属性值}

static：自动定位（默认定位方式）
relative：相对定位，相对于其原文档流的位置进行定位
absolute：绝对定位，相对于其上一个已经定位的父标签进行定位
fixed：固定定位，相对于浏览器窗口进行定位。
②边偏移
通过边偏移属性可以精确定义定位标签的位置。
边偏移属性取值为数值或者百分比。
top：顶端偏移量，定义标签相对于其父标签上边线的距离
bottom：底部偏移量，定义标签相对于其父标签下边线的距离
left：左侧偏移量，定义标签相对于其父标签左边线的距离
right：右侧偏移量，定义标签相对于其父标签右边线的距离
（2）定位类型
①静态定位：标签的默认定位方式，当position属性取值为static时，可以将标签定位于静态位置。静态位置就是各个标签在HTML文档流中的默认位置。
②相对位置：先对于其在标准文档流中的位置进行定位，当position属性取值为relative时，可以将标签相对定位，我们可以通过偏移属性改变标签的位置，但是它在文档流中的位置仍然保留。
③绝对定位：将标签依据最近的定位（绝对、固定或者相对定位）的父标签进行定位，若所有的父标签都没有定位，设置绝对定位的标签会依据body根标签进行定位。
④固定定位：是绝对定位的一种特殊形式，以浏览器的窗口为参照物来定义网页标签。
3、布局的其他属性
（1）overflow属性
处理溢出内容的显示样式。

选择器{ overflow：属性值;}

visible：内容不会被修剪，会呈现在标签框之外（默认值）
hidden：溢出内容会被修剪，并且被修剪的内容不可见
auto：在需要时产生滚动条，即自适应所有显示的内容
scroll：溢出内容会被修剪，且浏览器会始终显示滚动条。
（2）z-index属性
当对多个标签同时设置定位时，定位标签之间有可能会发生重叠，该属性可以调整标签的堆叠方式，取值可以是正整数，负整数和0，默认状态下为0，并且该属性取值越大，设置该属性的定位状态在层叠标签中越居上。
4、布局类型
（1）单列布局：单列布局从上到下分别为头部、导航、焦点图、内容和页面底部，每个模块单独占据一行，且宽度与版心相等。
（2）两列布局：网页内容被分割成两部分
（3）三列布局：主体内容分割为左中右三部分
无论布局类型是单列布局、两列布局还是三列布局，为了网站的美观，网页中的一些模块，例如头部、导航、焦点图或者页面底部的版权等经常需要通栏显示，将模块设置为通栏后，无论页面放大或者缩小，该模块都将横铺于浏览器窗口中。
（4）全新的HTML5结构元素
①header标签：一种具有引导和导航作用的结构标签，该标签包含所有通常放在页面头部的内容，也可以包含网站logo图片、搜索单或者其他内容。
②nav标签；用于定义导航链接，是HTML5新增的标签。可以用于传统导航条、侧边栏导航、页内导航、翻页导航，nav标签也可以用于其他导航链接组中，并不是所有的链接都要放在nav标签，只需要将主要的和基本的链接放进nav标签即可。
③footer标签：用于定义一个页面或者区域的底部，可以包含所有放在页面底部的内容。
④article标签：代表文档、页面或者应用程序中与上下文不相关的独立部分。
⑤section标签：表示一段标题性的内容，一般会带有标题，主要应用在文章的章节中。
section不仅仅是一个普通的容器标签，当只是为了样式化或者方便脚本使用时，应该使用div标签。
如果article标签、aside标签或者nav标签更符合使用条件，那么不要使用section标签。
没有标题的内容模块不要使用section标签定义。
⑥aside标签：用来定义当前页面或者文章的附属信息部分，它可以包含与当前页面或者主要内容相关的引用、侧边栏、广告、导航条等有别于主要内容的部分。主要用法为：
被包含在article标签内作为主要内容的附属信息。
在article标签之外使用，作为页面或者网站的附属信息部分。最常用的使用形式是侧边栏。