初識HTML中的&lt;div&gt;塊元素-零基礎自學網頁制作

lt;div>塊元素基礎屬性講解

<div>元素是個有故事的元素，這個元素很早就出現在html超文本標記語言中，它設計之初就是為了解決網頁頁面布局的需求。但是遺憾的是它出生后一直懷才不遇。

在我還上初中的時候，智能手機還沒有出現，更沒有平板電腦等移動設備。上網是通過擺在桌子上的計算機來完成的。

那時，大街小巷上有好多網吧。

那時，馬云剛剛辭去工作準備創業。

那時，發送郵件的操作都會出現在計算機課程中。

那時，對頁面還沒有現在的跨平臺要求。

那時，flashplayer大行其道。

那時，dreamwaver、flash、fireworks被稱為網頁三劍客！

那時，制作網頁可以不用懂的html的寫法！

第一次接觸網頁制作是在大學的專業課上，使用三劍客，通過點擊軟件菜單中的按鈕就能制作網頁，精力都放在了如何使用flash制作酷炫的交互動畫上了。

那時，對html還沒有深刻的認識，但是卻對<table></table>這個標簽有著極深的印象。

因為當時的dreamwaver通過非代碼方式生成的頁面都是使用<table>表格元素進行布局的！

也就是說，在移動智能設備誕生之前，在用戶對頁面還沒有可以適應不同屏幕比例的要求前，<table>這個本來用來做表格的元素同時兼職了<div>的頁面布局工作，而且把兼職干成了主業，讓<div>這個專業的塊元素閑置了好久。

直到智能手機，平板電腦產生后，由于對頁面的跨平臺顯示的要求的出現（這類適應多平臺的頁面布局叫做響應式布局），<table>表格制作的頁面在響應式布局大行其道的今天，用它布局的頁面開始出現代碼冗余，維護困難等諸多問題。手機端的瀏覽器在播放視頻或其他交互動畫時也不再依賴flashplayer這個給我們帶來無數反感和惱火的插件。

從此，頁面制作的世道變了，從不需要編程就能制作頁面的三劍客，變成了必須懂得相關代碼寫法才能使用的HTML+CSS+JavaScript了。dreamwaverCC版本也恢復了寫代碼做頁面的操作方式，過去的點擊加拖拽的制作方式也消失了。這讓很多不懂編程和HTML等頁面制作核心技術的從業人感到難受。

dreamwaver的老東家Adobe后來也嘗試過推出新模式下通過界面操作來制作網頁的軟件，還搞出一個叫做Muse的軟件，但是依舊沒能撬動代碼書寫的方式。

這個故事在開始學習<div>和css布局之前我都會講給學生（一群文科生）聽，我只是想告訴大家，學習任何計算機技術，我們可以從簡單易學的方式入手，但要有透過這種方式向下挖掘核心知識的決心和勇氣！對于自己從事的工作我們不能滿足于會做，還要盡量透析它的原理，這樣才能在技術換代中不會被輕易淘汰。

在我研究生階段，有一門讓我終生難忘的選修課，這門課叫做《數字娛樂技術概述》，這門課既不娛樂也不概述，但是通篇都是數字，那位年輕的教授為我們透析了游戲、影視特效的核心----計算機圖形學。

從此我開始學習數學。因為老師的一句話：從2000年到現在（2014）雖然各種軟件層出不窮，但是計算機圖形學的核心算法卻幾乎沒什么改變。

向下挖掘雖然很難，但是有必要！與各位共勉！

下面開始今天的內容。

首先，我們將之前的"第一個頁面.html"文件復制一個，叫做"塊元素學習.html"。然后把<body></body>中間的內容清空。

如圖：

下面，我們在<body></body>中間添加<div></div>標簽。示例代碼如下：

<body><div></div></body>

我們看看效果：

啦啦啦，什么都沒有！

為了讓大家可以看出來不同，我們為<div>添加邊框屬性！

我們使用style屬性為<div>添加邊框，style屬性里的代碼就是以后在CSS中使用的代碼！實際上我們已經開始接觸CSS的一些內容了。具體寫法的講解大家可以看這個教程，這里不再贅述。

示例代碼如下：（通過style = "border-style: solid;"可以為很多元素添加邊框，就不需要大家記憶或查詢不同元素的不同寫法，是不是很方便！）

