CSS介绍
实现移动的三种方法
可以用margin
可以用浮动布局
可以用定位
脱离文档流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>脱离文档流</title>
<link rel="stylesheet" href="脱离文档流.css"/>
</head>
<body>
<div class="redDiv"></div>
<div class="blueDiv">
<div class="item"></div>
</div>
</body>
</html>
body{
margin:0px;
}
.redDiv{
width: 200px;
height: 200px
background-color: red;
}
.blueDiv{
width: 400px;
height: 100px;
background-color: yellow;
float:right;
}
.item{
width: 20px;
height: 100px;
background-color: yellow;
float:right;
}
定位
定位
浮动
行标签 inline
不能设置宽-高 宽高由内容撑开
可以同行显示
块标签 block
可以设置宽高
不设置宽:默认宽度继承父级
默认高度:由内容撑开
不能同行显示 独占一行
文档流:标签在浏览器里面按照特性,从上到下,从坐到右排列的一个顺序
脱离文档流:让元素在文档流里面飞起来,不占用原来的空间
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>定位</title>
<link rel="stylesheet" href="定位.css/">
</head>
<body>
<div class="redDiv"></div>
<div class="blueDiv">
<div class="greenDiv"></div>
<div class="yellowDiv"></div>
</div>
<div class="ad">大家好,我是渣渣辉,一刀998级,贪玩蓝月,你值得拥有
</body>
</html>
.redDiv,.blueDiv{
width: 200px;
height: 200px;
}
.redDiv{
position: relative;
right: 10px;
bottom: 10px;
background-color: red;
margin-top:50px;
}
.blueDiv{
background-color: blue;
}
.greenDiv{
position: absolute;
right: 0px;
bottom: 0px;
width:50px;
height:50px;
background-color:green;
z-index:99;
}
.yellowDiv{
width: 100px;
height: 100px;
background-color:yellow;
}
.ad{
z-index:99;
width:100px;
height:380px;
background-color:gray;
color:white;
font-size:20px;
position: fixed;
right: 20px;
top:50%;
margin-top:-190px;
}
过渡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>过渡</title>
<link rel="stylesheet" href="过渡.css" />
</head>
<body>
<div class="redDiv"></div>
</body>
</html>
.redDiv{
margin: 100px auto;
width: 30px;
height: 50px;
background-color:red;
transition-duration:2s;
transition-property: all;
transition-timing-function: ease-in-out;
transition-delay:1s;
transition: all 1s 2s linear;
-webkeit-transition: all 1s 2s linear;
-moz-transition:all 1s 2s linear;
-ms-transition:all 1s 2s linear;
-o-transition:all 1s 2s linear;
transition: all 1s 2s linear;
}
.redDiv:hover{
height:400px;
background-color:blue;
}