一、今日学习内容
传统网页的布局方式
1、标准流：就是所有标准流标签按照默认的顺序进行展示
1）、块元素会独占一行。，从上到下一次排列
2）、行内元素会从左到右一次排列，会自动换行。
2、浮动
1）、意义：当标准流不能很好的满足页面布局要求的时候，就需要用到浮动，浮动会改变标准流标签的默认排列。
2）、最典型的应用是块元素一行内显示。
3）、网页布局的标准：
纵向排列用标准流。横向排列用浮动。
4）、语法：float：left靠左浮动 right靠右浮动 none不浮动，默认值
5）、特点：
浮动的元素已经脱标。
浮动元素会按照一行进行排列，顶部对齐。
浮动元素具有行内块元素的特性。
浮动元素不会覆盖文本，因为开始就是为了文字环绕而用的。
浮动元素的左右排列没有间隙。
浮动的布局特点：
先用标准流父元素进行上下排列，再用浮动元素进行左右排列。
一个元素浮动，他的并列元素也要进行浮动。
清除浮动：
意义：如果父类盒子没有进行浮动，子类盒子浮动后不占空间，父类盒子没有设置高，后面的标准流元素就会紧挨父类盒子
方法：
额外标签法 .clear{ clear：both}
在父盒子中加上overflow：hodden。
给父元素加一个after伪元素。
.clearfix:after{
content="";
display:block;
length:0;
clear:clear;
visibility:hidden
}
给父元素加两个伪元素
.clearfix:before,.clearfix:after{
content:"";
display:table;
]
.clearafter{
clear:both;
}
3、定位
意义：
当屏幕滚动的时候，可以将摸个盒子固定子在页面的某个位置。
让子盒子在父盒子里面随意移动，并且会压住盒子。
定位的声明：定位模式+边偏移。
定位模式属性值：
static 静态固定 默认值 没定位没有边偏移、
relative 相对固定
特点：
以自身位置为参考点。
原位置会继续占有，标准流标签会以标准流标签来对待他。
没有脱标。
absolute 绝对位置
特定：
父类没有定位的话，会以浏览器为参考点。
多级祖先类如果都有定位，以最近的一级父类为参考点。
绝对定位已经脱标。
子绝父相，相对定位就是给绝对定位当爹的
|
