一、CSS中的浮动
1.定义和用法
float 属性定义元素在哪个方向浮动。在 CSS 中,任何元素都可以浮动。浮动会使原元素变成一个行级元素,而不论它本身是何种元素。如果浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能地窄。
2.特点
a:浮动盒子的宽度不会自动伸展,宽度以内容、外边距、内边距属性为准
b:标准流中其他盒子将视浮动盒子不存在而占据浮动盒子的位置,但内容会受到浮动盒子宽度的影响。
c:父级盒子中的所有盒子都采用浮动形式,若父级盒子未指定高度则父级盒子的高度为0,因为所有盒子都是浮动已脱离标准流。解决办法在父级盒子内增加一个标准盒子。
3.消除浮动带来的影响的方法:
a.给父元素加宽度
b.在父元素中加 overflow:hidden
c.在父元素中添加一个新的元素,为新元素设置clear:both (如果父元素中还有标准元素,就给它加clear:both)
d.直接在style中加
.clearfix{ zoom: 1;/*兼容低版本浏览器*/ }
.clearfix:after{ content: ""; display: block; clear: both; }
二、CSS中的定位
1.静态定位
position: static;(默认)
2.相对定位
position: relative;
特点:
1:相对自己原来的位置进行定位
2:移动以后,自己原来的位置不会被其他元素占用
3.绝对定位
position: absolute;
特点:
1:相对于:离他最近的,并使用了定位的父元素 ,如果没有符合的,最后以body为准
2:元素原来的空间会被其他元素占用
4.固定定位
position: fixed;
5.和定位相关的属性
top 距离上方大小 right 距离右方大小
bottom 距离下方大小 left 距离左方大小
z-index 浮动出来(进去)距离原平面大小 (若是负值则会进去)