武汉web培训
达内武汉中心

15827352908

热门课程

武汉web培训:网页布局的三种方法

  • 时间:2016-04-29 11:28
  • 发布:武汉web培训
  • 来源:web教程

一、流式布局

    即标准文档流,利用盒子模型的距离来实现各个元素的布局;

    概念:从左到右,从上到下渲染内容,由块级标签和行级标签组成;

二、浮动布局

    即通过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;

}

三、绝对定位布局

    概念: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;

}

马上预约七天免费试听课

姓名:

电话:

上一篇:武汉web培训:margin重叠和固定层
下一篇:作为IT男你必须知道的T圈流行语

web前端学习容易犯的错误

web1702“诱人”活动

抽象类和抽象方法

jquery的ajax和getJson跨域获取json数据

选择城市和中心
贵州省

广西省

海南省

有位老师想和您聊一聊