css 基础2
- 浮动
- 定位
- 层级
- 项目
复习
class="a b c"
class="a b"
选择器[属性~="a"]
class="a1"
class="a2"
class="a3"
选择器[属性*="a"]
+ 浮动
浏览器对元素有默认的排版方式 按照从左到右 从上到下 流式排列 文档流
脱离文档流:
不想按照默认的排版方式 按照自己的方式
如何脱离文档流:
浮动和定位
关键词:
float：none|left|right 靠左浮动 靠右浮动
造成的问题 :
容易让背景图片不显示
解决方案 :
新建一个空div 标签
.clearit{
clear:both; 清楚浮动带来的问题
}
<div class="clearit">
</div>
定位
需求 小div 在大div 里边 两个div 全部水平 垂直居中
- 绝对定位 相对于父元素 而言
- 相对定位 父元素相对于本身而言
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>垂直水平居中</title>
<style type="text/css">
.parent{
width: 800px;
height: 500px;
border: 1px dotted #FFA500;
position: relative;
margin: 250px auto 250px;
}
.child{
width: 200px;
height: 200px;
border: 1px dotted green;
background: red;
position:absolute;
margin: auto;
top:0;
left:0;
bottom:0;
right:0;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
</div>
</div>
</body>
</html>
总结:
float:
left
right
none
postion:
absolute 绝对定位
relative 相对定位
fixed 固定
static 默认 值 表示没有定位
top:200px 定义一个元素 上外边距的距离 类似于 margin-top
left: 200px 左外边距 margin-left
right:200px 右外边距
bottom ：200px 下外边距
上面四个偏移量 首先建立在定位的基础上
z-index
两个div 谁在上面 谁在下面的问题 谁的值越大 谁在上面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.one,.two{
width: 100px;
height: 100px;
position: relative; 先要定位
}
.one{
background: red;
top:50px; #这一步为了两个div有重叠
z-index: 50;
}
.two{
background: green;
z-index: 40;
}
</style>
</head>
<body>
<div class="one">
</div>
<div class="two">
</div>
</body>
</html>