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

网页布局基础

难度入门
时长 1小时30分
学习人数
综合评分9.63
2052人评价 查看评价
9.9 内容实用
9.6 简洁易懂
9.4 逻辑清晰
  • 清除浮动:clear属性——常用clear:both; clear:left或者right 同时设置width:100%或者是固定宽度+overflow:hidden隐藏
    查看全部
  • 盒子3D模型
    查看全部
    0 采集 收起 来源:盒子模型

    2016-10-31

  • 元素浮动会对紧邻后面的元素造成影响
    查看全部
  • float属性:left right none 元素往某边靠拢 仍处于标准文档流 对周围元素产生影响
    查看全部
  • 行级标签:span strong img input 快级标签:div ul li dl dt p...
    查看全部
  • 绝对定位设置偏移量时: 1无已定位的祖先元素,偏移参照已html为基准 2有已定位的祖先元素,偏移参照最近的一个已经定位的祖先元素。
    查看全部
    0 采集 收起 来源:绝对定位

    2016-10-30

  • 盒子3D模型:边框,内边距和内容,背景图片,背景颜色,外边距
    查看全部
    0 采集 收起 来源:盒子模型

    2016-10-29

  • 'Auto' heights for BFC roots In certain cases,the height of an element that establishes a block formatting context is computed as follows: If it only has inline-level children, the height is the distance between the top of the topmost line box and the bottom of the bottommost line box. If it has block-level children, the height is the distance between the top margin-edge of the topmost block-level child box and the bottom margin-edge of the bottommost block-level child box. Absolutely positioned children are ignored, and relatively positioned boxes are considered without their offset. Note that the child box may be an anonymous block box. In addition, if the element has any floating descendants whose bottom margin edge is below the element's bottom content edge, then the height is increased to include those edges. Only floats that participate in this block formatting context are taken into account, e.g., floats inside absolutely positioned descendants or other floats are not.
    查看全部
    0 采集 收起 来源:横向两列布局

    2016-10-29

  • W3C标准
    查看全部
  • 因为b元素是绝对定位,而且题目中没有说明设置了偏移量,如果设置了偏移量而且含有父元素,那么基准就是父元素,,没有父元素,基准就是Html,没有设置偏移量的话,无论有无父元素,都是按照html为基准的
    查看全部
    0 采集 收起 来源:练习题

    2016-10-29

  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> *{margin:0; padding:0;} #wrap{width:970px;} #mainbody{ margin:auto 0; width:100%; overflow:hidden; position:relative; margin-top:15px;} #left{ float:left; width:110px; } #mid{ float:left; margin-left:65px;width:650px;border:1px solid #999;} #right{ position:absolute; left:794px;border:1px solid #999;} </style> </head>
    查看全部
  • 绝对定位实现横向两列布局常用于一列固定宽度另一列宽度自适应的情况;设置父元素position为relative及子元素的position为absolute就可以使子元素的宽度自适应,并且定位是相对于父元素的,具体位置可调整top和left等;同时注意设置“柱子层”的高度大于宽度自适应层的高度。
    查看全部
  • 当父级元素受浮动影响,缩成一条时,应用overflow:hidden清除浮动影响
    查看全部
    0 采集 收起 来源:横向两列布局

    2016-10-29

  • 清除浮动,可去除浮动对其它不需要浮动的元素的影响,clear:both;也可以用空标签如<br>换行,但不是特别好
    查看全部
  • float影响的是紧邻它之后的元素
    查看全部

举报

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

微信扫码,参与3人拼团

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

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