通過(guò)實(shí)例學(xué)習(xí)CSS布局網(wǎng)頁(yè)
我要評(píng)論11.1.4 布局頁(yè)面的寬度
由于瀏覽者的顯示分辨率不同，瀏覽者常見(jiàn)顯示分辨率（單位：像素）為800×600、1024×768、1280×1024、1440×960等。所以在布局頁(yè)面時(shí)，要充分考慮頁(yè)面內(nèi)容的布局寬度，一旦內(nèi)容寬度超過(guò)顯示寬度，頁(yè)面將出現(xiàn)水平滾動(dòng)條。
— 說(shuō)明：盡量保證網(wǎng)頁(yè)只有垂直滾動(dòng)條，才符合瀏覽者的習(xí)慣，所以高度不需要考慮，由頁(yè)面內(nèi)容決定網(wǎng)頁(yè)高度。
頁(yè)面布局寬度一般考慮最小顯示分辨率的瀏覽用戶，即過(guò)去瀏覽用戶的顯示分辨率最小為800×600（15寸CRT顯示器），其最小寬度為800像素。瀏覽器的邊框及滾動(dòng)條部分約占24像素左右，所以布局寬度為分辨率的水平像素減去24像素。所以過(guò)去網(wǎng)頁(yè)布局寬度一般為778像素，再寬就會(huì)使頁(yè)面產(chǎn)生水平滾動(dòng)條。
由于計(jì)算機(jī)設(shè)備的飛速發(fā)展，現(xiàn)在使用800×600顯示分辨率的用戶很少了，現(xiàn)在頁(yè)面布局寬度最大不超過(guò)1002 ~1003像素（考慮到最小寬度1024像素，即1024×768顯示分辨率）。
11.1.5 布局頁(yè)面水平居中
為了適應(yīng)不同瀏覽用戶的分辨率，網(wǎng)頁(yè)設(shè)計(jì)師要始終保證頁(yè)面整體內(nèi)容在頁(yè)面居中。使用HTML表格布局頁(yè)面時(shí)，只需要設(shè)置布局表格的align屬性為center即可。而div居中沒(méi)有屬性可以設(shè)置，只能通過(guò)CSS控制其位置。
在布局頁(yè)面前，網(wǎng)頁(yè)制作者一定要把頁(yè)面的默認(rèn)邊距清除。為了方便操作，常用的方法是使用通配選擇符*，將所有對(duì)象的邊距清除，即margin屬性和padding屬性。margin屬性代表對(duì)象的外邊距（上、下、左、右），padding屬性代表對(duì)象的內(nèi)邊距，也叫填充（上、下、左、右）。
— 說(shuō)明：margin屬性和padding屬性類似于表格單元格的cellspacing屬性和cellpadding屬性，不過(guò)margin屬性和padding屬性作用于所有塊狀元素。
使div元素水平居中的方法有多種，常用的方法是用CSS設(shè)置div的左右邊距，即margin-left屬性和margin-right屬性。當(dāng)設(shè)置div左外邊距和右外邊距的值為auto，即自動(dòng)時(shí)，左外邊距和右外邊距將相等，即達(dá)到了div水平居中的效果。在D:\web\目錄下創(chuàng)建網(wǎng)頁(yè)文件（XHTML1.0），命名為div_align.htm，編寫div_align.htm文件代碼如代碼11.5所示。
代碼11.5 設(shè)置div水平居中：div_align.htm
<!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=gb2312" />
<title>設(shè)置div水平居中</title>
<style type="text/css">
*{margin:0px;
padding:0px;
}
#all{width:75%;
height:200px;
background-color:#eee;
border:1px solid #000;
margin-left:auto;
margin-right:auto;
}
</style>
</head>
<body>
<div id="all">布局頁(yè)面內(nèi)容</div>
</body>
</html>
為了更方便看到div的表現(xiàn)，筆者給div設(shè)置了淺灰色背景色和黑色邊框，在瀏覽器地址欄輸入http://localhost/div_align.htm，瀏覽效果如圖11.5所示。
是不是很簡(jiǎn)單？設(shè)置外邊距的CSS代碼可以進(jìn)一步簡(jiǎn)化，使用margin屬性，編寫方法為：
margin:0px auto;
圖11.5 設(shè)置div水平居中
margin屬性值前面的0代表上邊距和下邊距為0像素，auto代表左邊距和右邊距為auto，即自動(dòng)設(shè)置。讀者注意，0px和auto之間使用空格符號(hào)分隔，而不是逗號(hào)。還有一種方法是使用html或body的text-align屬性，設(shè)置其值為center，即所有對(duì)象將居中。這樣將導(dǎo)致頁(yè)面文本居中，所以不作推薦，其編寫方法為：
html,body{text-align:center;}
相關(guān)文章
本文主要介紹了css九宮格布局的五種方法，內(nèi)容包括grid布局、flex布局、table布局、float浮動(dòng)定位、inline-block+letter-spacing屬性這五種方法的實(shí)現(xiàn)，感興趣的可以了解下2023-09-18- 在Web開(kāi)發(fā)中，經(jīng)常會(huì)遇到需要將元素水平和垂直居中的情況,今天，將為大家分享幾種CSS方法，讓你的元素輕松居中，讓頁(yè)面更美觀吸引人，感興趣的小伙伴可以自己動(dòng)手試一試2023-09-08
- 相信大家在面試的時(shí)候也會(huì)經(jīng)常碰到css實(shí)現(xiàn)元素居中的方法，下面我介紹6種方法給大家，歡迎大家評(píng)論區(qū)交流2023-09-07
flex布局中使用flex-wrap實(shí)現(xiàn)換行的項(xiàng)目實(shí)踐
最近需要做個(gè)換行的布局，本文主要介紹了flex布局中使用flex-wrap實(shí)現(xiàn)換行的項(xiàng)目實(shí)踐，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需2022-06-16CSS布局之浮動(dòng)(float)和定位(position)屬性的區(qū)別
今天看到有朋友留言問(wèn)浮動(dòng)和定位有什么區(qū)別，如何使用？今天找了篇文章，講的比較通俗易懂，供大家參考2021-09-23
這篇文章主要介紹了css實(shí)現(xiàn)元素居中的N種方法,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
div水平布局兩邊對(duì)齊的三種實(shí)現(xiàn)方法
這篇文章主要介紹了div水平布局兩邊對(duì)齊的三種實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起2021-01-21
waterfall瀑布流布局+動(dòng)態(tài)渲染的實(shí)現(xiàn)
這篇文章主要介紹了waterfall瀑布流布局+動(dòng)態(tài)渲染的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起2021-01-19
頁(yè)面中有間隔的方格布局如何完美實(shí)現(xiàn)方法
這篇文章主要介紹了頁(yè)面中有間隔的方格布局如何完美實(shí)現(xiàn)方法。文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)2020-11-27css實(shí)現(xiàn)六種自適應(yīng)兩欄布局方式
這篇文章主要介紹了css實(shí)現(xiàn)六種自適應(yīng)兩欄布局方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)2020-10-28