CSS布局
流动模型 (flow)
块状元素,由于没有设置宽度,默认为100%
内联元素从左到右水平分布显示
浮动模型
两个块状元素并排显示:
div{
width:200px;
height:200px;
float:left;//浮动并排向左显示
}
<div id="div1"></div>
<div id="div2"></div>
div{
width:200px;
height:200px;
border:2px red solid
}
#div1{float:left;}
#div2{float:right;}//两个元素一左一右显示
层模型:
绝对定位(absolute):相对于上一个父级,如果没有父级则相对于浏览器窗口
div{
width:200px;
height:200px;
border:2px red solid;
position:absolute;
left:100px;
top:50px;
}
<div id="div1"></div>
相对定位 position:relative
固定位置:fixed 不随滚动条滚动而变化
相对定位与绝对定位相结合
<div id="box1"><!--参照定位的元素-->
<div id="box2">相对参照元素进行定位</div><!--相对定位的元素-->
</div>
参照定位的元素必须加入position:relative;
相对定位的元素加入position:absolute
确定宽度的块状元素使用 margin-left:auto;和margin-right:auto 来设置居中
不定宽的块状元素居中:加入table标签
设置display:inline方法,然后使用text-align:center
设置position:relative 和left:50%。给父元素设置float
垂直居中:
插入table,设置vertical-align:middle;
流动模型 (flow)
块状元素,由于没有设置宽度,默认为100%
内联元素从左到右水平分布显示
浮动模型
两个块状元素并排显示:
div{
width:200px;
height:200px;
float:left;//浮动并排向左显示
}
<div id="div1"></div>
<div id="div2"></div>
div{
width:200px;
height:200px;
border:2px red solid
}
#div1{float:left;}
#div2{float:right;}//两个元素一左一右显示
层模型:
绝对定位(absolute):相对于上一个父级,如果没有父级则相对于浏览器窗口
div{
width:200px;
height:200px;
border:2px red solid;
position:absolute;
left:100px;
top:50px;
}
<div id="div1"></div>
相对定位 position:relative
固定位置:fixed 不随滚动条滚动而变化
相对定位与绝对定位相结合
<div id="box1"><!--参照定位的元素-->
<div id="box2">相对参照元素进行定位</div><!--相对定位的元素-->
</div>
参照定位的元素必须加入position:relative;
相对定位的元素加入position:absolute
确定宽度的块状元素使用 margin-left:auto;和margin-right:auto 来设置居中
不定宽的块状元素居中:加入table标签
设置display:inline方法,然后使用text-align:center
设置position:relative 和left:50%。给父元素设置float
垂直居中:
插入table,设置vertical-align:middle;