文章目录1 .浮动(float ) 1.1传统网页布局的三种方式1.2标准流)普通流、文档流) 1.3浮动1.4浮动特性1.5浮动要素通常、 标准流父级1.6浮动1.7添加标签移除方法2.div CSS页面布局2.1常规页面布局2.2页面元素布局方法2.3 .布局公共属性3.1浮动属性(float ) 3.2清理属性) clear ) 3定位属性属性) overflow ) 3.5级联属性(z-index ) 4.1单列布局4.2双列布局4.3三列布局5. HTML5中的语义标记6 .命名规则6.1是规则6.2两种命名方式6.3页mody
1.float(1.1传统网页布局的三种方式
网页布局的本质——是用CSS配置箱子，也就是说把箱子配置在适当的位置。
CSS提供了三种布局方式：普通流(标准流)、浮动、定位
1.2标准流(通常流、文档流)标准流：是以决定的默认方式排列标签，标准流是最基本的布局方式
块级元素独占一行，从上到下按顺序排列。
常用元素： div、hr、p、h1~h6、ul、ol、dl、form、table行中的元素为选择器{ float:属性值； }
按顺序从左到右排列，碰到父元素的边缘时自动换行。
常用要素： span、a、I、em等1.3浮动网页布局首要标准：多块级要素纵向排列寻找标准流，多块级要素横向排列寻找浮动。
使用float属性创建浮动帧，并将其移动到一侧，直到左边缘或右边缘与块或包含另一个浮动帧的边缘接触。
浮动最典型的应用：可以将多个块级元素并排显示在一行中。
语法
选择器{ float:属性值； }属性值为none元素不浮动(默认) left元素向左浮动right元素向右浮动1.4浮动的特性浮动元素是否为标准流程
浮动的多个元素显示在一行中，并与元素对齐
注意： 浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子， 多出的盒子会另起一行对齐。
浮动元素具有内联块元素的特性。 这意味着：
如果块级别的箱子没有设置宽度，则默认宽度与父级别相同，但添加浮动时，其大小取决于内容。 浮动的箱子中间没有间隙。 1.5与浮动要素相同，请参阅先用标准流的父元素排列上下位置， 之后内部子元素采取浮动排列左右位置. 符合网页布局第一准侧.
1.6消除浮动本质：
消除浮动要素带来的影响。 如果母箱本身有高度，则不需要消除浮动。 移除浮动后，父项会根据浮动的子箱自动检测高度。 如果父类具有高度，则在不影响以下标准的情况下，输入语法
选择器{clear:属性值； }属性值说明left不允许左边有浮动元素。 right不允许右边有浮动元素。 同时拆除两侧浮动元件both在实际工作中几乎只有clear:both； 通关浮动的战略是：封闭浮动。
1.7附加标签法，也称为隔墙法，是W3C推荐的做法。
添加父级overflow属性添加父级after伪元素添加父级两个伪元素添加标记方法在浮动元素的末尾添加空标记。 例如，div style=”clear:both”/div或其他标签，例如br /等。
优点：易懂、容易写的缺点：添加很多无意义的标签，结构化比较容易
注意：这个新的空标记必须是块级元素。 2 .利用2.div CSS进行页面布局的目的：为了使页面结构清晰，便于阅读
2.1一般页面布局
2.2如何布局确定“版心”:页面主体内容所在的位置。 分析页面中的模块(通常水平放置在页面中央)。 最简单的页面布局主要由头部(header )、导航(nav )、焦点图(banner )、主体内容(content )、页面底部(footer )五部分组成。 【一般业务用顶级导航，左侧导航常用于后台页面管理】控制页面内的模块：在盒子模型中使用DIV CSS进行模块控制(通常网页由psd图构成) 2.3页面要素
从“块”(block )的顶部到底部排列“水平布局”(inline )。 每行http://www.Sina.com/)平面布局。 如果元素是浮动的，它将不再是普通文档，相当于浮动在文档之上，不占用空间，但会占用空间
缩短行距，产生文字环绕效果定位布局：
绝对定位（position:absolute）：通过页面坐标（页面左上角）的方式来定位元素。使用绝对定位后元素不会占用普通流空间相对定位（position:relative）：如果一个元素相对定位，它将以它所在的位置（即它在（普通流中的位置）为初始点，然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的初始点进行移动注意：
与定位相关的属性有left、top、right、bottom，这四个属性只有在使用定位属性（position）后才有效；只能同时使用相邻的两个属性，不能同时使用相对的两个属性 3. 布局常用属性 3.1 浮动属性（float）见上文1.3
3.2 清除属性（clear）见上文1.6
3.3 定位属性(position)定位模式决定元素的定位方式
值语义static静态定位/自动行为（默认）relative相对定位（相对于元素在文档流中的位置进行定位，在普通文档流的位置已保存）absolute绝对定位（相对于已经定义好的父元素位置进行定位，不会占用普通流空间）fixed固定定位（相对于浏览器窗口进行定位，绝对定位的一种特殊形式，脱离文档流）固定定位（fixed）小技巧：固定在版心右侧位置。
让固定定位的盒子 left: 50%. 走到浏览器可视区（也可以看做版心） 的一半位置。让固定定位的盒子 margin-left: 版心宽度的一半距离。 多走 版心宽度的一半位置就可以让固定定位的盒子贴着版心右侧对齐了。
边偏移：就是定位的盒子移动到最终位置。
边偏移属性示例描述toptop: 80px顶部偏移量，定义元素相对于其父元素上边线的距离bottombottom: 80px底部偏移量leftleft: 80px左侧偏移量rightright: 80px右侧偏移量3.4 溢出属性（overflow）当内容溢出元素边框的时候，内容如何处理
值语义scroll提供滚动机制（带有滚动条）visible默认值，内容溢出到边框以外hidden内容被修剪，溢出的部分看不见auto如果内容被修剪，则显示器会显示滚动条，以便查看其余的内容3.5 层叠属性（z-index）在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 z-index 来控制盒子的前后次序 (z轴)
语法：
网页布局的基础，所有复杂的布局都是在此基础上演变而来的。
例：一列固定宽度并自动居中
例：一列自适应宽度
#d2 {height: 200px;background-color: greenyellow;margin: auto; } 4.2 双列布局和“一列布局”类似，只是网页内容被分为了左右两部分。
例：两列自适应宽度
对于一些大型网站，特别是电子商务类网站，由于内容分类较多，通常需要采用“三列布局”的页面布局方式。
例：三列自适应宽度居中
有没有都不影响 有了之后代码的含义会更加明确
标签作用<thead></thead>表示表格头部<tbody></tbody>表示表格的主体<thead></thead>表示页面的头部<nav></nav>表示导航栏<footer></footer>表示页面或区域的底部<article></article>表示页面中独立的文档内容<section></section>用于对页面内容进行分块<aside></aside>表示页面的附属信息（定义侧边栏、广告等可以用到）6. 命名规范 6.1 遵循规则 避免使用中文命名（汉语拼音都行）不能以数字开头命名不能占用关键字用最少的字母达到理解的含义（见名知意） 6.2 两种命名方式 驼峰式命名：除第一个单词之外，其他单词首字母大写帕斯卡命名：每个单词之间用"_"连接 6.3 网页模块的命名规范相关模块：
CSS文件：