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

网页布局基础

难度入门
时长 1小时30分
学习人数
综合评分9.63
2052人评价 查看评价
9.9 内容实用
9.6 简洁易懂
9.4 逻辑清晰
老师讲得很好,很仔细,学到了很多东西。
讲解内容清晰明了,结合案例说明。对于方法的实现条件和局限性进行说明,非常好。辛苦了!
左边少了个border 复制mid里面的加上就好了

最新回答 / 慕沐4465960
直接写进去就好了啊
*{margin:0; padding:0;}
#wrap{width:970px; margin:0 auto;}
#mainbody{position:relative; margin-top:15px;}
#left{float:left;width:110px;border:1px solid gray; }
#mid{position:absolute;left:123px;width:650px;border:1px solid #999;}
#right{position:absolute;left:790px;top:0px;border:1px solid #999;}

最新回答 / weixin_慕函数2472239
后面的p标签有内容为啥要被盖住,前面的box1 box2有了内容也不会被盖住。设置了浮动属性没设置宽度,盒子的宽度是随盒子的内容自适应的
对于父元素的影响清除就是:width:100%;overflow:hidden;

对于自己临近的清除就是:clear:both;
content里的width应该是732px
设置偏移量但是无已定相位的父元素,在分析以html为偏参照基准还是以body的时候没看懂,谁能解释下,我看9分12秒和9分18秒没啥区别┭┮﹏┭┮
第二种就是给mainbody设置overflow:hidden并设置宽度, overflow:hidden属性相当于是让父级紧贴内容,这样即可紧贴其对象内内容(包括使用float的div盒子),从而实现了清除浮动。
缺点是不能和position配合使用,因为超出的尺寸的会被隐藏。
所以推荐在没有position布局和float布局混合使用的情况下使用。
清除浮动除了视频讲解中两种方法以外还有很多方法(视频讲的还是很浅的)
第一种clear:both,清除临近的元素的浮动影响,可以通过在mainbody中加一个空div,给空div设置clearboth。
<div id="mainbody">
<div class="left"></div>
<div class="right"></div>
<div class="clearfloat"></div>
</div>
css中加代码:
.clearfloat{clear:both;}
缺点是需要加一个空div,会造成结构混乱,所以不推荐。
这视频可以下载嘛?
当块级元素设置float:left;或position:absolute;时,对隐性的改变元素的display属性为inline-block,所以元素的宽度才会随着内容进行调节
使用 overflow 默认值(visible)以外的值将创建一个新的 块级格式化上下文. 这在技术层面上是必须的——如果一个浮动元素和滚动条相交,它会强制(重新)包围内容元素。 (个人理解) 因为left与right漂浮于mainbody上方,导致left与right会超出mainbody块所能包含的区域,为了让mainbody块能够包裹住left和right,会强制性创建一个区块将left与right包裹住,所以mainbody的高度会包裹住left与right。
课程须知
1.一定要对HTML+CSS相关标签有所掌握;2.对网页布局知识有简单的了解
老师告诉你能学到什么?
1.掌握三大布局技巧——流式布局、浮动布局及绝对定位布局;2.精通标准文档流、盒子模型、float属性以及position属性等知识。

微信扫码,参与3人拼团

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

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

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

举报

0/150
提交
取消