一 浮动
一 应用
多个块级元素纵向排列找标准流,横向排列找浮动
选择器{
float;属性
}
属性有以下几个
none 元素不浮动(默认值)
left 左浮动
right 右浮动
二 特点
1.多个块级元素纵向排列找标准流,横向排列找浮动
2.任何元素都可以浮动,浮动后与行内块元素属性相似
3.如果盒子没有添加宽度设置,则与父级一样宽,但添加浮动后,他的大小由内容决定
4.浮动间没有缝隙
5.一般情况下,一个盒子里存在多个元素,一个子级元素浮动,其他的兄弟元素衣蛾要浮动
三 清除浮动
一 用法
选择器{
clear:属性;
}
left 清除左侧浮动
right 清除右侧浮动
both 清除左右浮动
二 为什么清除浮动
1.父级元素没有设置高度(希望高度随子元素的多少来自由改变)
2.影响下面的布局
三 常用的三种方法
1. 父级元素添加overflow,将其属性设置为hidden(常用),auto,scroll
2.:after 伪元素法
.clearfix:after{
content:"";
display: block;
height:0;
clear: both;
visibility: hidden;
}
.clearfix{
*zoom:1;
}
/..照顾低版本浏览器../
3.:双伪元素清除浮动
.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
二 定位
一 作用
1.使元素可以自由的在一个盒子里移动位置,并且不压住其他盒子
2.滚动窗口时,盒子位置固定
二 用法 定位模式(方式)+边偏移(具体位置)
定位模式
static 静态定位
relative 相对定位
absolute 绝对定位
fixed 固定定位
边偏移
top 距离父元素上边线的距离
bottom 距离父元素上边线的距离
left 距离父元素上边线的距离
right 距离父元素上边线的距离
二 相对定位
选择器{
position:relative;
}
特点、
1.相对于原来的位置移动
2.原来的位置继续占有,后面的元素以标准流对待(不脱标)
三 绝对定位
选择器{
position:absolute;
}
特点
1.如果没有父级及以上元素或祖先元素没有定位,以浏览器为定位标准
2.如果祖先元素有定位,则以最近的有定位的祖先元素为参考点
3.绝对定位不占有原先位置
居中方式
不可使用 margen:0 auto;可以使用以下方法
1.left:50%让盒子移动到父级元素的水平居中位置
2.margen-left:-100px;让盒子向左移动自身宽度一半
三 子绝父相
1.子集绝对定位,不占有位置,可放在父盒子的任何地方,不影响其他盒子
2.父盒子加相对定位,限制子盒子的位置
四 固定定位
选择器{
position:fixed;
}
特点
1.以浏览器的可视窗口为参照点移动元素
2.跟父元素没有关系
3.不随滚动条滚动而移动
4.投标(特殊的绝对定位)
五 定位叠放次序
选择器{
z-index:1;
}
1.数值可以是任意整数,默认为auto,数字越大,越靠上
2.属性相同时,后来居上
3.数字后无单位
六 浮动与定位在使用时的区别
定位会完全压住盒子以及盒子中的文字,而浮动只会压住盒子,不会压住文字(文字环绕爱效果)