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

网页布局基础

难度入门
时长 1小时30分
学习人数
综合评分9.63
2052人评价 查看评价
9.9 内容实用
9.6 简洁易懂
9.4 逻辑清晰
  • position定位 实现横向多列布局及较为复杂的定位 静态定位 相对定位 绝对定位 static静态定位-元素还处于标准文档流中 relative相对定位 absolute绝对定位 fixed固定定位 absolute,fixed均属于绝对定位
    查看全部
  • 清除浮动常用方法: 对受浮动影响元素设置 1.clear属性-clear:left;/clear:right;/clear:both; 2.同时设置width:100%(或其他宽度)+overflow:hidden; (若视图里浮动未清除,浏览器中有显示清楚。以浏览器为主) 对段落清除浮动,还可以设置空标签。像<br/>等,但不建议。 横向两列布局应用技能: float属性-使纵向排列块级元素,横向排列 margin属性-设置两列之间间距 当父包含块缩成一条时,用clear:both方法清除浮动无效,它一般用于紧邻后面的元素的清除浮动 div高度最好不要设置
    查看全部
    0 采集 收起 来源:横向两列布局

    2018-03-22

  • 实现块级元素横向多列布局。 通过float属性(left,none,right)设置,直至碰到容器边框。 设置浮动的元素,仍在标准文档流之中。所以对周围文档会产生影响。 元素没有设置宽度的时候,设置浮动,元素宽度会随内容改变。 元素设置浮动属性后,会对相邻的元素产生影响,相邻元素特指紧邻后面的元素。
    查看全部
  • 已知一设置了绝对定位的元素b,位于其父元素a中,a元素为静态定位,则b元素将以( HTML)为基准进行偏移。 因为a元素为静态定位,所以要以根元素为基准进行偏移,也就是html元素。
    查看全部
    0 采集 收起 来源:练习题

    2014-12-02

  • 使用absolute实现横向两列布局—— 常用于一列固定宽度,另一列宽度自适应的情况 主要应用技能: relative——父元素相对定位 absolute——自适应宽度元素绝对定位
    查看全部
  • 自动居中一列布局 三个技能点: 标准文档流、块级元素、margin属性 若设页面自动居中,使用margin:0 auto; 不能再设置浮动或定位
    查看全部
  • 绝对定位:position:absolute 特点: 1、建立以包含块为基准的定位:即在父级定位 2、完全脱离了标准文档流:不占据文档流中的位置(其他元素当它不存在)可是它还是会显示 3、定义了position属性的都具有z-index属性(需要考虑垂直方向上的层叠显示,值大的在上先显示) 拥有偏移属性:top、left等。 1.a 未设置偏移量(top,left)。 元素保持在原始位置(不管其有没有具有固定定位的祖先元素) 脱离了文档流 1.b 设置了偏移量 ①具有已经定位的祖先元素(单个或多个),以最近的祖先元素为基准,进行偏移 ②没有已经定位的祖先元素,以HTML为基准(视图窗口)进行偏移,而不是body元素为基准。 note 1:在没有定义宽度是:所有的内联元素的宽度是根据内容大小而定的,所有的外联元素的宽度就是100%;当有了float和绝对定位时时,使得外联元素的宽度变成根据实际内容大小而定。 note 2:元素的祖先定位元素:即使用了position:relative/absolute属性的元素。
    查看全部
    0 采集 收起 来源:绝对定位

    2014-12-02

  • 相对定位 特点: 1 设置了相对定位的元素会相对于自身原有的位置进行偏移; 2 仍处于标准文档流中,占据空间; 3 设置之后拥有偏移属性和z-index(空间层堆叠,z轴) 属性,会遮盖其他元素; 定位布局中,除了绝对定位(脱离文档流,对其他元素没有影响),其他都是处在标准文档流中的,包括float也是
    查看全部
    0 采集 收起 来源:相对定位

    2014-12-02

  • position 定位形式:静态定位、相对定位、绝对定位 属性值:static(默认状态,文档流的定位) relation 相对定位 absolute 绝对定位 fixed 固定定位(属于绝对定位)
    查看全部
  • 盒子3D模型: 第一层:border 第二层:content+padding 第三层:background-image 第四层:background-color 第五层:margin
    查看全部
    0 采集 收起 来源:盒子模型

    2014-12-02

  • W3C标准:由万维网联盟制定的一系列标准,包括结构化标准语言(HTML和XML)、表现标准语言(CSS)、行为标准语言(DOM和ECMAScript),倡导结构、样式、行为分离 DW设计视图模拟的是IE浏览器。有默认样式,所以一开始会有间距,填不满。 CSS的定位机制: 标准文档流定位-1.从上到下,从左到右,输出文档内容2.由块级元素和行级元素(能在同一行显示,且不改变文档格式)共同组成 浮动 绝对定位
    查看全部
  • 设置 清除浮动; 方法一:常用clear:both, 或者clear:left ,right; 方法二:设置width:100% (或固定宽度)+ overflow:hidden; 元素移除属性;
    查看全部
  • 流式布局、浮动布局、绝对布局; 标准文档流、盒子模型、float属性、position属性; 自动居中一列布局、浮动布局、绝对定位布局;
    查看全部
  • http://img1.sycdn.imooc.com//547db6d00001fd7812000530-120-68.jpg
    查看全部
  • 行级元素
    查看全部

举报

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

微信扫码,参与3人拼团

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

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