3天0基礎(chǔ)建站課程

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

[復(fù)制鏈接]

asp老師

226 主題	12 回帖	3260 積分

終身VIP會(huì)員

Rank: 7 Rank: 7 Rank: 7

積分: 3260

發(fā)消息

電梯直達(dá)

樓主

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

|倒序?yàn)g覽 |閱讀模式

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

您需要登錄才可以下載或查看，沒有賬號(hào)？立即注冊(cè)

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

首先我們新建一個(gè)17.html的文件和17.css同時(shí)把17.css文件引入我們17.html當(dāng)中；
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>無標(biāo)題文檔</title>
<link href="17.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="aaa">111</div>
</body>
</html>

復(fù)制代碼

17.css代碼如下；

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

復(fù)制代碼

那么此時(shí)效果如下；

此時(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è)應(yīng)該是沒有這個(gè)的，所以我們可以在17.css當(dāng)中加一個(gè)這樣的css代碼；如下

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

復(fù)制代碼

效這樣呢，我們?nèi)ト∠?個(gè)px的大小效果如下：

那么我們?nèi)绾尾僮鳎趴梢宰屵@個(gè)div居中呢，我們可以用到這個(gè)代碼

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

復(fù)制代碼

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

那么這樣左右就可以自動(dòng)調(diào)整了，margin:0px atuo; (這樣的方法是比較好的，因?yàn)槲覀兠總€(gè)電腦的顯示器分別率是不一樣的，如果是我們給左右2個(gè)margin更具自己設(shè)定了一個(gè)數(shù)值的話，那么可能在不同的分辨率會(huì)出現(xiàn)錯(cuò)亂的頁(yè)面效果，)
此時(shí)我們?cè)?7.html當(dāng)中繼續(xù)添加一個(gè)div 代碼如下：

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

復(fù)制代碼

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;}

復(fù)制代碼

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

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ù)值就可以了；

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

本內(nèi)容系道勤團(tuán)隊(duì) bmrsportswear.com 客服與技術(shù)人員研究整理的智慧結(jié)晶，轉(zhuǎn)載勿用于商業(yè)用途，并保留本文鏈接，侵權(quán)必究！