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

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

header塊為什么需要寫overflow:hidden呢

header塊受到誰的浮動影響需設置消除浮動嗎？mainbody塊的relative定位不會對header有影響，content塊的absolute定位也不會有影響額。求解

正在回答

2 回答

因為header里面的導航條nav-li設置了浮動，會影響后面布局

0 回復 有任何疑惑可以回復我~
#1

寶寶心里苦 提問者

3q
2016-02-15 回復 有任何疑惑可以回復我~

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>絕對定位實現布局</title>

<style type="text/css">

* {

? ? margin:0;

padding:0;

font-size:12px;

color:#333;

font-family:Verdana, Geneva, sans-serif, "宋體";

list-style:none;

}

a {

text-decoration:none;

}

a:hover {

text-decoration:underline;

color:#ff0000;

}

p {

line-height:24px;

}

#wrap {

width:780px;

margin:0 auto;

padding:0 10px 10px;

border-left:1px solid #e7e7e7;

border-right:1px solid #e7e7e7;

}

#header {

width:100%;

overflow:hidden;

}

.logo {

width:100%;

height:80px;

line-height:80px;

font-size:30px;

font-family:"微軟雅黑";

background:#3399cc;

color:#fff;

text-indent:30px;

}

.nav {

width:100%;

margin-top:10px;

}

.nav li {

margin:0 32px;

float:left;

}

.nav li a {

color:#7f7f7f;

font-size:16px;

display:block;

padding-bottom:2px;

}

.nav li a:hover {

border-bottom:3px solid #cc0000;

text-decoration:none;

}

.nav li.current {

border-bottom:3px solid #cc0000;

}

.nav li.current a:hover {

border-bottom:none;

}

#mainbody {

? ? width:100%;

? ? position：relative ?//參照物

? ? margin-top:20px;

}

#sidebar {

width:180px;

padding-bottom:10px;

}

#sidebar dl {

padding:0 0 5px;

}

#sidebar dt {

font-weight:bold;

line-height:22px;

font-family:"微軟雅黑";

font-size:14px;

color:#fff;

background:#3399cc;

padding:5px 0 5px 15px;

font-weight:normal;

margin-bottom:10px;

}

#sidebar dd {

line-height:20px;

padding-left:15px;

}

#sidebar dd.current a {

color:#f00;

}

#content {

?position：absolute

?margin-left：200px

?top:0;


}

#content h1 {

color:#000;

font-size:24px;

font-family:"微軟雅黑";

font-weight:normal;

}

#content ?h3 {

margin-top:10px;

line-height:26px;

}

#content ?dl {

margin-bottom:10px;

}

#content ?dt {

font-weight:bold;

line-height:26px;

}

#content ?dd {

line-height:22px;

}

.learn a {

color:#900b09;

text-decoration:underline;

padding-bottom:2px;

}

.learn a:hover {

text-decoration:none;

}

.tips {

color:#999;

margin-top:20px;

}

.pageto {

border-top:1px solid #aaa;

border-bottom:3px solid #aaa;

margin-top:5px;

padding:15px 0;

}

.pageto a {

margin:0 10px;

background:#f3f3f3;

padding:5px 20px;

border:1px solid #dfdfdf;

color:#555;

}

.pageto a:hover {

color:#000;

text-decoration:none;

}

.disline {

border-bottom:1px dashed #ccc;

margin-top:10px;

}

#footer {

width:100%;

margin-top:15px;

padding:15px 0;

text-align:center;

color:#999;

background:#ddd;

}

</style>

</head>


<body>

<div id="wrap">

? <div id="header">

? ? <div class="logo">前端開發教程</div>

? ? <div class="nav">

? ? ? <ul>

? ? ? ? <li class="current"><a href="#">CSS</a></li>

? ? ? ? <li><a href="#">HTML</a></li>

? ? ? ? <li><a href="#">JavaScript</a></li>

? ? ? ? <li><a href="#">jQuery</a></li>

? ? ? ? <li><a href="#">Ajax</a></li>

? ? ? </ul>

? ? </div>

? </div>

? <div id="mainbody">

? ? <div id="sidebar">

? ? ? <dl>

? ? ? ? <dt>CSS 基礎教程</dt>

? ? ? ? <dd class="current"><a href="#">CSS 簡介</a></dd>

? ? ? ? <dd><a href="#">CSS 基礎語法</a></dd>

? ? ? ? <dd><a href="#">CSS 高級語法</a></dd>

? ? ? ? <dd><a href="#">CSS 派生選擇器</a></dd>

? ? ? ? <dd><a href="#">CSS id 選擇器</a></dd>

? ? ? ? <dd><a href="#">CSS 類選擇器</a></dd>

? ? ? ? <dd><a href="#">CSS 屬性選擇器</a></dd>

? ? ? ? <dd><a href="#">CSS 創建</a></dd>

? ? ? </dl>

? ? ? <dl>

? ? ? ? <dt>CSS 樣式</dt>

? ? ? ? <dd><a href="#">CSS 背景</a></dd>

? ? ? ? <dd><a href="#">CSS 文本</a></dd>

? ? ? ? <dd><a href="#">CSS 字體</a></dd>

? ? ? ? <dd><a href="#">CSS 鏈接</a></dd>

? ? ? ? <dd><a href="#">CSS 列表</a></dd>

? ? ? ? <dd><a href="#">CSS 表格</a></dd>

? ? ? ? <dd><a href="#">CSS 輪廓</a></dd>

? ? ? </dl>

? ? ? <dl>

? ? ? ? <dt>CSS 盒子模型</dt>

