CSS CSS DIV布局網頁

現代網頁布局：css+div：

對每一部分內容進行設計。這是現在主流的網頁布局方式，使用div+css。

css盒模型：

css中， box model叫盒子模型（或框模型），box model規定了元素框處理元素內容（element content）、內邊距（padding）、邊框（border） 和 外邊距（margin） 的方式。在html文件中，每個元素（element）都有盒子模型，所以說在web世界裡（特別是頁面布局），box model無處不在。下面是box model的圖示：

解釋：內容：就是html的內容，在最內層

內邊框padding：padding-top、padding-right、padding- bottom、padding-left

邊框border: border-top、border-right、border-bottom、border- left

外邊距margin：marging-top、margin-right、margin-bottom、margin-left

內邊距、邊框和外邊距可以應用於乙個元素的所有邊，也可以應用於單獨的邊。而且，外邊距可以是負值，而且在很多情況下都要使用負值的外邊距。

測試demo如下：

css_div.html

doctype html

>
<
html 
lang
="zh-cn"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
meta 
name
="description"
conent
="this is an example"
>
<
meta 
name
="keywords"
conent
="css,div"
>
<
title
> css和div組合布局 
title
>
<
link 
rel="stylesheet"
type
="text/css"
href
="css_div.css"
>
head
>
<
body
>
<
h1> css盒模型
h1>
<
hr>
<
div 
class
="wraper"
>
<
div 
class
="content"
>
<
h2>這是乙個測試
h2>
<
h2>這是乙個測試
h2>
<
h2>這是乙個測試
效果圖：
CSS CSS DIV布局網頁
現代網頁布局 css div 對每一部分內容進行設計。這是現在主流的網頁布局方式，使用div css。css盒模型 css中，box model叫盒子模型 或框模型 box model規定了元素框處理元素內容 element content 內邊距 padding 邊框 border 和 外邊距 m...
網頁布局流式布局
工具所用到外掛程式 masonry 是 一款非常強大的jquery動態網格布局外掛程式，可以幫助開發人員快速開發類似剪貼畫的介面效果。和css中float的效果不太一樣的地方在 於，float先水平排列，然後再垂直排列，使用masonry則垂直排列元素，然後將下乙個元素放置到網格中的下乙個開發區域。...
網頁布局 table布局
table 的特性決定了它非常適合用來做布局，並且 中的內容可以自動居中，這是之前用的特別多的一種布局方式 而且也加入了display table dispaly table cell來支援 teble 布局。1.簡單布局 1 doctype html 2 html lang en 3 head 4...