真正零基础学习HTML（五）

忘是亡心i 2022-01-11 09:57 163阅读 0赞

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

一、浮动  
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；元素消失，新元素覆盖其旧元素位置

转载于:https://blog.51cto.com/13162615/2120684