网页布局三大核心：盒子模型、浮动、定位
页面布局要学习三大核心：盒子模型、浮动和定位。
传统网页布局的三种方式：标准流、浮动、定位。
标准流就是块级元素独占一行；行内元素会按照顺序从左至右排列，碰到父元素边缘自动换行。
这三种方式就像刘备、关羽、张飞。
网页布局的本质：利用CSS做盒子样式，摆放位置。标题<h>、段落<p>、盒子<h>。
盒子有 m b p c
清除内外边距：
不同浏览器带有默认的内外边距，因此我们在布局前，首先要清除下网页元素的内外边距。
方式：
* {
padding：0；/*清除内边距*/
margin:0; /*清除外边距*/
}
浮动
1 首先了解把块元素放在一行内？
使用行内块元素会产生 空隙
2 如何实现两个盒子左右对齐？
总结：有很多布局效果，标准流没有办法完成，此时利用浮动完成布局
浮动能改变标签的默认排列方式
网页布局准则：
纵向排列-标准流；横向排列-浮动
语法：
选择器 { float : 属性值 ; }
浮动会贴着浮动
浮动特性（重难点）
1.浮动的元素不再保留原先位置，（会像我们迎面扑来），原来的位置会被别的占有
2.如果都设置浮动，则会以一行排列，直到位置不够，才落到第二行
3.添加了浮动都会有行内块元素的特点，不管什么元素
实际应用：
浮动元素经常搭配父级标准流，目的是限制浮动元素位置
先用标准流的父元素排列上下，之后内部子元素采取浮动排列左右
清除浮动？
也不是真正意义上的清除，而是限制浮动子元素
原因：
1 父元素不方便给高度（不知道子元素多少）
2 父元素高度设置为0的话，会被其他标准流父元素挤上去
前提：前提是父盒子本身没有高度，如果有高度就不用清除！！！
清除浮动后，父级会根据浮动的盒子自动检测高度
操作：给父级添加overflow属性，值设置为hidden.
CSS定位
1 如果要实现某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子
这种情况下，使用标准流或浮动能实现吗？
2 实现某个盒子固定在屏幕
作用：
让盒子自由在某个盒子内移动或者固定在屏幕某个位置
组成：
定位=定位模式+边偏移
1）定位模式由CSS的position属性来设置，4个值：
static 静态定位,
静态定位就是标准流，很少用
relative 相对定位,（自恋型）
1 相对自己原来的位置; 2 原来在标准流的位置继续占有
例：position:relative;
top:100px;
最典型应用就是给绝对定位当爹。。。。
absolute 绝对定位,（拼爹型）
是相对它的祖先来说的
语法：
选择器 { position : absolute ;}
注意：
1 没有父元素或父元素没有定位，则以浏览器为准
2 父元素有定位 ，则以父元素为准。爷爷有定位爸爸没定位，就以爷爷为准
3 绝对定位不占有标准流位置，典型轮播图
实际开发中：子绝父相，绝对定位使用，父必须要有定位
fixed 固定定位
语法：
选择器 { position : fixed; }
以浏览器可视窗口做为 参照点，固定定位也不占有标准流位置，是特殊的绝对定位
2）边偏移就是盒子最终位置，4个属性：
top,bottom,left,right
扩展：
绝对定位的盒子垂直居中算法
固定版心算法