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

网页布局基础

难度入门
时长 1小时30分
学习人数
综合评分9.63
2052人评价 查看评价
9.9 内容实用
9.6 简洁易懂
9.4 逻辑清晰
  • 要用绝对定位两列布局时,左侧拦高度必须大于自适应列表的宽度
    查看全部
  • absolute使用时,当一列固定宽度,另一列需要宽度自适应时,会选择绝对定位
    查看全部
  • CSS 规定的定位机制有三种,分别是标准文档流、浮动及绝对定位。
    查看全部
    0 采集 收起 来源:练习题

    2017-01-10

  • 标准流指的是在不使用其他的与排列和定位相关的特殊CSS规则时,各种元素的排列规则。HTML文档中的元素可以分为两大类:行内元素和块级元素。 1.行内元素不占据单独的空间,依附于块级元素,行内元素没有自己的区域。它同样是DOM树中的一个节点,在这一点上行内元素和块级元素是没有区别的。 2.块级元素总是以块的形式表现出来,并且跟同级的兄弟块依次竖直排列,左右自动伸展,直到包含它的元素的边界,在水平方向不能并排。
    查看全部
  • 盒子模型
    查看全部
    0 采集 收起 来源:盒子模型

    2017-01-10

  • 相邻元素特指紧邻后面的元素
    查看全部
  • 当一个元素设置绝对定位没有设置宽度时,元素的宽度根据内容进行调节。 绝对定位中,如果父元素没有设置定位,应该以html为基准。
    查看全部
  • 因为overflow.hidden会触发BFC。 BFC的意思是,我这个元素里面的子孙元素,不会影响外部元素的布局。 但浮动本身会造成行内宽度的压缩,出现文字环绕效果。如此一来,浮动元素越宽,当然行内的可容纳的文字数就越少,文字的行数就会增加,文档流高度也就增加。这样,就影响了其外部元素的布局。 所以从BFC的本意来说,必须给浮动元素撑出高度,使得后续的元素无法跟浮动元素共享同一水平位置,看上去就是 clear both 的效果了。 因为height: auto;的计算结果不是一定为0的。 正常父元素包含浮动子元素,父元素的高度确实为0。 但是父元素overflow:hidden;后,首先会计算height: auto;的真实高度,由于其触发了BFC,需要包含子元素,所以高度不是0,而是子元素高度。 这时overflow:hidden;才起到隐藏作用,不过父元素高度足够大,所以子元素没有被隐藏。 总之,是先计算真实高度,再去隐藏。如果是先直接隐藏了,再去计算高度也就没有意义了。
    查看全部
    0 采集 收起 来源:编程练习

    2017-01-10

  • 学习了
    查看全部
  • 使用absolute实现横向两列布局——常用于一列固定宽度,另一列宽度自适应的情况 主要应用技能: relative——父元素相对定位 absolute——自适应宽度元素绝对定位 注意:固定宽度列的高度>自适应宽度的列
    查看全部
  • powition 定位的方式
    查看全部
  • CSS 规定的定位机制有三种,分别是标准文档流、浮动及绝对定位。 css中position属性有四种:static(正常文档流)、relative(相对定位)、absoulute(绝对定位)、fixed(固定定位)。 定位机制大体上分三种:流、浮动、层。 三大类:盒子模型,流模型,层模型; 流模型:标准文档流、浮动流; 层模型:相对、绝对、固定、正常; 绝对定位 与 浮动流 会将元素变为inline-block
    查看全部
    0 采集 收起 来源:练习题

    2017-01-10

  • 清除浮动要使用在被影响的元素里面
    查看全部
  • 自动居中一列布局需要设置 margin 左右值设置为 auto,而且一定要设置width为一个定值。
    查看全部
    0 采集 收起 来源:练习题

    2017-01-09

  • ),从第一层到第五层依次为:border、content+padding、background-image、background-color、margin。
    查看全部
    0 采集 收起 来源:练习题

    2017-01-09

举报

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

微信扫码,参与3人拼团

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

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