【道勤網(wǎng)】- bmrsportswear.com 軟件視頻自學(xué)教程|免費(fèi)教程|自學(xué)電腦|3D教程|平面教程|影視動(dòng)畫教程|辦公教程|機(jī)械設(shè)計(jì)教程|網(wǎng)站設(shè)計(jì)教程！【道勤網(wǎng)】

標(biāo)題: 第十七課程 div css當(dāng)中的 DIV塊狀居中參數(shù)設(shè)置詳細(xì)教程詳解 [打印本頁]
作者: asp老師    時(shí)間: 2014-12-4 21:43
標(biāo)題: 第十七課程 div css當(dāng)中的 DIV塊狀居中參數(shù)設(shè)置詳細(xì)教程詳解
本帖最后由 asp老師 于 2014-12-4 21:58 編輯

首先我們新建一個(gè)17.html的文件和17.css同時(shí)把17.css文件引入我們17.html當(dāng)中；
17.html代碼如下
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>無標(biāo)題文檔</title>
  6. <link href="17.css" rel="stylesheet" type="text/css">
  7. </head>

  9. <body>
  10. <div class="aaa">111</div>
  11. </body>
  12. </html>
復(fù)制代碼
17.css代碼如下；
  1. .aaa{background:#F00; width:960px; height:450px;}
復(fù)制代碼
那么此時(shí)效果如下；
(, 下載次數(shù): 302)
此時(shí)我們可以看到，現(xiàn)在的效果是這樣的，但是我們會(huì)發(fā)現(xiàn)此時(shí)的會(huì)有一個(gè)藍(lán)色的左面和上面都有個(gè)邊距，(默認(rèn)的是瀏覽器有8個(gè)px的大小邊距的)那么我們通�？梢赃@么來設(shè)置來取消這個(gè)邊距白色的問題，因?yàn)槲覀冋５囊粋�(gè)網(wǎng)頁應(yīng)該是沒有這個(gè)的，所以我們可以在17.css當(dāng)中加一個(gè)這樣的css代碼；如下
  1. <font color="#ff0000">body{margin:0px; padding:0px;}</font>
復(fù)制代碼
效這樣呢，我們?nèi)ト∠?個(gè)px的大小效果如下：
(, 下載次數(shù): 293)
那么我們?nèi)绾尾僮�，才可以讓這個(gè)div居中呢，我們可以用到這個(gè)代碼
  1. <font size="5"> margin:0px auto;</font>
復(fù)制代碼
我們來分析下這個(gè)代碼這個(gè)就是讓這個(gè)div上下的邊距為0px 左右2面自動(dòng)處理，效果如下;
(, 下載次數(shù): 291)
那么這樣左右就可以自動(dòng)調(diào)整了，margin:0px atuo; (這樣的方法是比較好的，因?yàn)槲覀兠總�(gè)電腦的顯示器分別率是不一樣的，如果是我們給左右2個(gè)margin更具自己設(shè)定了一個(gè)數(shù)值的話，那么可能在不同的分辨率會(huì)出現(xiàn)錯(cuò)亂的頁面效果，)
此時(shí)我們?cè)?7.html當(dāng)中繼續(xù)添加一個(gè)div 代碼如下：

  2. <body>
  3. <div class="aaa">


  6. <div class="ccc">12</div>




  11. </div>

  13. </body>
復(fù)制代碼
css代碼如下：
  1. body{margin:0px; padding:0px;}


  4. .aaa{background:#F00; width:960px; height:450px; margin:0px auto; }
  5. .ccc{background:#FF0; width:860px; height:150px; margin:0px auto;}
復(fù)制代碼
我們來分析這個(gè)代碼：他也是讓這個(gè).ccc的div 居中；那么此時(shí)的效果如下
(, 下載次數(shù): 290)

margin:50px 250px 10px 20px; 這樣呢，就表示的數(shù)值是上右下左  如果是margin:10px 30px; 就表示上下 左右的數(shù)值

那么如果想要讓我們的.ccc黃色的div為垂直居中的話，我們應(yīng)該怎么辦呢?可以設(shè)置它的邊距margin的數(shù)值，當(dāng)然也可以設(shè)置外面大的div的內(nèi)邊距的數(shù)值padding
那么我們可以回憶總結(jié)下知識(shí)點(diǎn)；
如果我們想要讓一個(gè)div居中的話-那么就要考慮到2個(gè)因素一個(gè)是水平居中和一個(gè)是垂直居中；當(dāng)然不管是什么定位，我們只要設(shè)置它或者是包含這個(gè)div的margin和padding的數(shù)值就可以了；







歡迎光臨 【道勤網(wǎng)】- bmrsportswear.com 軟件視頻自學(xué)教程|免費(fèi)教程|自學(xué)電腦|3D教程|平面教程|影視動(dòng)畫教程|辦公教程|機(jī)械設(shè)計(jì)教程|網(wǎng)站設(shè)計(jì)教程！【道勤網(wǎng)】 (http://bmrsportswear.com/) Powered by Discuz! X3.4