标签：osi 滚动条 自己 htm 调整 方法 盒模型 无法 影响
浮动
元素的浮动是指设置了浮动属性的元素会脱离标准普通
流的控制，移动到其父元素中指定位置的过程。
语法: float :
left
right
none(默认)
注意:
1. 浮动的元素要有父元素
2. 浮动后的元素类似元素行内块元素,即使行内元
素浮动后也可以设置宽高.(类似不代表是,浮动后的盒子可以设置宽高，但是不能用行内块的方式让盒子居中，比 如：给浮动的盒子父元素添加 text-algin ：center ；是不起作用的；需要给盒子margin才能调整其位置)
3. 浮动的元素会脱离文档流,但是没有脱离文本流
浮动带来的影响：
父元素高度塌陷 : 子元素浮动,父元素没有设置高,子元素
不能把父元素的高给撑开,导致父元素没有高度,这种现
象叫父元素高度塌陷 .
清除浮动
1.加固定的高
缺点:不灵活
2.额外标签法
在父元素的末尾加一个空div, 给父元素设置
clear:left/right/both
优点： 通俗易懂，书写方便
缺点： 添加许多无意义的标签，结构化较差。
3.父级添加overflow属性方法
在父元素身上设置 : 除了visible以外的其他overflow
的值都可以 , overflow:hidden/scroll/ auto
原因: 是overflow触发了BFC, 在计算BFC高度的时
候,浮动的子元素的高度也计算在内
优点:代码简洁
缺点 :无法显示需要溢出的元素
4.使用after伪元素清除浮动
优点 : 结构语义化正确
缺点 : 由于IE67不支持:after，使用 zoom:1
1 .clearfix:after { 2 content: ""; 3 display: block; 4 clear: both; 5 } 6 .clearfix { 7 zoom: 1; 8 }
定位
1.postion: static 默认值 静态定位
2.postion : relative : 相对定位
特点 : 不脱离文档流 ,以自身的位置来定位的
应用场景 :
微调元素
做绝对定位的参考，子绝父相
3.position:fixed : 固定定位
不管怎么滚动滚动条,始终固定在某个位置
特点 : 脱离了文档流,以浏览器窗口来定位的
4.position:absolute : 绝对定位
特点 : 脱离了文档流, 以最近已定位的”父元素”的位置来
说的,如果父元素都没有定位,以html的位置来说的
备注 : 已定位的”父元素”可以是 绝对定位/ 相对定位/固
定定位,子绝父相用的最多
方向关键字
left : 正值是向右走的 负值往左走
top : 正值是向下走的 负值往下走
right : 正值是向左走的 负值往右走
bottom : 正值是向上走的 负值往下走
注意: static定位身上不能用方向关键字
脱离文档流的元素
1.固定定位
2.绝对定位
3.浮动
特点 : 类似于行内块元素,如果不设置宽高,它的宽高是由
内容撑开的,即使是行内元素,可以设置宽高
如何让定位的盒子垂直居中:
1 { 2 left:50%; 3 top:50%; 4 margin-left:-盒子宽度的一半; 5 margin-top:-盒子高度的一半; 6 } 7 8 { 9 left:50%; 10 top:50%; 11 <!--向左移动自己宽度的一半--> 12 transform: translateX(-50%); 13 <!--向上移动自己高度的一半--> 14 transform: translateY(-50%); 15 }
浮动定位区别
CSS2中能够使标签脱离文档流的属性有：
float:left/right?
postion:absolute/fixed?
float脱离文档流时，其他盒子会无视这个标签，但其他
盒子内的文本、图片、表单标签依然会为这个标签让出
位置，环绕在周围( 脱离文档流，不脱离文本流 )。
position脱离文档流的标签，其他盒子完全无视它，包括
标签内部的文本、图片、表单标签（ 既脱离文档流，又脱离文本流 ）
注意：所有的标签都能够使用以上属性，脱离文档流之后
1. 不再区分块级和行内标签，类似行内块元素。
2. 宽高默认由内容撑开，可以设置width和height及所有
盒模型属性,即使行内元素也可以设置宽高
标签：osi 滚动条 自己 htm 调整 方法 盒模型 无法 影响
原文地址：https://www.cnblogs.com/ximenchuifa/p/13251435.html
