CSS网页布局基础、网页布局案例
网页布局有很多种方式，一般分为以下几个部分：头部区域、菜单导航区域、内容区域、底部区域
头部区域位于整个网页的顶部，一般用于设置网页的标题或者网页的 logo
菜单导航条包含了一些链接，可以引导用户浏览其他页面
底部区域在网页的最下方，一般包含版权信息和联系方式等。
float属性
有3个属性值：left、right、none
特点：元素会左移，或右移，直到碰触到容器为止
设置了浮动的元素，仍旧处于标准文档流中
清除浮动的方法：
clear属性－－常用clear:both
clear:left;clear:right
同时设置width:100%（或固定宽度）＋overflow:hidden;
横向两列布局
网页布局最常见的方式之一
主要应用技能：float属性--使纵向排列的块级元素，横向排列
margin属性--设置两列之间的间距
如果使用了浮动，使当前层的父层看不到且后面的层受到影响，可以对父层使用overflow:hidden或者后面的层使用clear:both来清除浮动。
绝对定位布局
通过设置position属性实现，是CSS中规定的第三种定位机制，能够实现横向多列布局及较为复杂的定位，如带有遮罩层效果的提示框、固定层效果、全屏广告等。
position属性拥有3种定位形式：1 静态定位（static）2 相对定位（relative）3 绝对定位（absolute、fixed）
相对定位
特点：相对于自身原有位置进行偏移，仍处于标准文档流中，随即拥有偏移属性和z-index属性
绝对定位
特点：建立了以包含块为基准的定位，完全脱离的标准文档流，随即拥有偏移属性和z-index属性
未设置偏移量特点：无论是否存在已定位祖先元素，都保持在元素初始位置，且脱离了标准文档流
设置偏移量：偏移参照基准：无已定位祖先元素，以<html>未偏移参照基准，已有定位祖先元素，以距其最近的已定位祖先元素为偏移参照基准
横向两列布局
使用absolute实现横向两列布局--常用于一列固定宽度，另一列宽度自适应的情况
主要应用技能：relative--父元素相对定位 absolute--自适应宽度元素绝对定位
注意：固定宽度列的高度>自适应宽度列的高度
浙公网安备 33010602011771号