真正零基础学习HTML（五）

盒子高度=内容高度+填充+边框+外边距

一、浮动
1、float：
左浮动 left
右浮动 right
2、标准流
3、脱离标准流：设置浮动就脱离标准流
4、谁浮动谁下面的元素占据自己的位置
5、左浮动
（1）浮动了两个div元素div2和div3
div2--->>行内块元素没有独占一行
div3--->>紧跟在div2的右边
div4--->>紧跟在div1的下面
浮动了三个div2，div3，div4
div3、div4依次跟在上一个元素右边
（2）如果div3元素上一个元素也是浮动的，那么div3元素会跟随在上一个元素（div2）的后边(如果一行放不下这两个元素，那么div3元素会被挤到下一行)；
如果div2元素上一个元素是标准流中的元素，那么div2的相对垂直位置不会改变，也就是说div2的顶部总是和上一个元素的底部对齐。
6、右浮动
向右边浮动，两个相邻浮动跟在前一个左边

7、如果我浮动，下一个元素占据我的位置我的位置在哪里？

（1）看上一个是标准就跟在下面
（2）看上一个浮动方向一致就跟在后面
（3）看上一个浮动方向不一致就找一致或者标准，然后遵循（1）（2）的规则

就像会飞的×××，如果我没有飞，前面的×××在左侧飞起来我就在他下面跑，如果前面的×××在右侧飞，那我不受影响我就继续向前跑，看前面的左侧飞我就在他下面，看他地上跑我就跟在他后面。
如果我在左侧飞，前面×××也在左侧飞，那么空中车道已经满了，我只能跟他并肩飞并且在他右边。
如果我在右侧飞，前面×××也在右侧飞，那么空中车道已经满了，我只能跟他并肩飞并且在他左边。

8、总结：
（1）粗略定位
float：left 左
float：right 右
（2）精准定位（向上找）
假设我是左浮动
上一个元素无浮动：底部对齐
上一个元素左浮动：紧跟其“后”
上一个元素右浮动：前进一步，看上一个元素的上一个元素

9、块级元素：独占一行，可以设置宽和高 此元素前后会带有换行符（block）
内联元素：设置宽和高没有作用 inline
行内块：可以设置宽和高 inline-block
span设置浮动后高度宽度变的有意义
二、定位
position：relation；
默认：span
1、相对定位：relation
相对自己来说
top：垂直偏移量
left：水平偏移量
span运用这个属性依然无效
2、绝对定位：position：absolute；
（1）如果前面的父（祖）都没有设置relation或者absolute属性，top和left相对于body
（2）如果前面的父（祖）都设置relation或者absolute属性，则按照父（祖）元素定位

3、固定定位：position：fixed；
三.补充属性
1、z-index
z-index只能在position属性值为relative或absolute或fixed的元素上有效，如两者发生重叠时，z-index的值越大，位置越往上
2、Display
块级元素：独占一行、可以设置宽和高。此元素前后会带有换行符。block
内联元素：设置宽和高没有作用 inline
行内块：没有独占一行、可以设置宽和高 inline-block
区别：行内块取其块级元素的长处，补其内联元素的短处
3、Overflow
visible 默认值。内容不会被修剪，会呈现在元素框之外
hidden 内容会被修剪，并且其余内容是不可见的
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容（默认有滚动框）
Auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容（溢出才有滚动条）
4、Visibility
visible 默认值，元素是可见的
hidden 元素是不可见的
5、Visibility与Display:
Visibility：hidden；隐藏元素，但其位置空出，新元素不可覆盖其旧元素位置
Display：none；元素消失，新元素覆盖其旧元素位置