浮动 float
取值
right/left:元素向右/左浮动。
注意
- 元素设置为浮动之后,就可以设置宽高(如下图所示:li元素的宽高)
- 元素设置为浮动之后,会脱离文档流,在文档中不占位。(即漂浮在文档流的上方,height为0)
- 元素浮动之后,后边的正常元素会上移,占据原本浮动元素所在的位置(如图中所示,li元素浮动之后,后面的div元素会上浮,占据了浮动元素的位置,使其呈现浅的粉色)
- 多个元素同时左浮或者右浮,浮动元素会停靠在前一个元素的边缘位置(如图中所示的4个li元素,改变了以前占据一行的属性,改变为紧靠前一个元素的边缘)
- 如下图
<style type="text/css">
body{margin:0;}
#nav,#main{width: 800px;margin:0 auto;}
#nav{background-color: springgreen;
/*父元素指定高度*/
/*height:50px;*/
/*overflow:hidden;*/
}
#nav ul{list-style: none; padding: 0px;margin:0px;}
/*将li元素设置为浮动并且规定宽高便可同行显示,背景颜色设置为白色,透明度为0.3*/
#nav li{float:left;width:200px;height:50px;background-color: rgb(255,255,255,0.3);
line-height: 50px;text-align: center}
/*浮动元素之后的div元素*/
#main{height:500px;background-color: pink;}
/*p{clear: both;}*/
</style>
<body>
<div id="nav">
<ul>
<li>我的博客</li>
<li>博客首页</li>
<li>文章列表</li>
<li>时间轴</li>
</ul>
<p></p>
</div>
<div id="main"></div>
</body>
效果如下图所示
- 元素设置为浮动之后,就可以设置宽高(如图所示:li元素的宽高)
- 元素设置为浮动之后,会脱离文档流,在文档中不占位。(即漂浮在文档流的上方)
- 元素浮动之后,后边的正常元素会上移,占据原本浮动元素所在的位置(如图中所示,li元素浮动之后,后面的div元素会上浮,占据了浮动元素的位置,使其呈现浅的粉色)
- 多个元素同时左浮或者右浮,浮动元素会停靠在前一个元素的边缘位置(如图中所示的4个li元素,改变了以前占据一行的属性,改变为紧靠前一个元素的边缘)
浮动元素对父元素的影响
由于浮动元素在文档中不占位,一旦子元素全部浮动,父元素的高度变为0,影响父元素背景颜色,背景图片的显示,影响后面其他元素的布局
- 解决办法(如图中所示:或者添加p元素或者设置父元素div的高度或者设置overflow:hidden)
- 指定父元素的高度
- 父元素中设置overflow:hidden
- 父元素之后添加空的块元素,并且设置clear:both
定位布局 position
1 定位布局
属性:top/bottom/right/left
作用:配合已经定位的元素进行位置移动
取值:像素值
1.top:以元素的上边界为基准移动元素
2.bottom:以元素的下边界为基准移动元素
3.right:以元素的右边界为基准移动元素
4.left:以元素的左边界为基准移动元素
2 定位方式
相对定位 position:relative
元素采用相对定位时,会参照它在文档中原来的位置进行偏移。(子元素需要绝对定位时,常用于祖先元素的设置)
绝对定位 position:absolute
- 特点
- 绝对定位的元素,会脱离文档流,元素在文档中不占位
- 绝对定位的元素,会参照离他最近并且已经定位的的祖先元素,进行偏移
- 如果没有已经定位的祖先元素,则元素会参照body进行定位
- 注意
- 元素一旦设置为绝对定位,就可以设置宽高了;
- 经常使用“父相子绝”的布局方式,即父元素采用相对定位以方便子元素的绝对定位
- 浮动与绝对定位都可以使元素脱流:float+调整margin 等价于 absolute+偏移属性
- 浮动与相对定位是可以共存的,设置相对定位只是为了方便子元素的定位布局
- 堆叠次序
*设置 已定位元素的z-index值,值越大,排序位置越靠上。
注:永续都是子元素在上,父元素在下,不受z-index值影响。
固定定位 position:fixed
作用:使元素定位在浏览器窗口的某个位置
- 注意:
- 固定定位的元素是参照浏览器窗口的位置进行定位
- 设置固定定位之后的元素为块元素
绝对定位与相对定位的例子如下
<style type="text/css">
body{margin:0;}
#box{width: 300px;height:300px;background-color: plum;
margin-top:50px;margin-left: 50px;position:relative;
top:50px;left: 50px;}
.d1{width:50px;height:50px;background-color: pink;
position:absolute;top:50px;left:50px;}
h1{margin-top: 40px;background-color: orange;}
</style>
<body>
<div id="box">
<div class="d1"></div>
</div>
<h1>一级标题</h1>
</body>
效果如下图所示
id为box的div元素设置为相对定位之后,在原本的位置上,分别向下,向右分别偏移50px;
而class为d1的div元素则以父元素"#box"的基础上,分别向下,向右分别偏移50px;
h1的一级标题则按照紫色快的原来位置进行定位