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

网页布局基础

难度入门
时长 1小时30分
学习人数
综合评分9.63
2052人评价 查看评价
9.9 内容实用
9.6 简洁易懂
9.4 逻辑清晰
  • 当父包含块缩成一条时,用clear:booth方法清除浮动无效,它一般用于紧邻后面的元素的清除浮动
    查看全部
    0 采集 收起 来源:横向两列布局

    2016-10-08

  • 横向两列布局—— 主要应用技能: 1. float属性——使纵向艾烈的块级元素横向排列; 2. margin属性——设置两列之间的间距 备注: 页面初始化方法 全局选择器 *{margin:0;padding:0}
    查看全部
    0 采集 收起 来源:横向两列布局

    2016-10-08

  • W3c 标准
    查看全部
  • 当一个元素设置绝对定位,没有设置宽度时,元素的宽度根据内容进行调节
    查看全部
    0 采集 收起 来源:绝对定位

    2016-10-08

  • 当元素设置浮动属性后,会对相邻的元素产生影响 “相邻元素”特指紧邻后面的元素
    查看全部
  • 当元素 没有设置宽度值,而设置了浮动属性,元素的宽度随内容的变化而变化。 若没有内容,则会缩成一个点
    查看全部
  • 设置了float属性的元素特点: 元素会左移,或右移动,直至触碰到容器为止
    查看全部
  • 盒模型第一层为border,第二层为content+padding,第三层为background-image。第四层为background-color,第五层为margin
    查看全部
    0 采集 收起 来源:练习题

    2016-10-07

  • 页面初始化(好习惯): *{margin:0;padding:0;}
    查看全部
    0 采集 收起 来源:横向两列布局

    2016-10-07

  • 横向两列布局: float属性-使纵向排列的块级元素,横向排列 margin属性-设置两列之间的间距
    查看全部
    0 采集 收起 来源:横向两列布局

    2016-10-07

  • margin:0 auto 块级元素居中的原理—— “auto会根据浏览器的宽度自动地设置两边的外边距”
    查看全部
  • as0
    1 相对定位是基于原来的位置进行偏移的,并且设置了相对定位,他还是在标准文档流中,2 绝对定位是基于它最近的设置了相对或绝对定位的父元素进行偏移的,如果他所有的父元素都没有设置绝对或者相对定位,那么它的偏移就是基于根标签即html标签进行偏移,并且设置了绝对定位,它就会脱离标准文档流。
    查看全部
  • 盒子3D模型 第一层(最上层):border 第二层:content+padding 第三层:background-image 第四层:background-color 第五层(最下一层):margin 三维图的意义:理解各层的位置,方便设置/修改样式
    查看全部
    0 采集 收起 来源:盒子模型

    2016-10-07

  • 一:横向两列布局的实现:这是网页布局最常见的方式之一 主要应用技能: float属性——使纵向排列的块级元素,横向排列 margin属性——设置两列之间的间距 二:当父包含块缩成一条时,用clear:both方法清除浮动无效,它一般用于紧邻后面的元素的清除浮动。所以设置父的overflow:hidden div块的高度一般不需要设置,这样高度就会随着内容自动扩展。若设置了高度,又设置了overflow:hidden,当内容超过高度的时候,就无法正常显示了
    查看全部
    0 采集 收起 来源:横向两列布局

    2016-10-07

  • position:absolute 绝对定位 1.没有设置偏移量(pisition:absolute) 特点:无论是否存在已定位祖先元素,任在元素初始位置,脱离了标准文档流 2.设置了偏移量,分两种情况(position:absolute;left:50px;top:20px;) 特点:相对于包含块偏移,脱离了标准文档流 a.无已定位祖先元素 相对于根节点(html)偏移 b.有已定位祖先元素 相对于离自身最近的已定位祖先元素偏移
    查看全部
    0 采集 收起 来源:绝对定位

    2016-10-07

举报

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

微信扫码,参与3人拼团

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

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