亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

網頁布局基礎

難度入門
時長 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下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

友情提示:

您好,此課程屬于遷移課程,您已購買該課程,無需重復購買,感謝您對慕課網的支持!

本次提問將花費2個積分

你的積分不足,無法發表

為什么扣積分?

本次提問將花費2個積分

繼續發表請點擊 "確定"

為什么扣積分?

舉報

0/150
提交
取消