<div style = "border-style: solid;">

效果如圖：

因為里面沒有內容，所以<div>的寬度是0，因此顯示的就是一條直線。下面我們向<div>中添加內容。

為了看起來花哨些，加張圖片吧！

示例圖片

示例代碼如下：

<div style = "border-style: solid;"><img src = "img/示例圖片/image4.jpg"/ style = "width:50%；"></div>

大家請按照<img>中的scr自行建立文件夾和命名吧！如果您看不懂請參照《HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作》

效果如下：

其中，我們也是使用了style的方式為<img>設置的寬度，這個設置方法在<div>中一樣使用！

代碼示例：大家注意寫法，不同的屬性都添加到style的雙引號中即可，同時使用；隔開！

<div style = "border-style: solid; width:50%;">
  <img src = "img/示例圖片/image4.jpg"/ style = "width:50%;">
    </div>

效果如圖：

整個邊框縮小了50%，圖片更有趣，尺寸變成了div的50%乘以自身的50%。這個特性大家要記住。

為了方便觀看，我們去掉div的width設置。同時在<div>中繼續添加<div>標簽。為了方便顯示，我們在新的<div>中添加一段文字！

示例代碼如下：

<div style = "border-style: solid;">
  <img src = "img/示例圖片/image4.jpg"/ style = "width:50%;">
    <div>
    <p>學習網頁制作非常有趣！</p>
</div>
</div>

效果如下：

如果為了美觀，我們讓文字到圖片右邊的空間中怎么做呢？

示例代碼如下：

<div style = "float:right;"><p>學習網頁制作非常有趣！</p></div>

我們通過為新的<div>標簽中的style屬性添加float（浮動）屬性，同時設置為right（右）。

頁面效果如圖：

大家思考一下如何讓圖片與文字都靠在左邊呢？

是不是為圖片style添加float:left;同時把新<div>的float改為left？

我們試試看！

示例代碼如下：

<div style = "border-style: solid;">
  <img src = "img/示例圖片/image4.jpg" style = "width:50%; float:left;"/>
    <div style = "float:left;">
      <p>學習網頁制作非常有趣！</p>
</div>
</div>

頁面效果：

效果完全不對，圖片和文字跑到外邊來了。

這是div布局中經常出現的一個問題！解決方案有點奇葩，既不是修改<img>屬性也不是修改<div>屬性，而是增加一組空的<div></div>標簽！給這個新的空的<div>的style設置為"clear:both"即可修正。

示例代碼如下：

<div style = "border-style: solid;">
  <img src = "img/示例圖片/image4.jpg" style = "width:50%; float:left;"/>
    <div style = "float:left;">
      <p>學習網頁制作非常有趣！</p>
</div>
<div style = "clear:both;"></div>
</div>

頁面效果如下：

值得注意的是，如果您不使用<div>的話直接使用<img>和<p>，同時對兩個標簽的style設置為float：left，是沒有問題的，只有把它們放到<div>中才會出現上面的情況。

代碼如下：

<body>
  <img src = "img/示例圖片/image4.jpg" style = "width:50%; float:left;"/>
    <p style = "float:left;">學習網頁制作非常有趣！</p>
</body>

頁面顯示效果如下：

大家觀察一下，文字也變小了。至于為什么去掉<div>之后就不會出現上面那種出框的情況，而且文字也變小的問題在以后的講解中我們再深入探討！

現在希望大家可以記牢這個情況和操作，更多布局問題我們會在CSS的浮動（float）的講解中詳細說明。

疫情期間，請大家少出門，不聚會，沒事在家學學網頁制作，即抗擊疫情又提高自己!

喜歡的小伙伴請關注我，閱讀中遇到任何問題請給我留言，如有疏漏或錯誤歡迎大家斧正，不勝感激！

HTML完整學習目錄

HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作

HTML是什么？——零基礎自學網頁制作

第一個HTML頁面如何寫？——零基礎自學網頁制作

HTML頁面中head標簽有啥用？——零基礎自學網頁制作

初識meta標簽與SEO——零基礎自學網頁制作

HTML中的元素使用方法1——零基礎自學網頁制作

HTML中的元素使用方法2——零基礎自學網頁制作

