今日所学内容：
传统网页布局的三种方式：
标准流：
标准流就是标签按照规定好的默认顺序方式排列
1.块级元素会独占一行，从上到下顺序排列
2.行内元素按照顺序，从左到右排列，碰到父元素的边缘汇总换行
浮动：
为什么需要浮动？
有很多情况是标准流不好完成或者无法完成的布局，此时使用浮动会更加方便。浮动可以改变元素标签默认的排列方式
浮动的最典型的应用
网页布局的准则：
多个会计原阿苏纵向排列找标准六，多个块级元素横向排列找浮动
浮动的语法
float属性可以创建浮动：
属性值：
left:左浮动
right:右浮动
none:元素不浮动（默认）
浮动的特性：
1.浮动的元素会脱离标准流
2.元素一行显示并且元素顶部对齐
3.浮动元素会有行内块元素的特性
4.浮动的元素不会压住自己下面盒子的文字内容，因为浮动给的特性就是为了做到文字环绕的
5.浮动的元素之间默认是没有空隙的
浮动布局注意点：
1.浮动和标准流父盒子的搭配
先用标准流的父元素排列上下位置，之后内部的子元素采用浮动排列左右位置
2.一个元素浮动了，其他兄弟元素理论上也哟啊跟着浮动
浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流
清除浮动
为什么要清除浮动？
如果父盒子没有添加清除浮动，那么子盒子浮动不占位置
1.额外标签法（隔墙法）
W3C推荐，但我们实工作中基本不用
给父级标签添加oerfloat属性
给父级标签添加after伪元素
父级添加双伪元素
定位：
为什么需要定位？
当我们滚动屏幕的时候定位可以将盒子固定到某一个位置
某个元素可以自由的在盒子内移动，并且会压住盒子
定位的使用
定位=定位模式+边偏移
定位模式用于指定一个元素在盒子内的定位方式，边偏移决定了元素的最终位置
定位模式
值 语义
static 静态定位
relative 相对定位
absolute 绝对定位
fixed 固定定位
position的默认定位方式，是无定位的意思，没有偏移，基本不用
position：relative；（相对定位）
特点：
1.她是相对于他自己原来的位置来进行移动的（参照点是自己原来的位置）
2.原来的位置标准流继续占有，后面的盒子仍然以标准流的方式
3.相对定位没有脱标
position：absolute；（绝对定位）
1.如果没有祖先元素或者祖先元素没有定位，则以浏览器伪标准进行定位
2.如果祖先元素有定位（相对、绝对、固定定位），则以最近一级有定位的祖先元素为
字体图标的使用
|
