走牛B的路,让傻B去说吧 ,我的装B人生

前端三种布局方式

20140724141258_35HsR.thumb.700_0

作者:涛笙依旧1991

布局方式有三种:流式布局,浮动布局,绝对定位布局;

  1. 流式布局,即标准文档流,利用盒子模型的距离来实现各个元素的布局;
    概念:从左到右,从上到下渲染内容,由块级标签和行级标签组成;
  2. 浮动布局,即通过float属性来实现各个元素的布局;
    float:none | left | right;
    特点:
    1.元素会移动直到碰到容器的边缘为止;
    2.设置了浮动的元素仍然处于标准文档流中;
    3.当元素没有设置宽度,而设置了浮动属性以后,元素的宽度会随内容改变;
    4.当元素设置了浮动之后会对他相邻的元素造成影响,相邻元素特指紧邻后面的元素,可以用clear:both清除浮动;
    5.当子元素设置了浮动而父元素没有设置浮动时,也会对其父元素造成影响,使其父元素缩成一条,这时候使用clear来清除浮动没有效果,需要在其父元素中加入{width:100%;overflow:hidden;}来清除浮动。
    例子:浮动常用来做横向的两列布局或者三列布局,这里展示的是三列布局,左右宽度固定,中间随浏览器的大小而改变;
<!-- 这是HTML -->
<div id="container">
        <div id="left">此处使用浮动定位实现</div>
        <div id="center">此处使用浮动定位实现</div>
        <div id="right">此处使用浮动定位实现</div>
</div>
/*这是css*/
#container{
    width: 100%;
    overflow: hidden;/*这两条语句来清除由于子元素使用浮动造成父元素受到的影响*/
    background-color: #ffff99;
    border:1px solid #111111;
    padding: 5px;
}
#left{
    float: left;
    background-color: black;
    width:200px;
    height: 100px;

}
#center{
    float:left;
    background-color: red;
    width: 50%;
    height: 100px;
}
#right{
    float: left;
    background-color: blue;
    width:200px;
    height: 100px;

}

3.绝对定位布局
概念:position拥有三种定位形式,默认静态定位(static)相对定位(relative)绝对定位(absolute和fixed)
相对定位:相对于自身位置进行偏移(前提你得设置偏移量),仍处于标准文档流中,会产生空间的层堆叠。
绝对定位:建立了以自己的父包含块为基准的定位,完全脱离了标准文档流会产生空间的层堆叠;
对绝对定位的分析分为两种情况:1.未设置偏移量时,无论其父包含层有没有设置定位属性,它都留在初始位置。2.设置偏移量时,会以它的设置了定位的父包含层为基准进行偏移,若没有已经设置定位属性的父包含层时,它会以HTML为基准进行偏移。
例子:绝对定位也会被用在两页布局或者三列布局,但是应用不如浮动定位那么多,以下是三列布局,左右宽度固定,中间随浏览器变化。

<!-- 这是HTML -->
<div id="container">
        <div id="left">此处使用绝对定位实现</div>
        <div id="center">此处使用绝对定位实现</div>
        <div id="right">此处使用绝对定位实现</div>
</div>
/*这是css*/
#container{
    position: relative;
    background-color: #ffff99;
    border:1px solid #111111;
    padding: 5px;
    height: 200px;
}
#left{
    position: absolute;
    left: 5px;
    top: 5px;
    background-color: black;
    width:200px;
    height: 100px;

}
#center{
    position: absolute;
    top: 5px;
    left: 205px;
    background-color: red;
    width: 70%;
    height: 100px;
}
#right{
    background-color: blue;
    width:200px;
    height: 100px;
    position: absolute;
    top: 5px;
    right: 5px;

}

 

赞(0)
未经允许不得转载:装B攻略 » 前端三种布局方式
分享到: 更多 (0)