頁面布局 layout

• 塊元素在文檔流中獨占一行，塊元素在頁面中獨占一行

• 默認寬度是父元素的全部（會把父元素撐滿）

• 默認高度被內容撐開（子元素）

• 行內元素不會獨占頁面一行，只占自身大小；

• 行內元素在頁面中水平向右排列，如果一行之中不能容納的下所有行內元素，則元素會換到第二行繼續自左向右排列。

• 行內元素默認的高度和寬度都是被內容撐開。

盒子模型（box model）

一、內容 content

內容區（content） 元素中的所有子元素和文本內容都在內容區中排列，內容區的大小由 width和height 來決定。

width、height屬性用以設置內容區的寬度和高度

二、邊框 border

邊框（border）邊框屬于盒子邊緣，邊框里面屬于盒子的內部，出了邊框都是盒子的外部，要設置邊框至少需要三個樣式。 

• 邊框的顏色 border-width

• 邊框的顏色 border-color 

• 邊框的樣式 border-style  

1、 border-width 有默認值，一般是3個像素（必須寫，會使用各個瀏覽器的默認值）

border-width可以用來指定四個方向的邊框寬度

• 四個值：上、右、下、左（順時針方向）border-width: 1px 2px 3px 4px;

• 三個值：上、左右、下 border-width: 1px 2px 3px

• 兩個值：上下、左右   border-width: 1px 2px 

• 一個值：上下左右（四個邊） border-width: 1px 

除了border-width 還有一組 border-xxx-width，xxx可以是 top、right、left、bottom，用來單獨指定某一個邊的寬度

2、 border-color 用來指定邊框的顏色，同樣可以分別指定四個邊的邊框，規則和 border-width 相同

border-color 可以省略不寫，如果省略了就會自動使用 color的默認值

3、 border-style 指定邊框的樣式，不可以不設置，因為border-style的默認值是 none（沒有）

• solid 實線

• dotted 點狀虛線

• dashed 虛線

• double 雙實線

border 簡寫屬性：

border  通過 設置該屬性可以同時設置邊框所有的相關樣式，并且沒有順序要求

除了border 之外還有四個 border-xxx

• border-top

• border-right

• border-bottom

• border-left

三、內邊距 padding

內容區和邊框之間的距離是內邊距

一個有四個方向的內邊距

• padding-top

• padding-left

• padding-bottom

• padding-left

內邊距的設置會影響盒子的大小

背景顏色會延伸到內邊距上，內邊距默認是透明的 transparent

一個盒子的可見框大小，由內容區、內邊距、邊框共同組成，所以在計算盒子大小的時候，需要將這三個加到一起計算。

padding 內邊距的簡寫屬性，可以同時指定四個方向的內邊距。

四、margin 外邊距

外邊距不會影響可見框的大小，但是外邊距影響的是盒子的位置。影響實際占用網頁空間的大小。元素有四個方向的外邊距：

• margin-top

• margin-left

• margin-right

• margin-bottom

注意：默認情況下設置 margin-right 不會產生任何效果

left 左外邊距，設置正值，元素會向右邊移動；top 上外邊距，設置正值，元素會向下移動

元素在頁面中會按照自左向右順序排列，所以默認情況下如果設置的是 左上，移動的是元素自身。

設置其他 下和右外邊距會移動其他元素，把別的元素擠開。margin-top 和 margin-left擠開別人

margin-bottom 下外邊距，設置正值，下邊的元素會向下移動，如果是負值元素會向相反的方向移動。

簡寫屬性