你知道網站上的頁面是怎麼排版的嗎？你知道我們需要什麼來建立自己的網站嗎？關注我，分享每天製作網頁的技巧

 

 

 

 

 

說到網頁製作，我們必須知道網頁佈局的本質是什麼。事實上，這是放置箱子的過程。盒子的位置是什麼？在網頁的佈局中，我們如何根據藝術家給出的效果圖，將網頁上的文字和圖片按順序排列？

 

 

 

 

 

瞭解盒子模型

 

 

 

 

 

大家都知道CSS學習的三個關鍵點：CSS框模型、浮動框模型、定位框模型一定要瞭解，否則你很難佈局一個網頁，比如我在下麵截取的百度圖片主頁的網頁佈局，如果框模型改變了，那麼整個網頁就會亂了

 

 

 

 

 

 

這是一個普通的百度圖片頁面

 

 

 

 

 

如果你改變了盒子的型號和樣式，網頁就會變得雜亂無章

 

 

 

囙此，如果我們想做好自己的網頁，我們應該看透網頁佈局的本質

 

 

 

 

 

1首先使用CSS設定框的大小，然後放置框。

 

 

 

 

 

2最後，將文字、圖片等網頁元素放入框中。

 

 

 

 

 

只要我們瞭解盒子模型的本質，我們就可以隨意製作我們滿意的網頁

 

 

 

 

 

看完上面的對比，我們明白了方框是網頁佈局的關鍵點，所以我們應該瞭解這個方框的特點。

 

 

 

 

 

所謂框模型：HTML頁面中的佈局元素被視為一個矩形框，即內容的容器。

 

 

 

 

 

 

這是網頁上的he'mo'x

 

 

 

長方體模型由元素內容、邊框、填充和邊距組成。

 

 

 

框中的文字和圖片元素是內容區域

 

 

 

盒子的厚度使我們成為盒子的邊緣

 

 

 

框內容和邊框之間的距離是內邊距（類似於儲存格添加）

 

 

 

盒子之間的距離是外邊距

 

 

 

（1）方框邊框

 

 

 

 

 

有三種常見的邊框樣式，即：

 

 

 

 

 

邊框寬度：方框邊框的寬度

 

 

 

 

 

邊框樣式：方框邊框、實線、虛線、點線的樣式。如果沒有邊框，將忽略所有邊框的寬度（預設值無）

 

 

 

 

 

邊框顏色：邊框的顏色

 

 

 

 

 

通常在編寫邊框樣式時，可以縮寫為：border:5px solid red，表示寬度為5點數的實線邊框和紅色

 

 

 

 

 

 

框一個200寬200高的盒子