DIV+CSS佈局從新學習之float/margin/padding

時間 2019-11-16

標籤 div+css div css 佈局從新學習 float margin padding 欄目 HTML 简体版

原文原文鏈接

以前對div的css佈局一直有點半知半解，只其然殊不知其因此然，到網上下載了「十天學會DIV+CSS(WEB標準)」的chm電子版，而後跟着練習了一下，特在此記錄，備忘。css

<!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>
<title>div+css佈局練習</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
body{padding:0px;margin:0px;}

#main {margin:auto;padding:0;background: yellow;width:90%;}
#layout { height: 300px; width: 80%; background: #99FFcc; margin:auto; height:50px;}

#content { width:80%; margin:0 auto;min-width:700px;}
#side { background: #99FF99; height: 60px; width: 50%; float: left; }
#main1 { background: #99FFFF; height: 60px; width: 50%; float: left;}

#waibian2 {width:80%; margin:0 auto;clear:both;}
#side2 {float:left;width:205px;}

#waibian3 {width:80%; margin:0 auto;clear:both;}
#side3 {float:left;width:205px;}
#main3 {margin-left:210px;}

#waibian4 {width:90%;background:#CCFFCC;margin:auto;text-align:center;}
#libian1 {width:150px; height:80px;background:#FFFF66;float:left;}
#libian2 {width:200px; height:80px;background:#FFFF33;float:right}
#libian3 {height:80px;background:#FFCCFF;}
</style>
</head>

<body>
<!-- 設置居中 -->
<div id="main">
    <div id="layout">此處顯示  id "layout" 的內容</div>
</div>

<!-- 設置外層的寬度爲80%,並設置一個最新寬度值，裏面的div按百分比自適宜 -->
<div id="content">
  <div id="side">此處顯示 id "side" 的內容</div>
  <div id="main1">此處顯示 id "main" 的內容</div>
</div>

<!--圖片跟文字一行，而且文字在超出圖片的高度後自動從圖片的下面換行 -->
<div id="waibian2">
    <div id="side2">
        <img src="http://www.aa25.cn/uploadfile/taobao0903/20090212165039036721.gif" width="192" height="80" />
    </div>
    <div id="main2">
    Javascript[1] 是一種由Netscape的LiveScript發展而來的原型化繼承的基於對象的動態類型的區分大小寫的客戶端腳本語言，主要目的是爲了解決服務器端語言，好比Perl，遺留的速度問題，爲客戶提供更流暢的瀏覽效果。當時服務端須要對數據進行驗證，因爲網絡速度至關緩慢，只有28.8kbps，驗證步驟浪費的時間太多。因而Netscape的瀏覽器Navigator加入了Javascript，提供了數據驗證的基本功能，js的做用也主要在實現網頁的一些特效，css難以實現的特效，一般和Jquery，Ajax,聯合使用.
    </div>
</div>

<!--圖片跟文字一行，而且文字在超出圖片的高度後仍是在同一列 -->
<div id="waibian3">
    <div id="side3">
        <img src="http://www.aa25.cn/uploadfile/taobao0903/20090212165039036721.gif" width="192" height="80" />
    </div>
    <div id="main3">
    Javascript[1] 是一種由Netscape的LiveScript發展而來的原型化繼承的基於對象的動態類型的區分大小寫的客戶端腳本語言，主要目的是爲了解決服務器端語言，好比Perl，遺留的速度問題，爲客戶提供更流暢的瀏覽效果。當時服務端須要對數據進行驗證，因爲網絡速度至關緩慢，只有28.8kbps，驗證步驟浪費的時間太多。因而Netscape的瀏覽器Navigator加入了Javascript，提供了數據驗證的基本功能，js的做用也主要在實現網頁的一些特效，css難以實現的特效，一般和Jquery，Ajax,聯合使用.
    </div>
</div>

<!--左右div固定寬度，中間自適應，外邊div寬度百分比並居中 -->
<div id="waibian4">
    <div id="libian1">這是左邊的DIV固定寬度</div>
    <div id="libian2">這是右邊的DIV固定寬度</div>
    <div id="libian3">這是中間的DIV，自動適應</div>
</div>
</body>
</html>

運行效果圖：html

佈局主要影響因素圖解：瀏覽器

margin和padding的順序是：上、右、下、左。服務器

若是提供所有四個參數值，將按上－右－下－左的順序做用於四邊。若是隻提供一個，將用於所有的四條邊。若是提供兩個，第一個用於上－下，第二個用於左－右。若是提供三個，第一個用於上，第二個用於左－右，第三個用於下。網絡

注意：ide

當一個容器內元素都浮動後，它將高度將不會隨着內部元素高度的增長而增長，因此形成內容元素的顯示超出了容器，這時須要加以下CSS解決這個問題：佈局

overflow:auto; zoom:1;

/**
overflow:auto;是讓高度自適應， zoom:1;是爲了兼容IE6而寫（此樣式不能經過W3C驗證）。
**/

相關標籤/搜索

每日一句

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