4.布局

布局

1.三种机制

核心：就是用CSS来摆放盒子的位置

1.普通流(平时默认用的就是普通流)：
	1.块级元素独占一行
	2.行内元素按照顺序进行左右顺序排列,并自动换行
2.浮动：
	让盒子从普通流中浮起来,主要作用是让多个块级盒子一行显示
3.定位：
	让盒子定位在浏览器的某一个位置

2.浮动（float）

1.定义：
	设置了浮动属性的元素会
		1.脱离普通流的控制
		2.移动到指定位置 
2.使用:
	float: none || left || right;
3.本质：
	相当于盒子漂浮起来了,不再占有原来的位置,所以会出现后面的盒子占用该位置        

2.1.出现的问题

问题：就是存在父元素无法进行确定内部高度的问题,同时需要浮动进行布局,因此需要进行消除浮动

解决方案：

主要是为了解决父级元素因为子级浮动而引起的内部高度为0的问题

什么情况下要清除浮动;
	1.父级没高度;
	2.子盒子浮动了;
	3.影响下面布局了;

具体如下：

1.额外标签法(隔墙法):
	在浮动元素末尾再添加一个标签如<div style="clear:both;"></div>,或者其他标签br等
	优点:通俗易懂,书写方便;缺点:添加了许多无意义的标签,结构化较差;
2.父级添加overflow属性方法:
	overflow: hidden(用这个) || auto || scroll
	优点:简介;缺点:内容增加时容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素;
3.使用after伪元素清楚浮动:
    .clearfix:after {
        content: "";
        display: block;
        height: 0;
        visibility: hidden;
        clear: both;
    }    
    .clearfix {
    	*zoom: 1; /* 如果是IE6-7,则需要该句子 */
    }
4.双伪元素清除浮动:
    .clearfix:before, .clearfix:after {
        content: "";
        display: table;
    }
    .clearfix:after {
    	clear: both;
    }
    .clearfix {
    	*zoom: 1;
    }

3.定位（position）

理解： 标准流最底层（海底） ~~ 浮动中间层（海面） ~~ 定位最上层（天空）

定位 = 定位模式 + 边偏移
    1.边偏移(方位名词): top/bottom/left/right\
    2.定位模式:
    {position:属性值;}
        static: 静态定位
        relative: 相对定位
        absolute: 绝对定位
        fixed: 固定定位

其中针对四种定位进行介绍：

1.static静态定位(了解):
	按照标准流来摆放位置,没有边偏移！！！几乎不用
	
2.relative相对定位(重要):
	在原来标准流的位置进行相对的移动
		注意:即使移动走了,原来在标准流的区域继续占有,后面的盒子仍然以标准流的方式对待它
		
3.absolute绝对定位(重要):
	元素以带有定位的父级元素为准进行移动位置
        1.完全脱标---不再占有原来的位置
        2.若是父元素没有定位,则以浏览器文档为准进行定位
	总结来说:就是绝对定位的元素将依据最近的已经定位的父元素(祖先)进行定位
		口诀----子绝父相    
		理由:父级要占有位置,子级要任意摆放,所以才会有子绝父相的说法
		
4.fixed固定定位(重要):
	是绝对定位的一种特殊形式
		1.完全脱标
		2.只认浏览器的可视窗口
	跟父元素没有任何关系
	不随滚动条滚动