1.網(wǎng)頁布局基礎(chǔ)

網(wǎng)頁布局基礎(chǔ)

什么是網(wǎng)頁布局？
網(wǎng)頁布局是網(wǎng)頁制作的基礎(chǔ)（DIV+CSS網(wǎng)頁布局）

分類:流式布局，浮動(dòng)布局，絕對(duì)定位布局

知識(shí)點(diǎn)：標(biāo)準(zhǔn)文檔流，盒子模型，float屬性，position屬性。

三個(gè)案例：

  • 自動(dòng)居中一列布局案例（盒子模型的使用方法）

  • 浮動(dòng)布局案例（float屬性 解決浮動(dòng)影響的方法）

  • 絕對(duì)定位布局案例（絕對(duì)定位實(shí)現(xiàn)橫向兩列或者多列布局）

CSS規(guī)定的定位機(jī)制是以下三種（不包括fixed定位）：

  • 絕對(duì)定位（Absolute positioning)
  • 浮動(dòng)定位(Floats)
  • 標(biāo)準(zhǔn)文檔流(Normal flow)：

特點(diǎn)：

  1. 從上到下，從左到右，輸出文檔內(nèi)容。
  1. 由塊級(jí)元素和行級(jí)元素組成

塊級(jí)元素：特點(diǎn)：從左到右撐滿頁面，獨(dú)占一行 觸碰到頁面邊緣時(shí)，會(huì)自動(dòng)換行

div就是一個(gè)典型的塊級(jí)元素

常見的塊級(jí)元素（即塊級(jí)標(biāo)簽），如：div,ul,li,dl,dt,p...

行級(jí)元素：特點(diǎn)：能在同一行內(nèi)顯示 不會(huì)改變HTML文檔結(jié)構(gòu)

常見的行級(jí)元素（即行級(jí)標(biāo)簽），如：span,strong,img,input...大部分表單元素（即表單標(biāo)簽）都屬于行級(jí)元素（行級(jí)標(biāo)簽）。

總結(jié)：塊級(jí)元素和行級(jí)元素都是盒子模型

W3C標(biāo)準(zhǔn)：由萬維網(wǎng)聯(lián)盟制定的一系列標(biāo)準(zhǔn)，包括：

  • 結(jié)構(gòu)化標(biāo)準(zhǔn)語言（HTML和XML)
  • 表現(xiàn)標(biāo)準(zhǔn)語言（CSS）
  • 行為標(biāo)準(zhǔn)語言（DOM和ECMAScript)

W3C標(biāo)準(zhǔn)倡導(dǎo)結(jié)構(gòu)，樣式，行為分離。

盒子模型

盒子模型=網(wǎng)頁布局的基石，由4個(gè)部分組成：

  • 邊框（border）
  • 外邊距（margin)
  • 內(nèi)邊距（padding）
  • 盒子中的內(nèi)容（content)

盒子模型的立體圖片,從第一層到第五層依次為：border、content+padding、background-image、background-color、margin。

盒子模型例子代碼如下：

