HTML佈局排版1清除body的margin

時間 2020-06-07

標籤 html 佈局排版清除 body margin 欄目 HTML 简体版

原文原文鏈接

觀察可發現，通常的HTML頁面分爲上中下三部分，上邊是導航一欄，中間是內容，下方是頁面的下部分。
注意html裏body自己自帶8px的上下左右外邊距，如圖，在qq瀏覽器和ie裏能夠看到body自己是8px的margin，在設置大分區的時候，須要把該margin清零，若是有須要，帶着也能夠，若是不想留這邊距，能夠設置body的margin爲0。
本博文介紹兩點
1：佈局前清除body的margin。
2：div的float讓div在並排在一行裏。html

佈局前若是有須要，清除body自帶的margin：瀏覽器

body{margin:0px;}

圖示：佈局

本人只在上學的時候作過網頁，都是PS作好，切好用DW排版的，總的來講，通常網頁都是分爲三個大區，大區就是上邊中間和下邊，上邊通常是導航條一類的，中間是內容，最後是頁腳，有點關於這個網頁或網站的備註之類的。
首先是劃分大區域，而後在大區域裏劃分小區域。
上邊通常用來放導航條一類的，高度是固定的，下邊通常用來放頁腳一類的，高度通常也是固定的的，若是網頁中間內容比較比較固定，也能夠用固定高度，可是通常內容會隨着後期修改，爲了避免修改內容的時候再修改樣式，通常設置成高度自適用。
div中的一些特色（相關博文：），
1.div不設置具體高度，和設置100%，就會根據高度自適用。
2.div設置具體高度，內容若是超出了，就會超出div，若是div自己有背景圖或背景色，確定會超出了。
3.div默認是佔一行，若是想並排幾個div，能夠設置float
不一樣的定位和佈局方式，有些固定位置，有些會隨着瀏覽器的大小而產生變化，樣式和大小會受容器的影響。
在使用絕對定位，相對定位等，調整上下左右位置的時候，若是用editplus，不如用dreamweaver更簡單，DW分紅設計和代碼，還能夠進行拖動佈局。
div自己是塊狀元素，佔一行，若是想並排div，能夠設置float了，如圖，設置後三個div能夠並排在一行裏。測試

測試代碼：網站

<style> body{background:#7acbcc;margin:0px;} #header{background:#e7a0dc;width:100%;height:200px;} #body{background:#87cf7d;width:100%;} #footer{background:#e1da71;width:100%;height:200px;}
</style>
</head>
<body>
<div id="header">
</div>
<div id="body">LODOP<br>內容<br>內容<br>內容<br>內容<br></div>
<div id="footer">
</div>
</body>

<style> body{background:#7acbcc;margin:0px;} #header{background:#e7a0dc;width:100%;height:200px;} #body{background:#87cf7d;width:100%;} #footer{background:#e1da71;width:100%;height:200px;clear:both;} #bodyleft{background:#9a99cf;width:20%;float:left;} #bodymiddle{background:#0066ff;width:30%;float:left;} #bodyright{background:#009999;width:50%;float:left;}
</style>
</head>
<body>
<div id="header">
</div>
<div id="body">
<div id="bodyleft">LODOP<br>內容<br>內容<br>內容<br>內容<br></div>
<div id="bodymiddle">LODOP<br>內容<br>內容<br>內容<br>內容<br></div>
<div id="bodyright">LODOP<br>內容<br>內容<br>內容<br>內容<br</div>
</div>
<div id="footer">
</div>
</body>

如圖，注意，
（1）下面的footer的下邊div，因爲要另起一行，不和中間的div左浮動影響，須要設置clear:both，來讓下面的div單獨不受影響。
（2）這裏中間的三個div內容高度同樣，因此佈滿了，若是內容不一樣，也會有差別，高度少的會漏出body，這裏給body加了顏色，body通常是空白，全部會有空白出現。spa

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。