查看: 6278|回復: 0

[DIV+CSS 教程筆記02] 第十七課程 div css當中的 DIV塊狀居中參數(shù)設置詳細教程詳解

[復制鏈接]

asp老師

226 主題	12 回帖	3260 積分

終身VIP會員

Rank: 7 Rank: 7 Rank: 7

積分: 3260

發(fā)消息

電梯直達

樓主

發(fā)表于 2014-12-4 21:43:38 | 只看該作者 |只看大圖回帖獎勵

|倒序瀏覽 |閱讀模式

親注冊登錄道勤網(wǎng)-可以查看更多帖子內容哦�。ò蕡D片、文字詳情等）請您及時注冊登錄-bmrsportswear.com

您需要登錄才可以下載或查看，沒有賬號？立即注冊

本帖最后由 asp老師于 2014-12-4 21:58 編輯

首先我們新建一個17.html的文件和17.css同時把17.css文件引入我們17.html當中；
17.html代碼如下

<!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>
<link href="17.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="aaa">111</div>
</body>
</html>

復制代碼

17.css代碼如下；

.aaa{background:#F00; width:960px; height:450px;}

復制代碼

那么此時效果如下；

此時我們可以看到，現(xiàn)在的效果是這樣的，但是我們會發(fā)現(xiàn)此時的會有一個藍色的左面和上面都有個邊距，(默認的是瀏覽器有8個px的大小邊距的)那么我們通�？梢赃@么來設置來取消這個邊距白色的問題，因為我們正常的一個網(wǎng)頁應該是沒有這個的，所以我們可以在17.css當中加一個這樣的css代碼；如下

<font color="#ff0000">body{margin:0px; padding:0px;}</font>

復制代碼

效這樣呢，我們去取消了8個px的大小效果如下：

那么我們如何操作，才可以讓這個div居中呢，我們可以用到這個代碼

<font size="5"> margin:0px auto;</font>

復制代碼

我們來分析下這個代碼這個就是讓這個div上下的邊距為0px 左右2面自動處理，效果如下;

那么這樣左右就可以自動調整了，margin:0px atuo; (這樣的方法是比較好的，因為我們每個電腦的顯示器分別率是不一樣的，如果是我們給左右2個margin更具自己設定了一個數(shù)值的話，那么可能在不同的分辨率會出現(xiàn)錯亂的頁面效果，)
此時我們在17.html當中繼續(xù)添加一個div 代碼如下：

<body>
<div class="aaa">
<div class="ccc">12</div>
</div>
</body>

復制代碼

css代碼如下：

body{margin:0px; padding:0px;}
.aaa{background:#F00; width:960px; height:450px; margin:0px auto; }
.ccc{background:#FF0; width:860px; height:150px; margin:0px auto;}

復制代碼

我們來分析這個代碼：他也是讓這個.ccc的div 居中；那么此時的效果如下

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

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

道勤主機提供365天*24小時全年全天無休、實時在線、零等待的售后技術支持。竭力為您免費處理您在使用道勤主機過程中所遇到的一切問題! 如果您是道勤主機用戶，那么您可以通過QQ【792472177】、售后QQ【59133755】、旺旺【詮釋意念】、微信：q792472177免費電話、后臺提交工單這些方式聯(lián)系道勤主機客服！如果您不是我們的客戶也沒問題，點擊頁面最右邊的企業(yè)QQ在線咨詢圖標聯(lián)系我們并購買后，我們?yōu)槟赓M進行無縫搬家服務，讓您享受網(wǎng)站零訪問延遲的遷移到道勤主機的服務！

本內容系道勤團隊 bmrsportswear.com 客服與技術人員研究整理的智慧結晶，轉載勿用于商業(yè)用途，并保留本文鏈接，侵權必究！