前端第四天

传统网页布局:
1.标准流
（1）块级元素独占一行，从上到下顺序排列
常用元素：div、hr、p、标题标签、ul、ol、dl、form、table
（2）行内元素按照顺序，从左到右顺序排列，碰到父元素边缘自动换行
常用元素：span、a、i、em
2.浮动
float属性创建浮动框，将其移动到一边，直到左边缘或右边缘及包含块或另一个浮动框的边缘
选择器{float：属性值（none | left | right）}
（1）浮动元素会脱离标准流
（2）一行显示并且元素顶部对齐
（3）具有行内块元素的特性（有了浮动，不需要转换元素就直接给高度宽度）
注意点：
1.浮动和标准流的父盒子搭配（先用标准流的父元素排列上下位置，之后内部子元素才去浮动排列左右位置）
2.一个元素浮动，理论上其余的兄弟元素也要浮动
3.浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流
清除浮动：
1.选择器{clear：属性值（left、right、both）}
2.额外标签法
（在浮动元素末尾添加一个空的标签
例如

或者）
要求新的标签必须是块级元素
3.父级添加overflow属性（hidden、auto、scroll）
4.父级添加after伪元素
.clearfix:after{
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix{
*zoom:1;
}
5.父级添加双伪元素
.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{
*zoom:1
}
清除浮动原因：
1.父级没高度
2.子盒子浮动
3.影响下面布局

若最后一个盒子掉下来并没有并排，可给最后一个盒子定义一个类重新赋值margin。
3.定位
将盒子定在某一个位置，按照定位的方式移动盒子
定位=定位模式（决定定位方式）+边偏移（元素最终位置）
定位模式：position（static（静态） | relative（相对） | absolute绝对 | fixed（固定） sticky（粘性））
静态：选择器{position：static；}
按照标准流特性摆放位置，无边偏移
相对：选择器{position：relative；}
相对原来位置移动，原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待
绝对：选择器{position：absolute；}
移动位置的时候，若无祖先元素或者祖先元素没有定位则以浏览器为准定位；若祖先元素有定位（相对、绝对、固定），则以最近一级的祖先元素为参考点移动位置
固定：选择器{position：fixed；}
固定于浏览器可视区的位置，跟父元素无关，不随滚动条滚动（脱标）
粘性：选择器{position：sticky；top:10px；}
以浏览器的可视窗口为参照点移动（固定定位特点），占有原先的位置（相对定位的特点），必须添加top、left、right、bottom其中一个才有效
边偏移：top、bottom、left、right