? ? ? ? <dd><a href="#">CSS 盒子模型概述</a></dd>

? ? ? ? <dd><a href="#">CSS 內邊距</a></dd>

? ? ? ? <dd><a href="#">CSS 邊框</a></dd>

? ? ? ? <dd><a href="#">CSS 外邊距</a></dd>

? ? ? ? <dd><a href="#">CSS 外邊距合并</a></dd>

? ? ? </dl>

? ? ? <dl>

? ? ? ? <dt>CSS 定位</dt>

? ? ? ? <dd><a href="#">CSS 定位概述</a></dd>

? ? ? ? <dd><a href="#">CSS 相對定位</a></dd>

? ? ? ? <dd><a href="#">CSS 絕對定位</a></dd>

? ? ? ? <dd><a href="#">CSS 浮動</a></dd>

? ? ? </dl>

? ? ? <dl>

? ? ? ? <dt>CSS 選擇器</dt>

? ? ? ? <dd><a href="#">CSS 元素選擇器</a></dd>

? ? ? ? <dd><a href="#">CSS 選擇器分組</a></dd>

? ? ? ? <dd><a href="#">CSS 類選擇器詳解</a></dd>

? ? ? ? <dd><a href="#">CSS ID 選擇器詳解</a></dd>

? ? ? ? <dd><a href="#">CSS 屬性選擇器詳解</a></dd>

? ? ? ? <dd><a href="#">CSS 后代選擇器</a></dd>

? ? ? ? <dd><a href="#">CSS 子元素選擇器</a></dd>

? ? ? ? <dd><a href="#">CSS 相鄰兄弟選擇器</a></dd>

? ? ? ? <dd><a href="#">CSS 偽類</a></dd>

? ? ? ? <dd><a href="#">CSS 偽元素</a></dd>

? ? ? </dl>

? ? ? <dl>

? ? ? ? <dt>CSS 高級</dt>

? ? ? ? <dd><a href="#">CSS 對齊</a></dd>

? ? ? ? <dd><a href="#">CSS 尺寸</a></dd>

? ? ? ? <dd><a href="#">CSS 分類</a></dd>

? ? ? ? <dd><a href="#">CSS 導航欄</a></dd>

? ? ? ? <dd><a href="#">CSS 圖片庫</a></dd>

? ? ? ? <dd><a href="#">CSS 圖片透明</a></dd>

? ? ? ? <dd><a href="#">CSS 媒介類型</a></dd>

? ? ? ? <dd><a href="#">CSS 注意事項</a></dd>

? ? ? ? <dd><a href="#">CSS 總結</a></dd>

? ? ? </dl>

? ? </div>

? ? <div id="content">

? ? ? <h1>CSS 簡介</h1>

? ? ? <div class="pageto"><a href="#">上一章</a> <a href="#">下一章</a></div>

? ? ? <h3>你應該知道這些知識</h3>

? ? ? <p>在繼續之前，你應該有一個以下基本認識：</p>

? ? ? <p>&middot; HTML / XHTML</p>

? ? ? <p class="learn">如果您希望首先學習這些項目，我們的<a href="#">主頁</a>上可以找到教程。</p>

? ? ? <div class="disline"></div>

? ? ? <h3>什么是CSS？</h3>

? ? ? <p>CSS即級聯樣式表。

? ? ? ? 它是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。</p>

? ? ? <div class="disline"></div>

? ? ? <h3>基本信息</h3>

? ? ? <p>CSS目前最新版本為CSS3，是能夠真正做到網頁表現與內容分離的一種樣式設計語言。相對于傳統HTML的表現而言，CSS能夠對網頁中的對象的位置排版進行像素級的精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力，并能夠進行初步交互設計，是目前基于文本展示最優秀的表現設計語言。CSS能夠根據不同使用者的理解能力，簡化或者優化寫法，針對各類人群，有較強的易讀性。</p>

? ? ? <div class="disline"></div>

? ? ? <h3>發展歷史</h3>

? ? ? <dl>

? ? ? ? <dt>CSS1</dt>

? ? ? ? <dd>作為一項W3C推薦，CSS1發布于 1996年12月17 日。1999 年1月11日，此推薦被重新修訂。</dd>

? ? ? </dl>

? ? ? <dl>

? ? ? ? <dt>CSS2</dt>

? ? ? ? <dd>作為一項 W3C 推薦，CSS2發布于 1999年1月11日。CSS2添加了對媒介（打印機和聽覺設備）和可下載字體的支持。</dd>

? ? ? </dl>

? ? ? <h3>CSS3</h3>

? ? ? <dl>

? ? ? ? <dt>CSS3 計劃將 CSS 劃分為更小的模塊。</dt>

? ? ? ? <dd class="learn"><a href="#">親自體驗一下</a>！</dd>

? ? ? </dl>

? ? ? <div class="pageto"><a href="#">上一章</a> <a href="#">下一章</a></div>

? ? ? <p class="tips">本站提供的內容僅用于學習培訓。我們不保證內容的正確性。通過使用本站內容隨之而來的風險與本站無關。</p>

? ? </div>

? </div>

? <div id="footer">慕課&copy;版權所有</div>

</div>

</body>

</html>

已經為父級元素mainbody設置了position：relative和子元素content設置了position：absolute，但是沒有效果 ? 請問這是怎么回事

0 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消
網頁布局基礎
  • 參與學習       214663    人
  • 解答問題       1833    個

讓你精通CSS中三大定位機制，徹底掌握網頁布局的相關知識

進入課程

header塊為什么需要寫overflow:hidden呢

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

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

 公眾號

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