文档流
将窗口自上而下分成一行行，在每行中从左向右的顺序排放元素，即为文档流。
文档流中元素默认会紧贴到上一个元素右边，若不足以放下会另起一行
块元素在文档流高度由内容撑开的
浮动
display:inlineblock;
块元素脱离文档流：，在父元素中浮动起来。
宽度占父元素100% 块独占一行
float:none;(默认)
float:left;(左浮动) 给一个设浮动后，会脱离文档流，不占位，下面的顶上
float:right;(右浮动)覆盖文字，会环绕
浮动比文档流高一层
浮动元素不会超过文档流，最多一边齐
浮动元素不会
内联元素脱离文档流变成块
块元素脱离文档流display:inline后仍是块元素。
块元素和行内元素·都可以浮动，一个行内元素浮动以后自动变为块元素。
项目布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>唯品会</title>
<link rel="stylesheet" type="text/css" href="CSS/style.css">
</head>
<body>
<div class='a'>
<div class='b'>
<div class='c'></div>
<div class='d'></div>
</div>
</div>
<div class='e'>
<div class='f'>
<div class='g'>
<img src="img/123.png" alt='logo' width='160px' />
<img src="img/345.png" alt='bao' width='302.97px'/>
</div>
<div class='h'></div>
</div>
</div>
<div class='i'>
<div class='j'></div>
</div>
<div class='k'>
<div class='l'>
<div class='m'></div>
<div class='n'></div>
</div>
</div>
<div class='bikanqu'>
<img src="img/678.jpg" alt='bikan' width='1170px' />
<div class='zhong'>
<div class='tpp'>
<img src="img/789.jpg" alt='tpp' width='240px' />
<img src="img/789.jpg" alt='tpp' width='240px' />
<img src="img/789.jpg" alt='tpp' width='240px' />
<div class='shu'>
<div class='o'>
<img src="img/112.jpg" alt='weipin' width='360px' />
</div>
<div class='p'>
<img src="img/112.jpg" alt='weipin' width='360px' />
</div>
</div>
</div>
</div>
<img src="img/223.jpg" alt="huawei" width='1170px' />
</div>
</body>
</html>
样式：
.a{
width: 100%;
height: 28px;
background-color: #f5f5f5;
}
.b{
width: 1000px;
height: 28px;
background-color: white;
margin:0 auto;
}
.c{
width: 86px;
height: 28px;
background-color: green;
float:left;
}
.d{
width: 771px;
height: 28px;
background-color: yellow;
float:right;
}
.e{
width: 100%;
height: 100px;
background-color: #fff;
}
.f{
width: 1000px;
height: 100%;
background-color: orange;
margin:0 auto;
}
.g{
float:left;
}
.h{
width: 480px;
height: 33.97px;
background-color: blue;
/display:inline-block;/
float:right;
margin-top: 33px;
/vertical-align: top;/
}
.i{
width: 100%;
height: 42.99px;
background-color: #fff;
}
.j{
width: 1000px;
height: 100%;
background-color: red;
margin:0 auto;
}
.k{
width: 100%;
height: 501.99px;
background-color: purple;
border-top: 1px red solid;
}
.l{
width: 1167.97px;
height: 451.99px;
background-color: green;
margin:0 auto;
}
.m{
width: 1145.99px;
height: 400px;
background-color: black;
margin:0 auto;
border:10px white solid;
border-bottom: none;
margin-top: 30px;
}
.n{
width: 1145.99px;
height: 40px;
background-color: yellow;
margin:0 auto;
border:10px white solid;
border-top: none;
border-bottom: none;
}
.bikanqu{
width: 1579.17px;
height: 540px;
background-color: white;
margin-top: 20px;
margin:0 auto;
}
.zhong{
width: 1400px;
margin:0 auto;
}
.bikan{
margin:0 auto;
}
.tpp{
margin-top: 20px;
float:left;
}
.shu{
float:right;
}
.p{
margin-top: 27px;
}
/.sousuo{
width: 448.997px;
height: 31.992px;
background-color: black;
float:right;
/ margin-top: 34px;
/display:inline-block;/
/vertical-align: top;/
/.sousuo input{
width: 335px;
height: 26px;
}/
.content{
width: 100%;
height: 400px;
background-color:yellow;
}
.footer{
width: 200px;
height: 100px;
background-color:blue;
}*/
网友评论