课程咨询 :0551-64632520

合肥web前端培训

合肥web培训 > 达内新闻 > 网页布局基础知识
  • 网页布局基础知识

    发布:合肥web培训      来源:达内新闻      时间:2016-06-06

  • 合肥web培训专家介绍一下网页布局的代码及用法。

    盒子3D模型
     
    从第一层到第五层依次为:border、content+padding、background-image、background-color、margin。

    border:边框粗细 样式 颜色
    padding:上 右 下 左
    margin:1.上 右 下 左;2.上右 or 下左 or 上左 or 下右;3.上 左/右 下

    背景图像/背景颜色:

    .book{ background:url(../images/t_book.gif) no-repeat #eff9f9;}

    background:url(../images/t_book.gif) -〉背景图像
    eff9f9; -〉背景颜色
    o-repeat -〉不重复

    自动居中一列布局 :
     
    需要设置 margin 左右值设置为 auto,而且一定要设置width为一个定值。

    使#mainbody和#footer宽度以父包含块wrap宽度为准自适应:

    #mainbody, #footer{width:100%}

    一个网页一般分为三个部分,#header,#mainbody,#footer,

    如果想让整体网页居中,先将网页包裹成一个块级元素,class="wrap"

    .wrap{margin:0 auto;width:960px}如果设置了{margin:0 auto;}不要再设置浮动或者绝对定位,因为那样会让你的居中效果消失。

    浮动
     
    可实现块级元素横向排列

    3个属性值:left-左浮动,right-右浮动,none-不浮动

    设置了浮动的元素,仍旧处于标准文档流中,意味着会占据标准文档流中的空间,对周围的元素产生影响

    当元素没有设置宽度值,而设置了浮动属性,元素的宽度随内容的变化而变化

    当元素设置浮动属性后,会对相邻的元素产生影响,相邻元素特指紧邻后面的元素。

    清除浮动的常用方法
     
    1.clear属性-常用

        p{clear:both;}
        p{clear:left;}
        p{clear:right;}

    2.overflow属性-父级

        p{width:100%; overflow:hidden;}
        p{width:960px; overflow:hidden;}

    两种清除浮动方法的使用场景:

    (1)当子元素设置了浮动,父元素没有设置浮动而导致的父元素高度不能自动扩展(此时父块在下,子块漂浮起来,脱离父块的盒子,父块没有子块的支撑,就缩成一条线),缩成一条线,子元素从父元素中溢出时,适合使用overflow属性的方式来清除浮动; 此法可同时去除紧邻的块级受到的浮动影响,而不需要再对受到浮动影响的紧邻块级元素设置去除浮动。

    解释:width设置为100%就是继承父容器的宽度(如果本身就是块级元素,则自动具备此特性)。左右撑满整个容器,为自己清除浮动创建条件。再加溢出隐藏,就可以把包裹浮动的部分去除(即去除浮动)。

    (2)如果是紧邻的块级元素受到浮动影响,对该受到影响的块级设置clear属性更为合适。

    绝对定位布局
     
    position属性拥有三种定位形式:1、静态定位 2、相对定位 3、绝对定位

    可设置4个属性值:

        static(静态定位)
        relative(相对定位)
        absolute(绝对定位)
        fixed(固定定位)

    在position属性中绝对定位absolute和固定定位fixed都属于绝对定位形式。

    相对定位

    1.仍旧处于标准文档流中,即占据一定的空间
    2.拥有偏移属性和 z-index属性(会产生覆盖效果)
    3.相对初始位置的偏移的位置

    绝对定位
     
    特点:

    建立了以包含块(父级元素)为基准的定位
    完全脱离了标准文档流
    随即拥有偏移属性和z-index属性
    如果没有设置宽度,宽度随内容变化而变化(和浮动相似)

    情况1:未设置偏移量

    无论是否存在以定位祖先元素,都保持在元素初始位置(类似于没有速度也就没有相对运动这一说法) 但是脱离了标准文档流

    情况2:设置偏移量

    1.无已定位祖先元素:以html为偏移参照基准

    2.有已定位祖先元素:以距其最近的已定位祖先元素为偏移参照基准
    已定位元素:非静态定位元素。

    使用absolute实现横向两列布局

    布局大多数情况下用float定位,用absolute常用于一列固定宽度,另一列宽度自适应的情况

    特点:

    1.父元素设置相对定位:relative 设置父元素定位是为了不让自适应层相对HTML定位

    #mainbody{width:100%;margin-top:20px;position:relative;}

    2.自适应宽度元素设置绝对定位:absolute 让其脱离文档流

    #content{position:absolute;top:0px;margin-left:200px}

    *注意:固定宽度层的高度 > 自适应宽度层的高度

    推荐文章

上一篇:如何切换TAB的代码实例

下一篇:HTML学习笔记

最新开班日期  |  更多

WEB零基础全日制班

WEB零基础全日制班

开班日期:4-15

WEB零基础周末班

WEB零基础周末班

开班日期:

WEB前端业余班

WEB前端业余班

开班日期:4-15

WEB前端就业班

WEB前端就业班

开班日期:4-15

  • 地址:合肥市蜀山区肥西路66号汇金大厦21楼
  • 课程培训电话:0551-64632520     全国服务监督电话:400-827-0010
  • 服务邮箱 ts@tedu.cn
  • 2001-2016 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56