页面布局基础

元素浮动

 float特性：none不浮动
          left/right:向左/向右浮动

熟练理解w3school中对浮动的讲解

定位

固定定位（fixed）

位置是相对于浏览器窗口变动的

相对定位（relative）

相对于它本身的位置进行位置变化的

绝对定位（absolute）

相对于第一个定过位的父元素（不包含使用margin等方式确定位置）位置进行定位的；当其父元素都没有定过位，则以body的位置开始定位。


1.在绝对定位中，要将元素内容放在某形状中，用到clip
clip(1px 2px 3px 4px)---依次表示上右下左方向的值
注意：上，左的值越大，形状越小，被裁减的越多；下，右的值越大，形状越大，被裁减的越少。
2.绝对定位中，处理溢出采用overflow,它的值有
visible（不裁剪，默认）
hidden(裁剪从而不显示超出部分的内容)，
scroll（提供滚动条）
 auto.（自动）

bfc（块级格式化上下文）和ifc（行级格式化上下文）环境

bfc

布局规则：

 1.内部所有盒子按照垂直方向放置。
 2.相邻的盒子 垂直方向上margin值会重叠。
 3.与浮动相同，内部盒子会以bfc的左/右边线接触。
 4.BFC的区域不会与浮动盒子重叠。
 5.bfc环境中的子元素与外界分离，不会影响外面的元素，外面的元素也不会对立面的元素产生影响。
 6.bfc中的浮动元素会参与计算。

触发方式：

 1.float的值不为none
 2.定位方式为绝对定位以及固定定位
 3，display：值为inline-block;table-cell;table-caption;flex;inline-flex;
 4.overflow不为visible.

ifc

布局规则：

 1.内部所有盒子按照水平直方向放置。
 2.一行上的所有元素会形成一个行框。
 3.行框的宽度为包含框的宽度，高度则是以行框中元素最高的高度为准。
 4.浮动元素不会在行框中，且浮动元素会压缩行框的高度。
 5.当行框的宽度容纳不了子元素时，子元素会自动换到下一行，并且在下一行又形成一个行框。
 6.行框内的元素遵循水平和垂直方向的对齐方式。