文档流
将窗口自上而下分成一行行,在每行中从左向右的顺序排放元素,即为文档流。
文档流中元素默认会紧贴到上一个元素右边,若不足以放下会另起一行
块元素在文档流高度由内容撑开的
浮动
display:inlineblock;
块元素脱离文档流:,在父元素中浮动起来。
宽度占父元素100% 块独占一行
float:none;(默认)
float:left;(左浮动) 给一个设浮动后,会脱离文档流,不占位,下面的顶上
float:right;(右浮动)覆盖文字,会环绕
浮动比文档流高一层
浮动元素不会超过文档流,最多一边齐
浮动元素不会
内联元素脱离文档流变成块
块元素脱离文档流display:inline后仍是块元素。
块元素和行内元素·都可以浮动,一个行内元素浮动以后自动变为块元素。
项目布局
样式:
.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;
}*/