前端06day
2018-11-22 本文已影响0人
Tellme丶
浮动
display:inlineblock;
块元素脱离文档流：，在父元素中浮动起来。
宽度占父元素100% 块独占一行
float:none;(默认)
float:left;(左浮动) 给一个设浮动后，会脱离文档流，不占位，下面的顶上
float:right;(右浮动)覆盖文字，会环绕
浮动比文档流高一层
浮动元素不会超过文档流，最多一边齐
浮动元素不会
内联元素脱离文档流变成块
块元素脱离文档流display:inline后仍是块元素。
块元素和行内元素·都可以浮动，一个行内元素浮动以后自动变为块元素。
项目布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>蔚蓝网</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.a{
width: 1748px;
height: 4016px;
background-color: skyblue;
}
.b{
width: 1748px;
height: 170px;
background-color: yellow;
margin: 0 auto;
}
.ab{
width: 997px;
height: 44px;
background-color: gold;
margin: 0 auto;
}
.ac{
width: 981px;
height: 90px;
background-color: brown;
margin: 0 auto;
margin-top: 1px;
}
.ad{
width: 981px;
height: 34px;
background-color: green;
margin: 0 auto;
margin-top: 1px;
}
.c{
width: 248px;
height: 819px;
background-color: red;
float: left;
margin-left:376px;
margin-bottom: 24px;
}
.d{
width: 750px;
height: 819px;
background-color: yellow;
float: left;
margin-left: 5px;
margin-bottom: 24px;
}
.e{
width:998px;
height:526px;
background-color: gold;
float: left;
margin-left: 376px;
margin-bottom: 30px;
}
.f{
width: 998px;
height: 520px;
background-color: yellow;
float: left;
margin-left: 376px;
margin-bottom: 30px;
}
.g{
width: 998px;
height: 433px;
background-color: gold;
float: left;
margin-left: 376px;
margin-bottom: 30px;
}
.h{
width: 998px;
height: 494px;
background-color: yellow;
float: left;
margin-left: 376px;
margin-bottom: 30px;
}
.i{
width: 998px;
height: 525px;
background-color: gold;
float: left;
margin-left: 376px;
margin-bottom: 30px;
}
.j{
width: 998px;
height: 171px;
background-color: yellow;
float: left;
margin-left: 376px;
}
.k{
width: 1748px;
height: 230px;
background-color: gold;
float: left;
}
</style>
</head>
<body>
<div class="a">
<div class="b">
<div class="ab"></div>
<div class="ac"></div>
<div class="ad"></div>
</div>
<div class="c">
<div class="cc"></div>
</div>
<div class="d"></div>
<div class="e"></div>
<div class="f"></div>
<div class="g"></div>
<div class="h"></div>
<div class="i"></div>
<div class="j"></div>
<div class="k">
<img src="img/canvas.png">
</div>
</div>
</body>
</html>