HTML元素中的屬性1——零基礎自學網頁制作

HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作

使用HTML添加表格1（基本元素）——零基礎自學網頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作

使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作

16進制顏色表示與RGB色彩模型——零基礎自學網頁制作

HTML中的塊級元素與內聯元素——零基礎自學網頁制作

初識HTML中的<div>塊元素——零基礎自學網頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作

封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作

HTML表單元素初識1——零基礎自學網頁制作

HTML表單元素初識2——零基礎自學網頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作

HTML表單4（form的action、method屬性）——零基礎自學網頁制作

HTML列表制作講解——零基礎自學網頁制作

為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作

音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作

HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作

5移動端頁面自適應普遍使用的方法，理論上講使用這個標簽是可以適應所有尺寸的屏幕的，但是各設備對該標簽的解釋方式及支持程度不同造成了不能兼容所有瀏覽器或系統。

使用viewport標簽

在HTML文檔頭部添加viewport標簽，設置meta屬性值為“width=device-width”，可以讓瀏覽器根據設備屏幕的寬度自動調整頁面的縮放比例，從而實現頁面自適應。

<meta 
	name="viewport" 
	content="width=device-width,initial-scale=1.0, minimum-scale=1.0, 
	maximum-scale=1.0, 
  user-scalable=no"/>

每個屬性的詳細介紹：

width：#viewport 的寬度，可以指定為一個像素值，如：600，或者為特殊的值，如：device-width （設備的寬度）。

height：#viewport的高度。

initial-scale：#初始縮放比例，即當瀏覽器第一次加載頁面時的縮放比例。

maximum-scale：#允許瀏覽者縮放到的最大比例，一般設為1.0。

minimum-scale：#允許瀏覽者縮放到的最小比例，一般設為1.0。

user-scalable：#瀏覽者是否可以手動縮放，yes或no。

使用CSS3媒體查詢

媒體查詢可以根據設備屏幕的寬度和高度來匹配不同的樣式規則，從而實現響應式布局。通過設置不同的CSS樣式，可以讓頁面在不同的設備上呈現不同的布局和樣式。

