CSS布局

布局方式

一列布局




一列布局




head
main
footer

效果：

二列布局




二列布局





    left
    right

效果：

三列布局




三列布局




    
    left
    设计首页的第一步是设计版面布局。就象传统的报刊杂志编辑一样，我们将网页看作一张报纸，一本杂志来进行排版布局。 虽然动态网页技术的发展使得我们开始趋向于学习场景编剧，但是固定的网页版面设计基础依然是必须学习和掌握的。它们的基本原理是共通的，你可以领会要点，举一反三。
    right

效果：

混合布局




混合布局





    head


    left
    
        sub_left
        
        sub_right
        
    

footer

效果：

布局分析

1、标准流

常见块级元素：div,H1~H6,table,p,ol,ul,li（独占一行）
常见内联元素：a,span,img,input（当前一行位置不够时被挤到下一行）

2、定位布局

static 标准文档流，默认设置的值
relative 相对于自己原来的位置进行定位
absolute 相对于父类元素（非static）进行定位。父类元素需要是absolute或者relative。
fixed 相对于窗口进行定位，不受限于父元素。
inherit 继承父元素的定位。

3、z-index

z-index只作用于带有定位属性的元素（position:static除外），普通元素中也存在层级关系（margin-top:-50px）

z-index可以设置元素的叠加顺序，但是要依赖定位属性
z-index大的元素会覆盖z-index小的元素
z-index为auto的元素不参与层级比较
z-inde为负值，元素被普通流中的元素覆盖

注意：父元素的层级大于相邻元素的层级不论层级多小,都可以继承父元素的层级,大于相邻元素层级。

4、盒子模型和定位

盒子模型：通过改变盒子的外边或者内边来实现元素的移动
定位：通过元素的位置移动来改变出现在网页的相对位置中

例如：实现登录页面水平和垂直居中，div先相对于网页left和top50%fixed定位，然后使用margin-left和margin-top负div宽和高的一半，可以得到居中的登录页面

侧边栏案例案例分析：

效果：

（内容参考慕课网）