为了账号安全,请及时绑定邮箱和手机立即绑定

网页布局基础

难度入门
时长 1小时30分
学习人数
综合评分9.63
2052人评价 查看评价
9.9 内容实用
9.6 简洁易懂
9.4 逻辑清晰
  • 当一个元素设置绝对定位,没有设置宽度的时候,元素宽度会根据内容自动调节
    查看全部
    0 采集 收起 来源:绝对定位

    2015-06-17

  • 使用absolute实现横向两列布局常用于一列固定宽度,另一列宽度自适应的情况。 主要应用技能: relative——父元素相对定位 absolute——自适应宽度元素绝对定位 需要注意的是:固定宽度列的高度>自适应宽度的列
    查看全部
  • 相对定位: 特点:1、相对于自身原有位置进行偏移, 2、仍处于标准文档流中, 3、随即拥有偏移属性和z-index属性
    查看全部
    0 采集 收起 来源:相对定位

    2015-06-17

  • 1、偏移量的参照标准: 无已定位祖先元素,以<html>为偏移参照基准; 有已定位祖先元素,以其最近的已定位祖先元素为参照基准。 2、当一个元素设置绝对定位,没有设置宽度的时候,元素宽度会根据内容自动调节。
    查看全部
    0 采集 收起 来源:绝对定位

    2018-03-22

  • mainbody 相对定位 content 绝对定位+top:0px;+margin-left:180px+20px
    查看全部
    0 采集 收起 来源:编程练习

    2015-06-17

  • 静态定位还是标准文档里,相当于没有定位! 所以是以根元素为基准偏移,即<html>元素,注意不是<body>元素。
    查看全部
    1 采集 收起 来源:练习题

    2018-03-22

  • 盒子模型3D模型: 1、border 2、content + padding 3、background-image 4、background-color 5、margin
    查看全部
    0 采集 收起 来源:盒子模型

    2015-06-17

  • 应用场合:一列定宽,一列宽度自适应 使用说明:(设置主要针对自适应的一列) 1、对其父元素进行relative 相对定位 2、对本身用 absolute 绝对定位 + 偏移基准点是父元素的位置。例如:top是本DIV距离父DIV的top的距离。 疑问:经过试验,当偏移量 margin-left:510px。 和 left:510px 的效果是一样的,对么?
    查看全部
  • 当一个元素设置绝对定位 没有设置宽度时 元素的宽度会根据内容进行调节
    查看全部
    0 采集 收起 来源:绝对定位

    2015-06-17

  • http://img1.sycdn.imooc.com//558107600001953c12800720-120-68.jpg
    查看全部
    0 采集 收起 来源:绝对定位

    2015-06-17

  • 设置偏移量 偏移参照基准: 1.无已定位祖先元素,以<html>为偏移参照基准; 2.有已定位的祖先元素,以距其最近的已定位祖先元素为参照基准
    查看全部
    0 采集 收起 来源:绝对定位

    2018-03-22

  • 这里a是静态定位,也就是标准文档流,相当于没有设置定位,所以b元素会相对于html元素进行定位 静态定位是标准文档流,相当于没有设置定位,
    查看全部
    0 采集 收起 来源:练习题

    2015-06-16

  • 横向两列布局可以有两种方法实现 1.利用浮动 2.利用绝对定位。(不是很常用,常用于一列固定宽度,另一列宽度自适应的情况。此时固定高度的块得高度应大于高度自适应的块才不会导致文本的溢出)想要移动的块设置absolute,参照块设置relative。
    查看全部
  • 绝对定位需要参照基点时,为它的父级设置相对定位
    查看全部
    0 采集 收起 来源:绝对定位

    2015-06-16

  • 设置绝对定位后与浮动相似,宽度随内容自适应
    查看全部
    0 采集 收起 来源:绝对定位

    2015-06-16

举报

0/150
提交
取消
课程须知
1.一定要对HTML+CSS相关标签有所掌握;2.对网页布局知识有简单的了解
老师告诉你能学到什么?
1.掌握三大布局技巧——流式布局、浮动布局及绝对定位布局;2.精通标准文档流、盒子模型、float属性以及position属性等知识。

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!