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

网页布局基础

难度入门
时长 1小时30分
学习人数
综合评分9.63
2052人评价 查看评价
9.9 内容实用
9.6 简洁易懂
9.4 逻辑清晰
  • 当元素设置为绝对定位后,元素也会 多出两类属性:偏移量属性 和 Z-index属性 不同的是: 1.该元素已经脱离了标准文档流(不占位) 2.建立的定位基准不是该元素的原来位置,而是分两种情况 2.1:没有设置偏移量:无论是否存在已定位的祖先元素,都保持在元素初始位置,脱离文档流,宽度塌陷(随内容变化而变化) 2.2:设置了偏移量:又分两种情况(A.无已定位的祖先元素 B.有已定位的祖先元素) A.无已定位的祖先元素:它会以根节点(<html>)为偏移参照基准 B.有已定位的祖先元素:它会以距其最近的已定位祖先元素为偏移参照基准
    查看全部
    19 采集 收起 来源:绝对定位

    2018-03-22

  • 纠正一下,9分钟的时候讲解有个解释错误。 设置.left的div左浮动,为什么.right的div没有并排显示? 不是.left的div宽度加上.right的div超过了960px(800+140<960); 而是.left的div脱离了普通流,从而.right的div占据了.left的div普通流的位置,但是左浮动的.left覆盖掉了.right的上半部分(200px的高度),所以.left下半部分只剩下300px的高度。 .right要想和.left并排显示,只有他们都脱离普通流重新排版才可以的哦!
    查看全部
    16 采集 收起 来源:横向两列布局

    2018-03-22

  • 两种清除浮动方法的使用场景: 1、当子元素设置了浮动,父元素没有设置浮动而导致的父元素高度不能自动扩展,缩成一条线,子元素从父元素中溢出时,适合使用同时设置width:100%(或固定宽度值)+overflow:hidden的方式来清除浮动;此法可同时去除紧邻的块级受到的浮动影响,而不需要再对受到浮动影响的紧邻块级元素设置去除浮动。 2、如果是紧邻的块级元素受到浮动影响,对该受到影响的块级设置clear:both或者clear:left,clear:right更为合适。 width设置为100%就是继承父容器的宽度。左右撑满整个容器,为自己清除浮动创建条件。再加溢出隐藏,就可以把包裹浮动的部分去除。 1.p{clear:both;} 2.p{width:100%;overflow:hidden;}
    查看全部
    9 采集 收起 来源:编程练习

    2015-08-25

  • 1.float属性的3个属性值: left-左浮动 right-右浮动 none-不浮动 特点:元素会左移,或右移,直至碰触到容器为止。 2.设置了浮动的元素,仍旧处于标准文档流中,意味着它仍占据标准文档中的空间,会对它周围的元素产生影响。 3.当元素没有设置宽度值,而设置了浮动属性,元素的宽度随内容的变化而变化。 4.当元素设置浮动属性后,会对相邻的元素产生影响,相邻元素特质紧邻后面的元素(DOM结构中的紧邻其后面的元素)。
    查看全部
  • 盒子模型 1.盒子模型=网页布局的基石 由4部分组成:边框(border)、外边距(margin)、内边距、(padding)、盒子中的内容(content)。 2. 边框(border)、外边距(margin)、内边距、(padding)是盒子模型的属性, 有四个方向,可以设定属性值。 顺时针方向设置,为上、右、下、左 3.三个值的属性为: a为上、 b为左右、c为下。 两个值的属性为: a为上下、b为左右。 一个值的属性为: a为上下左右。 4.优先级,就近原则, 行内样式> 内部样式> 外部样式 5.边框三个属性:边框的粗细、样式、颜色、每一个属性值都要有一个空格来个开,空格必须在英文输入法状态下输入才可以,三个属性缺一不可。 6.盒子模型的三维模式的包裹层与ps的模型一样,分为五层: border为第一层、 content+padding为第二层、 background-image为第三层、 background-color为第四层、 marg为第五层。 7.盒子模型尺寸=边框+外边距+内边距+盒子中的内容尺寸
    查看全部
    7 采集 收起 来源:盒子模型

    2018-03-22

  • 相对定位的特点 1、相对于自身原有位置进行偏移 2、仍处于标准文档流中 3、随即拥有偏移属性和z-index属性
    查看全部
    6 采集 收起 来源:相对定位

    2015-09-24

  • right设置与mid的间距为17px: left(110px)+13px+(mid)650px+(border)1px*2+17px=792px
    查看全部
  • 1.清除浮动的常用方法 clear属性-常用clear:both; clear:left,或者clear:right; 清除元素左侧或右侧的浮动 同时设置width:100%(或固定宽度)+overflow:hidden;也是可以清除浮动的。一般给受到浮动的元素设定的。 p{width:100%; overflow:hidden}或p{width:both}
    查看全部
  • W3C标准:由万维网联盟制定的一系列标准,包括: 结构化标准语言(HTML和XML) 表现标准语言(CSS) 行为标准语言(DOM和ECMAScript) 倡导结构、样式、行为分离 CSS中,存在3种的定位机制: 标准文档流(Normal flow) 浮动(Floats) 绝对定位(Absolute positioning) 标准文档流的特点:从上到下,从左到右输出文档内容 由块级元素和行级元素组成 块级元素特点:从左到右撑满页面,独占一行 触碰到页面的边缘时会自动换行 行级元素特点:能在同一行内显示 不会改变HTML文档结构 常见行级标签:span、strong、img、input
    查看全部
  • 当元素没有设置宽度值,而设置了浮动属性,元素的宽度随内容的变化而变化
    查看全部
  • 【网页布局】 网页制作的基础,在w3c盛行的今天“DIV+CSS”布局网页 布局分为:流式布局、浮动布局、绝对定位布局 标准文档流、盒子模型、float属性、position属性 1.自动居中-列布局---盒子模型的使用方法 2.浮动布局---float属性来实现上中下布局和横向两列甚至多列布局,解决浮动影响的常用方法 3.绝对定位布局--上中下布局,实现两列甚至多列布局
    查看全部
  • 浮动:可实现块级元素横向排列 1、3个属性值:left-左浮动,right-右浮动,none-不浮动 2、设置了浮动的元素,仍旧处于标准文档流中,意味着会占据标准文档流中的空间,对周围的元素产生影响 3、当元素没有设置宽度值,而设置了浮动属性,元素的宽度随内容的变化而变化(没内容时直接缩到浮动的那一边,看不见了) 4、当元素设置浮动属性后,会对相邻的元素产生影响,相邻元素特指紧邻后面的元素。
    查看全部
  • 绝对定位的特点: 1.建立了以包含块为基准的定位(*包含块:盒子包装原理--〈div class="box"><div class="box1"></div></div>*) 2.完全脱离了标准文档流(不占据文档流的空间) 3.随机拥有偏移属性和z-index属性 绝对定位:区分偏移量的有无 偏移量参照基准(参照元素设置偏移量,就没有该概念了) 元素有无偏移量的区别: 不设置偏移量时特点:无论是否存在“已定位祖先元素”,都保持在元素初始位置;脱离标准文档流; 设置偏移量时特点: 1.无已定位祖先元素:以〈html〉标签为偏移参照基准 2.有已经定位的祖先元素:以距它最近的元素为基准(如果有多个包裹层时) (注释:当一个元素设置绝对定位,没有设置宽度是,元素的宽度根据内容进行调节,内容越多越宽)
    查看全部
    5 采集 收起 来源:绝对定位

    2018-03-22

  • 清除浮动的常用方法:1、clear属性——常用clear:both;clear:left;或者clear:right。2、同时设置width:100%(或固定宽度)+overflow(移出属性):hidden;(一般情况下对受到浮动影响的元素设置这些属性); 空标签无意义,不建议使用此方法清除浮动。
    查看全部
  • 一 、盒子模型三围立体图 从上到下依次是:1.border、2.content+padding、3.background-image、4.background-color、5.margin 二、自动居中设置 当设置了margin属性的自动居中时,不能再设置浮动和绝对定位了;否则自动居中失效。 三、float浮动属性 1.当元素没有设置宽度,给div设置浮动属性后,div的宽度会随内容的变化而变化。 2.元素设置浮动属性后,会对紧邻其后的元素产生影响。 四、清除浮动 1.清除浮动:对受到影响的元素设置“clear:both;”;清除左浮动:“clear:left;”;清除右浮动:“clear:right;”(左右浮动需要判断元素是左侧浮动还是右侧浮动)【作用于:紧随浮动元素其后元素的浮动清除】 2.清除浮动:“width:100%(或固定宽度)+overflow:hidden”【应用于:父包含块不浮动,子包含块浮动后导致父包含块高度不能随内容为扩充,使用这个浮动清除解决】 3.加<br/>标签实现,不建议使用,加入了无意义标签。 4.建议:div块不设置高度 五、绝对定位——3种定位形式、4种定位属性:静态定位(static)、相对定位(raletive)、绝对定位(absolute/fixed) 1.相对定位(position:relative):相对于自身原有位置定位;仍处于标注文档流中;不会改变自身尺寸,会覆盖其他元素。 2.绝对定位(position:absolute):当设置absolute后,元素脱离文档流但是还在原来的地方;A、若没有已经定位的父辈元素,设置偏移属性后会相对<html>标签偏移。B、若有已经定位的父辈元素,设置偏移属性后会相对“父辈元素偏移”。 *【若元素没有设置宽度,设置absolute后,元素会随内容的增加而才扩充宽度;已经定位的父辈元素:父辈元素设置了绝对定位/相对定位/固定定位其中一种,就是已经定位的元素】 *【偏离文档流后,就无法撑开页面的高度,在使用绝对定位进行二列布局(一固定一自适应)时,要求固定的高度>自适应的高度;利用固定宽度页面撑开父元素的页面。】
    查看全部
首页上一页1234567下一页尾页

举报

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

微信扫码,参与3人拼团

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

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