@media screen and (max-width: 767px) {
  /* 在寬度小于767px的設備上應用以下樣式 */
  body {
    font-size: 14px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  /* 在寬度在768px到1023px之間的設備上應用以下樣式 */
  body {
    font-size: 16px;
  }
}

@media screen and (min-width: 1024px) {
  /* 在寬度大于等于1024px的設備上應用以下樣式 */
  body {
    font-size: 18px;
  }
}

使用彈性布局

彈性布局可以根據設備屏幕的寬度自動調整元素的大小和位置，從而實現頁面自適應。通過設置元素的flex屬性，可以讓元素按照一定的比例分配剩余空間，從而實現頁面的自適應性。

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item {
  flex: 1 1 300px;
  margin: 10px;
}

使用rem單位

rem單位是相對于根元素(html元素)的字體大小來計算的單位，可以根據設備屏幕的字體大小自動調整元素的大小和位置，從而實現頁面自適應。通過設置根元素的字體大小，可以讓整個頁面的元素按照一定的比例進行縮放。

html {
  font-size: 16px;
}

@media screen and (max-width: 767px) {
  /* 在寬度小于767px的設備上將根元素的字體大小設置為14px */
  html {
    font-size: 14px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  /* 在寬度在768px到1023px之間的設備上將根元素的字體大小設置為16px */
  html {
    font-size: 16px;
  }
}

@media screen and (min-width: 1024px) {
  /* 在寬度大于等于1024px的設備上將根元素的字體大小設置為18px */
  html {
    font-size: 18px;
  }
}

rem是CSS3新增的一個相對單位（root em，根em）,使用rem為元素設定字體大小時，是相對大小，但相對的只是HTML根元素。通過它既可以做到只修改根元素就成比例地調整所有字體大小，又可以避免字體大小逐層復合的連鎖反應。

(其他)默認html的font-size是16px，即1rem=16px，如果某p寬度為32px你可以設為2rem。

通常情況下，為了便于計算數值則使用62.5%，即默認的10px作為基數。當然這個基數可以為任何數值，視具體情況而定。設置方法如下：

Html{font-size:62.5%(10/16*100%)}

具體不同屏幕下的規則定義，即基數的定義方式：可以通過CSS定義，不同寬度范圍里定義不同的基數值，當然也可以通過js一次定義方法如下：

<script type="text/javascript">
   (function (doc, win) {
      var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
          var clientWidth = docEl.clientWidth;
          if (!clientWidth) return;
          docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';//其中“20”根據你設置的html的font-size屬性值做適當的變化
        };
      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
</script>

使用vw、vh單位

vw和vh是根據設備的寬度和高度來決定的，設備的寬就是100vw，設備的高就是100vh，
你設置的50vw就是相當于設備寬度的50%，你設置的100vh就是相當于設備高度的100%。
切記：不要把vw和vh弄混淆了，如果你給元素寬度設置100vh，那么基本上(設備的寬小于高的情況)就會超出你的屏幕X軸出現滾動條。如果你給元素高度設置100vw，那么就滿足不了你想要把這個元素鋪滿整個設備高度的愿望了。
一般情況下筆者寬度，和字體大小，左右邊距間距等都是用vw單位，
高度，行高，上下邊距間距等都是用vh單位。

使用方法：
1. 將設計圖放到PS里面，查看整個圖片的寬度和高度，分別放在設計稿寬度和設計稿高度當中。（注意是px單位哦）
2. 然后量出你想要量的地方，將寬度和高度分別放置到量出的寬度和量出的高度當中。（注意還是px單位哦）
3. 然后點擊換算按鈕，就可以將換算出來的寬度和高度大小放置到你的代碼當中了哦。（注意是vw和vh單位哦）

一般移動端的布局可分為三個部分，頭部->主體->tabbar的腳部。
所以我們可以把項目的外層這樣設置一下：

.body {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
}
/* 頭部部分 */
header {
	height: 10vh; /* 固定的高度，根據你的設計圖調整 */
}
/* 主體部分 */
main {
	flex: 1; /* 占據頁面剩余所有部分 */
}
/* tabbar腳部部分 */
footer {
	height: 10vh; /* 固定的高度，根據你的設計圖調整 */
}

使項目中的字體大小自適應：

果給你一些文本文字，要讓它變得美，你將會采用什么方法？用過PPT的人都知道，可以調整顏色，可以設定字體，可以進行對齊、縮進等操作。這些在PPT中常用的方法，在CSS中也是很容易實現的，代碼也簡單。

10.1 文本顏色

在CSS中，設置文本顏色，用color屬性，值可為16進制、一個RGB值或顏色名稱。十六進制用#號開始，后接#RGB，比如 #ff0000；RGB值為rgb(255,0,51)形式；顏色名稱名稱直接就是英語單詞，如red。

樣色表ys2.css文件內容

body {
       color:#00ff00;
}
h3 {
 color:CadetBlue;

}
p {
    color:rgb(0,0,255);
}

HTML文件內容

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>字體顏色</title>
    <link rel="stylesheet" type="text/css" href="ys2.css"/>
</head>
<body>
<h3>年底了，還能找工作不?</h3>
<p>
    昨晚七點多收到通知，說老板抽查了幾次監控，發現一些人上班渾水摸魚玩手機，
要召開緊急視頻會議，<br/>
    全體員工必須參會，視頻里老板很生氣，正火冒三丈的批評那些財務人員上班玩手機，
說再不多提升自己，<br/>
    以后早晚被電腦和機器代替， 然后我忘記關麥了，說了句：機器能替你吃牢飯？<br/>
    唉，也不知道年底了工作好不好找。</p>
</body>
</html>

輸出結果

10.2 文本字體

CSS字體屬性定義字體，加粗，大小，文字樣式。在用軟件時，你是不是見過宋體什么的，沒錯，那個就是字體了。在CSS中，可以使用Font Family："宋體"的方式指定字體；樣式，就是加粗、傾斜那個，用font-style指定；大小則用font-size。

/* ys2.css里的樣式表內容 */
.f {
    font-family: "宋體";
    /* 加粗 */
    font-style: oblique;
    font-size: 40px;
}

<!--html文件內容-->
<div class="f">
    牛的程序員，羊一樣的女孩
</div>

輸出結果

10.3 對齊方式

文本在元素內水平對齊，可以使用 text-align: 值的方式，center居中對齊，left居左對齊，right居右對齊；垂直居中對齊，可用vertical-align和line-height結合的方式進行指定，這個平時會經常用到，記下來。

/*css文件里的內容*/

/*水平居中*/
.div-width {
    width: 800px;
}

.txt-left {
    text-align: left;
    color: aquamarine;
}

.txt-center {
    text-align: center;
    color: darkcyan;
}

.txt-right {
    text-align: right;
    color: darkgreen;
}

/*垂直居中*/
.txt-vertical {
    border: 2px solid green;
    height: 100px;
    line-height: 100px;
    vertical-align: middle;
    text-align: center;
}

<!-- HTML文件里的內容 -->
<div class="div-width">
    <!--水平居中-->
    <p class="txt-left">向左看齊</p>
    <p class="txt-center">居中對齊</p>
    <p class="txt-right">向右看齊</p>
    <!--垂直居中-->
    <div class="txt-vertical">垂直居中方法1</div>
    <div>垂直居中方法2</div>
</div>

輸出結果

如果要對標簽進行水平居中的話，可以使用 margin: auto;用position: absolute; 屬性來對齊元素的話，有些瀏覽器不支持，所以不推薦。

/* 在樣式表文件中 */
.div-center {
    margin: auto;
    width: 50%;
    border: 1px solid green;
    height: 300px;
    text-align: center;
    vertical-align: center;
    line-height: 300px;
}
<!--在html文件中-->
<div class="div-center">我站在，人海中間：div在Web居中，文字在div中居中</div>

輸出結果

10.4 文本之距

為了讓閱讀舒服，在進行文本排版之時，會考慮字與字之間的間距，有行與行之間的距離，還有段落的縮進等。在CSS中，字符間距可用letter-spacing:值；行間距依然用line-height:值；段落字符縮進，用text-indent即可。溫馨提醒：text-indent只對div和p標簽有效。

/* 在樣式表文件中 */
.text-spacing {
    width: 900px;
    border: 1px solid green;
    letter-spacing: 50px;
}

p.row {
    line-height: 3.0em;
}

p.i {
    /*em是相對單位，2em即現在一個字大小的兩倍*/
    text-indent: 2em;
}
<!--在html文件中-->
<div class="text-spacing">
    他說風雨中，這點痛算什么
</div>
<p class="row">
    秋季降溫快的特點，使得秋收、秋耕、秋種的“三秋”大忙顯得格外緊張。<br/>
    秋分棉花吐絮，煙葉也由綠變黃，正是收獲的大好時機。華北地區已開始播種冬麥，<br/>
    長江流域及南部廣大地區正忙著晚稻的收割，搶晴耕翻土地，準備油菜播種。
</p>
<p class="i">
    當我以為我無法繼續走下去時，我強迫自己要繼續前進。<br/>
    我的成功是基于我的堅持，并非運氣。<br/>
    努力,是為了跳出你厭惡的圈子。<br/>
    讀書,是為了遠離渣貨垃圾人。<br/>
    健身,是為了讓討厭的人心平氣和...
</p>

輸出結果

好了，有關CSS文本或元素對齊的內容，老陳講完了，如果覺得對你有所幫助，希望老鐵能轉發點贊，讓更多的人看到這篇文章。你的轉發和點贊，就是對老陳繼續創作和分享最大的鼓勵。

一個當了10年技術總監的老家伙，分享多年的編程經驗。想學編程的朋友，可關注：老陳說編程。分享Python，前端(小程序)、App和嵌入式方面的干貨。關注我，沒錯的。

#前端##HTML5##CSS##程序員##Web#

在線咨詢

上一篇：HTML5 的JavaScript 客戶端PDF解決方案-jsPDF
下一篇：Django開發網站-13-在Django中修改和刪除數據（1）

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

初識HTML中的&amp;lt;div&amp;gt;塊元素-零基礎自學網頁制作

lt;div>塊元素基礎屬性講解

HTML完整學習目錄

使用viewport標簽

使用CSS3媒體查詢

使用彈性布局

使用rem單位

使用vw、vh單位

10.1 文本顏色

10.2 文本字體

10.3 對齊方式

10.4 文本之距

您的項目需求

初識HTML中的<div>塊元素-零基礎自學網頁制作