对CSS浮动,定位的简单理解
基础概念
清除浏览器的默认样式:浏览器自带设置一些标签的默认样式,默认的margin和padding,可以在编写过程前将这些默认值删除
*{
margin: 0;
padding: 0;
}
文档流:标签在网页中排列时占用的位置,窗体的位置从上往下排列,每行中从左往右排列为一行.即文档流的默认标签会贴在上一个标签的右边,如果位置不足放不下则会另起一行,按照从左往右的顺序排放.
浮动
浮动:指的是标签脱离文档流,在父标签中浮动起来,行级标签和块级标签都可以浮动起来,行级标签浮动起来会变成块级标签.当一个标签使用浮动属性后,他的下方标签会向上移动,标签的内容会围绕在标签的周围,即有清除浮动,可以清除浮动对周围标签的影响,其他标签的位置不发生改变.浮动使用float属性标签,属性值可以选择不浮动,向左浮动,向右浮动.清除浮动使用clear标签,其属性值可选择忽略左侧浮动,右侧浮动,全部浮动(left,right,both).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box_t{
/* 浮动标签:float 属性值可选:left right none */
/* 向右浮动 */
float: left;
background-color: #FF0000;
width: 150px;
height: 50px;
line-height: 50px;
text-align: center;
}
#box{
margin: 0px auto;
width: 750px;
}
</style>
</head>
<body>
<!-- 浮动带来的问题:浮动后的标签没有撑开父标签,下面的标签会上移,会影响后面的网页布局
别称:高度塌陷
解决方法:
设置父标签的具体高度
清除浮动,清除浮动后,会默认将父标签撑开 与浮动标签高度一致 -->
<div id="box">
<div class="box_t">天猫</div>
<div class="box_t">聚划算</div>
<div class="box_t">天猫超市</div>
<div class="box_t">飞猪旅行</div>
<div class="box_t">苏宁易购</div>
<!-- 清除浮动 在浮动标签的后面添加一个空标签 -->
<div style="clear: left;"></div>
</div>
</body>
</html>
定位
定位的意思是,定义的标签相对于其正常位置，或者相对于父标签、另一个标签甚至浏览器窗口本身而根据设置的属性值使其出现在想要他出现的位置。
相对定位
相对定位是相对于标签在原来的文档流的位置而进行定位，移动后原来的位置会被占用.通过标签position:relative; 开启相对定位,当开启相对定位后,如果未设置属性值,则标签没有任何变化 属性值可选择四个属性left right top bottom.相对标签会使标签提升一个层次,不会改变标签的性质.
.b1{
background-color: #7FFF00;
width: 300px;
height: 200px;
/* 开启相对定位
如果没有设置偏移量 位置不变
是相对于自己本身的位置移动的 没有脱离文档流
位置还占用 位置如有重叠会提升一个层级 */
position: relative;
left: 200px;
top: 50px;
}
绝对定位
绝对定位是相对于离他最近的开启了定位的祖先标签进行定位,如果其所有的祖先标签都没有开启定位,则会以浏览器的窗口为标对进行定位. 不占用空间,使用绝对定位的标签会脱离原来的文档流,通过标签position: absolute; 开启绝对定位,属性值可以选择这四个属性left right top bottom, 绝对定位会使标签提升一个层级,并且会改变标签的性质,会将行级标签变成块标签.
#box1{
background-color: #00FFFF;
width: 100px;
height: 100px;
/* 开启绝对定位,会使标签脱离文档流*/
position: absolute;
left: 100px;
top: 100px;
}
z-index
z-index属性是设置标签的堆叠顺序, 如果定位标签的层级是一样,下边的标签会盖住上边的,通过z-index属性为z-index指定一个正整数作为值,该值将会作为当前标签的层级,层级越高,就会越优先显示,对于没有开启定位的标签不能使用z-index.
#box2{
background-color: #FF0000;
width: 300px;
height: 100px;
position: absolute;
top: 50px;
/* z-index 表示该标签的层级
层级越高 优先显示 */
z-index: 2;
}