目錄

塊元素基礎屬性講解

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

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

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

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

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

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

那時，flashplayer大行其道。

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

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

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

那時，對html還沒有深刻的認識，但是卻對

<table>這個標籤有著極深的印象。

因為當時的dreamwaver通過非代碼方式生成的頁面都是使用

<table>表格元素進行佈局的！

也就是說，在移動智能設備誕生之前，在用戶對頁面還沒有可以適應不同屏幕比例的要求前，

<table>這個本來用來做表格的元素同時兼職了

的頁面佈局工作，而且把兼職幹成了主業，讓

這個專業的塊元素閒置了好久。

直到智能手機，平板電腦產生後，由於對頁面的跨平臺顯示的要求的出現（這類適應多平臺的頁面佈局叫做響應式佈局），

<table>表格製作的頁面在響應式佈局大行其道的今天，用它佈局的頁面開始出現代碼冗餘，維護困難等諸多問題。手機端的瀏覽器在播放視頻或其他交互動畫時也不再依賴flashplayer這個給我們帶來無數反感和惱火的插件。

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

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

這個故事在開始學習

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

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

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

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

下面開始今天的內容。

首先，我們將之前的“第一個頁面.html”文件複製一個，叫做“塊元素學習.html”。然後把

中間的內容清空。

如圖：

下面，我們在

中間添加

標籤。示例代碼如下：

<code>
 /<code>

我們看看效果：

啦啦啦，什麼都沒有！

為了讓大家可以看出來不同，我們為

添加邊框屬性！

我們使用style屬性為

添加邊框，學過《 》這篇教程的小夥伴一定知道，style屬性裡的代碼就是以後在CSS中使用的代碼！實際上我們已經開始接觸CSS的一些內容了。具體寫法的講解大家可以看這個教程，這裡不再贅述。

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

<code>
效果如圖：
 
因為裡面沒有內容，所以
的寬度是0，因此顯示的就是一條直線。下面我們向
中添加內容。
為了看起來花哨些，加張圖片吧！

示例圖片
示例代碼如下： 
<code> 
/<code>
大家請按照中的scr自行建立文件夾和命名吧！如果您看不懂請參照《 》
效果如下：

 
其中，我們也是使用了style的方式為設置的寬度，這個設置方法在
中一樣使用！
代碼示例：大家注意寫法，不同的屬性都添加到style的雙引號中即可，同時使用；隔開！
<code>
/<code>
效果如圖：
 
整個邊框縮小了50%，圖片更有趣，尺寸變成了div的50%乘以自身的50%。這個特性大家要記住。
為了方便觀看，我們去掉div的width設置。同時在
中繼續添加
標籤。為了方便顯示，我們在新的
中添加一段文字！
示例代碼如下：
<code>
學習網頁製作非常有趣！ 
/<code>
效果如下：

如果為了美觀，我們讓文字到圖片右邊的空間中怎麼做呢？
示例代碼如下：
<code>
學習網頁製作非常有趣！ 
/<code>
我們通過為新的
標籤中的style屬性添加float（浮動）屬性，同時設置為right（右）。
頁面效果如圖：
大家思考一下如何讓圖片與文字都靠在左邊呢？
是不是為圖片style添加float:left;同時把新
的float改為left？ 
我們試試看！
示例代碼如下：
<code>
學習網頁製作非常有趣！
頁面效果：
 
效果完全不對，圖片和文字跑到外邊來了。
這是div佈局中經常出現的一個問題！解決方案有點奇葩，既不是修改屬性也不是修改
屬性，而是增加一組空的
標籤！給這個新的空的
的style設置為"clear:both"即可修正。
示例代碼如下：
<code>
 
學習網頁製作非常有趣！
/<code>
頁面效果如下：
值得注意的是，如果您不使用
的話直接使用和
，同時對兩個標籤的style設置為float：left，是沒有問題的，只有把它們放到 
中才會出現上面的情況。
代碼如下：
<code>
學習網頁製作非常有趣！
/<code>
頁面顯示效果如下：

 
大家觀察一下，文字也變小了。至於為什麼去掉
之後就不會出現上面那種出框的情況，而且文字也變小的問題在以後的講解中我們再深入探討！
現在希望大家可以記牢這個情況和操作，更多佈局問題我們會在CSS的浮動（float）的講解中詳細說明。
疫情期間，請大家少出門，不聚會，沒事在家學學網頁製作，即抗擊疫情又提高自己!
喜歡的小夥伴請關注我，閱讀中遇到任何問題請給我留言，如有疏漏或錯誤歡迎大家斧正，不勝感激！
"
/<code>
/<code>

/<table>

/<table>/<table>

閱讀更多 大魚與數字藝術 的文章

關鍵字: 電腦 設計 網頁