網頁布局之盒子模型
-
網頁：網頁實際上是一層一層的，我們所設計的網頁就是在這些層上面設計，我們所看到的網頁是最上面的一層
-
文檔流：最下面的一層稱為文檔流，是網頁的基礎
我們所創建的元素默認是在文檔流中進行排列
對於元素的兩個狀態：-
在文檔流中
-
不在文檔流中（脫離文檔流）
-
-
塊元素：頁面中獨占一行
默認寬度是父元素的全部(會把父元素撐滿)
高度是被內容撐開（子元素） -
行內元素：頁面中不會獨占一行，只占自身大小，行內元素在頁面中自左向右水平排列
行內元素的默認寬度和高度都是被內容撐開
盒子模型：（box model)
-
概述：Css將頁面中所有的元素都設置為一個矩形的盒子
-
組成部分
-
內容區（content）
- 概念：元素中所有的子元素和文本內容都在內容區排列
-
邊框（border）
-
概念：屬於盒子邊緣，里面是盒子內部，出了邊框都是盒子的外部
-
設置方式：設置邊框，至少需要設置三個樣式：
-
邊框的寬度： border-width 有默認值 一般為3個像素
-
邊框的顏色： border-color 有默認值 為黑色
-
邊框的樣式： border-style 默認值為 none 表示沒有邊框
solid 表示實線
dotted 點狀虛線
dashed 虛線
double 雙實線 -
border-XXX 可以指定四個方向的邊框格式：（xxx指的是上述三個樣式，即width,color,style)
四個值：上，右，下，左
三個值： 上，左右，下
兩個值： 上下，左右
一個值：上下左右 -
還有一組可以分別設置上下左右邊框格式：border-XXX-width
XXX可以是：top,right,bottom,left
其他兩個與border-width格式一樣 -
**border 簡寫屬性 ,可以通過該屬性，同時設置邊框所有的相關樣式，並沒有順序要求 **
-
語法： border：soild red 20px;
border:20px orange solid; -
此外還有：
border-top border-right border-bottom border-left border-radius 圓角邊框 取值 50% 圓 float：left/right 在頁面中的布局左對齊/右對齊
-
-
-
內邊距（padding）
-
內容區和邊框之間的距離 ；一共有四個方向的內邊距
padding-top padding-right padding-bottom padding-left
內邊距的設置會影響到盒子的大小
背景顏色會延伸到內邊距上一個盒子的可見框的大小，由內容區，內邊距和邊框共同決定
- padding：內邊距的簡寫屬性，可同時指定四個方向的內邊距 語法格式與border一樣
-
-
外邊距（margin) :
-
概念：用來確定盒子的位置，不會影響盒子可見框的大小
-
四個方向的外邊距：
margin-top ：上外邊距，設置一個值，元素會向下移動 margin-right:默認情況下設置margin-right不會產生任何效果 margin-bottom:下外邊距，設置一個正值，其下邊的元素會向下移動（擠開別的元素） margin-left：左外邊距，設置一個正值，元素會向右移動 -
元素在頁面中是按照自左向右的順序排列的
margin 也可設置負值，元素會向相反方向移動 margin 簡寫屬性，可同時設置四個方向的外邊距，用法和padding一樣 margin 會影響到盒子實際占用空間示例圖
-
-
盒子大小
-
box-sizing 用來設置盒子尺寸的計算方式（設置width和height的作用）
-
可選值：
-
content-box 默認值，寬度和高度用來設置內容區的大小
-
border-box 寬度和高度用來設置整個盒子可見框的大小
width 和height指的是內容區和內邊距和邊框的總大小
-