武汉web培训
达内武汉中心

15827352908

热门课程

武汉web培训:网页布局基础知识

  • 时间:2016-04-26 11:50
  • 发布:武汉web培训
  • 来源: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; -〉背景颜色
    no-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}

    *注意:固定宽度层的高度 > 自适应宽度层的高度
上一篇:前端必备,CSS3的Flexbox布局方法
下一篇:如何切换TAB的代码实例

web前端学习容易犯的错误

web1702“诱人”活动

抽象类和抽象方法

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

选择城市和中心
贵州省

广西省

海南省

有位老师想和您聊一聊