css的引用和盒模型

咱們上面幾章大體講了一下html，雖然html簡單可是你們別忘記它僅僅是一個頁面的骨架，再美的人若是隻有骨架的話相信也須要一副皮囊，因此接下來咱們要學習如何改善咱們的頁面的「顏值」，也就是咱們開始正式學習css。
css的全程是：疊樣式表(Cascading Style Sheets)
第一步咱們來認識一下盒模型而且簡單的瞭解一下效果

咱們第一步簡簡單單的創造一個空的div

空的div由於是塊級元素，因此即便是空的高度是0也是獨佔一行

下面我開始給它化妝了

先給他畫個藍色的粉底，爲了你們能夠看清楚它。可是若是你畫完粉底就會發現由於高度是0的緣由仍是看不到它。咱們接下來要給它加個高度

寬度和高度都設成100px

咱們的第一個長100像素高100像素顏色是藍色的div出現鳥～
如今在咱們講更多的酷炫的css技術以前，咱們暫時收回來一下，咱們尚未說怎麼在html裏面引用css呢：
css的引用方式有三種:
1.內聯樣式（行內樣式）
內聯樣式顧名思義就是寫在最內部的樣式：

2.內部樣式
內部樣式就是寫在次內部的樣式：

3.外部樣式
這個外部樣式的講究大了，首先這種模式把css代碼單獨寫在一個css文件裏面，而後用某種方式去引用，因此咱們首先要創建一個css文件

在這個文件裏面寫上以前在內部樣式表裏面同樣的代碼就OK，創建聯繫咱們就要經過一個特殊的標籤link

咱們的外部樣式表被成功的引入了！！

OK咱們學會了怎麼引入css了，咱們接下來要好好研究一下一個標籤的css結構：
打開控制檯

這就是標準的盒模型的結構，這個結構分爲四層:
最外面一層是margin表明着總體元素距離外面的其餘元素的距離
margin下面的是border層級，就是元素外部的邊框
border層級下面的是padding層級，padding層級是填充層級也就是邊框距離着元素真是寬度裏面的填充距離
最下面的層級是css所規定的(或者是元素默認)的寬度和高度
別bb寫代碼：

因此咱們能夠得出一個結論:
一個元素真實佔的空間大小是它的寬/高加上它的padding+border