<!DOCTYPE>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
    *{margin:0;padding:0;}
    .content{border:4px solid #badbdb;padding:44px 15px 15px;width:700px;}
    .book{background: url(images/t_book.gif) no-repeat #eff9f9;}
    img{margin:10px 18px;border:1px solid #b1adad;}

 </style>
 </head>
<body>
<div class="content book">
  [站外圖片上傳中……(77)]
  [站外圖片上傳中……(78)]
  [站外圖片上傳中……(79)]
  [站外圖片上傳中……(80)]
  [站外圖片上傳中……(81)]
</div>  
</body>
</html>

效果如下：

自動(dòng)居中一列布局

三個(gè)技能點(diǎn)：

  • 標(biāo)準(zhǔn)文檔流
  • 塊級(jí)元素
  • margin屬性

自動(dòng)居中一列布局 代碼如下：

<!DOCTYPE>
<html>
  <head>
     <meta charset="UTF-8">
     <title></title>
     <style type="text/css">
            *{margin:0;padding:0;}
            #wrap{width:770px;margin:0 auto;}
            #header{width:100%;height:200px;padding:1px solid red;}
            #mainbody{width:100%;height:200px;padding:1px solid blue;}
            #footer{width:100%;height:200px;padding:1px solid green;}

            .content{border:4px solid #badbdb;padding:44px 15px 15px;width:700px;}
            .book{background: url(images/t_book.gif) no-repeat #eff9f9;}
            img{margin:10px 18px;border:1px solid #b1adad;}
      </style>
   </head>
 <body>
        <div id="wrap">
              <div id="header"></div>
                <div id="mainbody">
                    <div class="content book">
                        [站外圖片上傳中……(82)]
                        [站外圖片上傳中……(83)]
                        [站外圖片上傳中……(84)]
                        [站外圖片上傳中……(85)]
                        [站外圖片上傳中……(86)]
                    </div>
                 </div>
                <div id="footer"></div>
         </div> 
  </body>
 </html>

實(shí)際效果如下：實(shí)現(xiàn)了自動(dòng)居中的效果

總結(jié)：auto會(huì)根據(jù)瀏覽器的寬度自動(dòng)的設(shè)置兩邊的外邊距。

實(shí)現(xiàn)網(wǎng)頁自動(dòng)居中一列布局的關(guān)鍵代碼是margin:10px auto; width:80%;,自動(dòng)居中一列布局需要設(shè)置 margin 左右值設(shè)置為 auto，而且一定要設(shè)置width為一個(gè)定值。

原理：（瀏覽器的寬度-外包含層的寬度）/2=外邊距

如果想讓頁面自動(dòng)居中，當(dāng)設(shè)置margin屬性為auto的時(shí)候，不能再設(shè)置浮動(dòng)（如float:left;)或者絕對(duì)定位（position:absolute;或者position:fixed;)

橫向兩列布局

1.浮動(dòng)布局簡(jiǎn)介以及float屬性

CSS中規(guī)定的第二種定位機(jī)制（即浮動(dòng)布局）能夠?qū)崿F(xiàn)橫向多列布局（橫向兩列布局和橫向三列布局），通過設(shè)置float屬性實(shí)現(xiàn)。

float屬性（3個(gè)屬性值）：

  • left-左浮動(dòng)
  • right-右浮動(dòng)
  • none-不浮動(dòng)

特點(diǎn)：元素會(huì)左移，或右移，直至觸碰到容器為止。

設(shè)置了浮動(dòng)的元素，仍舊處于標(biāo)準(zhǔn)文檔流中。（會(huì)對(duì)周圍元素產(chǎn)生影響）

示例如下：

   <!DOCTYPE>
   <html>
     <head>
       <meta charset="UTF-8">
       <title></title>
         <style type="text/css">
             .box1{height:50px;background: red;float:left;}
             .box2{height:50px;background: blue;}
         </style>
     </head>
   <body>
     <div class="box1"></div>
     <div class="box2"></div>
   </body>
   </html>

效果如下：

若為box1設(shè)置了左浮動(dòng)（float：left;)

效果如下：

box1沒有內(nèi)容的時(shí)候（也沒有設(shè)置寬度的時(shí)候），再設(shè)置了浮動(dòng)以后，尺寸得不到擴(kuò)展，就會(huì)縮成一個(gè)小圓點(diǎn)出現(xiàn)在瀏覽器的左上角。box1沒有內(nèi)容，看不出來。

若為box1加上內(nèi)容：

效果如下：

總結(jié)：


如下圖示例：

效果如下：

總結(jié)：

添加代碼如下：

效果如下：

設(shè)置右浮動(dòng)（float:right;)同上原理

另外兩種情況：

1）.

2）.

2.清除浮動(dòng)的常用方法

（1）clear屬性---常用clear:both;
(clear:left;或者clear:right;)

（2）同時(shí)設(shè)置width:100%(或固定寬度）+overflow:hidden;

示例如下：

     <!DOCTYPE>
     <html>
     <head>
          <meta charset="UTF-8">
          <title></title>
          <style type="text/css">
               .box1{height:50px;background: red;float:left;}
               .box2{height:50px;background: blue;float:left;}
          </style>
     </head>
     <body>
           <p>bbbbbbbbbbbb</p>
           <div class="box1">盒子1盒子1盒子1盒子1</div>
           <div class="box2">盒子2</div>
           <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>

     </body>
     </html>

效果如下：

可以看見P標(biāo)簽里面的內(nèi)容受到浮動(dòng)的影響，加入clear:both；后清除浮動(dòng)

效果如下：

加入 p{width:100%;overflow: hidden;}

效果如下：

另外空標(biāo)簽br標(biāo)簽對(duì)塊級(jí)元素清除浮動(dòng)比較明顯（不建議使用）：

效果如下：

3.橫向兩列布局

代碼如下：

<!DOCTYPE>
<html>
<head>
     <meta charset="UTF-8">
     <title></title>
     <style type="text/css">
         *{margin:0;padding: 0;}
         #wrap{background: #00C;margin: 0 auto;width:960px;}
         #header{background: #FF3300;width:100%;}
         #mainbody{background: #FC0;width:100%;}
         .left{width:800px;height:200px;background: #fff;}
         .right{width:140px;height:500px;background: #690;}
         #footer{background: #639;width:100%;}
     </style>
</head>
<body>
<div id="wrap">
   <div id="header">頭部</div>
   <div id="mainbody">
      <div class="left"></div>
      <div class="right"></div>

   </div>
   <div id="footer">版權(quán)部分</div>
</div>

</body>
</html>

效果如下：

修改代碼如下：

效果如下：

浮動(dòng)效果沒有顯示，因?yàn)閷挾燃釉谝黄鸷笠呀?jīng)放不下兩個(gè)元素了

修改代碼如下：

效果如下：

這兩個(gè)元素設(shè)置浮動(dòng)以后，對(duì)它們的包裹層，也就是mainbody層受到影響，mainbody層高度沒辦法擴(kuò)展了，還有就是緊鄰right層也就是版權(quán)部分所在的層縮上來了。

這時(shí)對(duì)受到影響的mainbody層清除浮動(dòng)，即添加clear:both;

效果如下（沒有任何改變）：

why?

這個(gè)時(shí)候，使用overflow:hidden;來清除浮動(dòng)。

效果如下：

如果想要它們有間距，修改代碼如下：

效果如下：

通常制作網(wǎng)頁過程中，div塊的高度一般不需要設(shè)置。

還有一種方法就是在right中設(shè)置右浮動(dòng)float:right;,修改代碼：

效果如下：

這種適合橫向兩列布局的情況，若是橫向三列布局，還是需要設(shè)置一個(gè)外邊距。

絕對(duì)定位布局

例如：

1.相對(duì)定位

舉例如下：

<!DOCTYPE>
<html>
<head>
   <meta charset="UTF-8">
   <title></title>
   <style type="text/css">
           .box1{background: red;height: 300px;position:relative;}
           .box2{background: green;height:100px;}
           .box3{background: blue;height: 200px;}
   </style>
</head>
<body>
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <div class="box3">box3</div>
</body>
</html>

設(shè)置了相對(duì)定位（沒有設(shè)置偏移量）后的效果如下：

沒有任何變化（與沒有設(shè)置相對(duì)定位的時(shí)候相比）

設(shè)置偏移量的時(shí)候，修改代碼：

效果如下：

一旦設(shè)置了相對(duì)定位就會(huì)（1）隨機(jī)擁有偏移屬性，（2）產(chǎn)生空間的層堆疊（有元素重合的時(shí)候會(huì)對(duì)元素進(jìn)行遮蓋），（3）仍處在標(biāo)準(zhǔn)文檔流中（把瀏覽器撐開了）

2.絕對(duì)定位

絕對(duì)定位分為兩種情況：

舉例如下：

效果如下：

寬度會(huì)跟著內(nèi)容擴(kuò)展而擴(kuò)展：

效果如下：

修改代碼如下：

效果如下：

修改代碼如下：

效果如下：

box2是依據(jù)瀏覽器為偏移基準(zhǔn)

再次修改代碼:

效果如下：

另外一種情況：

效果如下：

為什么會(huì)出現(xiàn)條狀呢？

修改代碼：

效果如下：

修改代碼：

效果如下：

橫向兩列布局

舉例：

完成下面橫向兩列排版：

即：

代碼如下：

主體部分HTML代碼：

 <!DOCTYPE>
 <html >
 <head>
 <meta charset="utf-8" >
 <title>絕對(duì)定位實(shí)現(xiàn)布局</title>
 <link href="css/style.css" rel="stylesheet" type="text/css" />
 </head>

 <body>
 <div id="wrap">
   <div id="header">
     <div class="logo">前端開發(fā)教程</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 基礎(chǔ)教程</dt>
    <dd class="current"><a href="#">CSS 簡(jiǎn)介</a></dd>
    <dd><a href="#">CSS 基礎(chǔ)語法</a></dd>
    <dd><a href="#">CSS 高級(jí)語法</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 創(chuàng)建</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 內(nèi)邊距</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 相對(duì)定位</a></dd>
    <dd><a href="#">CSS 絕對(duì)定位</a></dd>
    <dd><a href="#">CSS 浮動(dòng)</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 高級(jí)</dt>
    <dd><a href="#">CSS 對(duì)齊</a></dd>
    <dd><a href="#">CSS 尺寸</a></dd>
    <dd><a href="#">CSS 分類</a></dd>
    <dd><a href="#">CSS 導(dǎo)航欄</a></dd>
    <dd><a href="#">CSS 圖片庫</a></dd>
    <dd><a href="#">CSS 圖片透明</a></dd>
    <dd><a href="#">CSS 媒介類型</a></dd>
    <dd><a href="#">CSS 注意事項(xiàng)</a></dd>
    <dd><a href="#">CSS 總結(jié)</a></dd>
   </dl>
 </div>
 <div id="content">
  <h1>CSS 簡(jiǎn)介</h1>
  <div class="pageto"><a href="#">上一章</a> <a href="#">下一章</a></div>
  <h3>你應(yīng)該知道這些知識(shí)</h3>
  <p>在繼續(xù)之前，你應(yīng)該有一個(gè)以下基本認(rèn)識(shí)：</p>
  <p>· HTML / XHTML</p>
  <p class="learn">如果您希望首先學(xué)習(xí)這些項(xiàng)目，我們的<a href="#">主頁</a>上可以找到教程。</p>
  <div class="disline"></div>
  <h3>什么是CSS？</h3>
  <p>CSS即級(jí)聯(lián)樣式表。
它是一種用來表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語言。</p>
  <div class="disline"></div>
  <h3>基本信息</h3>
  <p>CSS目前最新版本為CSS3，是能夠真正做到網(wǎng)頁表現(xiàn)與內(nèi)容分離的一種樣式設(shè)計(jì)語言。相對(duì)于傳統(tǒng)HTML的表現(xiàn)而言，CSS能夠?qū)W(wǎng)頁中的對(duì)象的位置排版進(jìn)行像素級(jí)的精確控制，支持幾乎所有的字體字號(hào)樣式，擁有對(duì)網(wǎng)頁對(duì)象和模型樣式編輯的能力，并能夠進(jìn)行初步交互設(shè)計(jì)，是目前基于文本展示最優(yōu)秀的表現(xiàn)設(shè)計(jì)語言。CSS能夠根據(jù)不同使用者的理解能力，簡(jiǎn)化或者優(yōu)化寫法，針對(duì)各類人群，有較強(qiáng)的易讀性。</p>
  <div class="disline"></div>
  <h3>發(fā)展歷史</h3>
   <dl><dt>CSS1</dt>
   <dd>作為一項(xiàng)W3C推薦，CSS1發(fā)布于 1996年12月17 日。1999 年1月11日，此推薦被重新修訂。</dd></dl>
  <dl>
    <dt>CSS2</dt>
    <dd>作為一項(xiàng) W3C 推薦，CSS2發(fā)布于 1999年1月11日。CSS2添加了對(duì)媒介（打印機(jī)和聽覺設(shè)備）和可下載字體的支持。</dd>
 </dl>
 <dl>
    <dt>CSS3</dt>
    <dd>CSS3 計(jì)劃將 CSS 劃分為更小的模塊。</dd>
  <p class="learn"><a href="#">親自體驗(yàn)一下</a>！</p>
  <div class="pageto"><a href="#">上一章</a> <a href="#">下一章</a></div>
  <p class="tips">本站提供的內(nèi)容僅用于學(xué)習(xí)培訓(xùn)。我們不保證內(nèi)容的正確性。通過使用本站內(nèi)容隨之而來的風(fēng)險(xiǎn)與本站無關(guān)。</p>
 </div>
</div>
  <div id="footer">慕課?版權(quán)所有</div>
</div>
</body>
</html>

CSS代碼：

 /* CSS Document */
 *{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{margin-left:200px; position:absolute; 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;}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,107評(píng)論 1贊 92
  • 一:在制作一個(gè)Web應(yīng)用或Web站點(diǎn)的過程中，你是如何考慮他的UI、安全性、高性能、SEO、可維護(hù)性以及技術(shù)因素的...
    Arno_z閱讀 1,355評(píng)論 0贊 1
  • 1、CSS的三種定位機(jī)制 CSS 規(guī)定的定位機(jī)制有三種，分別是： 標(biāo)準(zhǔn)文檔流（Normal flow）： 特點(diǎn)：從...
    徐國(guó)軍_plus閱讀 653評(píng)論 0贊 3
  • 前言 溫馨提示：本文較長(zhǎng)，圖片較多，本來是想寫一篇 CSS 布局方式的，但是奈何 CSS 布局方式種類太多并且實(shí)現(xiàn)...
    sunshine小小倩閱讀 3,266評(píng)論 0贊 59
  • 莫小熊是個(gè)有個(gè)性的金牛座女孩，真的，想過安穩(wěn)生活的她骨子里的不安分注定她的不平凡。 五六歲的年紀(jì)，同齡人可能還在過...
    樊樂橙turbo閱讀 189評(píng)論 0贊 1

友情鏈接更多精彩內(nèi)容