9.盒子模型：

   它講了這樣一個事實：在HTML裡，在瀏覽器渲染頁面時，所有的元素都是要佔據一定空間的，而且這個空間一定是一個矩形的。在我們的瀏覽器中絕對不出現佔據圓形、不規則圖形這樣空間的元素存在。

簡單的來說，我們可以把頁面上的所有元素都當做一個盒子看。

盒子由邊框（border）、內邊距（padding）、內容區（cotent）、外邊距（mrgin）

內邊距會影響盒子所佔的實際空間大小

盒子在瀏覽器中所佔空間大小是由：border、padding、width、height共同作用的。

 

（1）邊框 border 屬性

 

• border 屬性是由3個子屬性構成，缺一不可。缺少任何一個子屬性，都不能正常顯示出邊框

• border 屬性的3個子屬性 ：style、width、color

• 各個瀏覽器。對於border-style 的值，渲染出來的樣子不是100%相同的。能100%相同的有：solid，double，dashed     如果說有特殊樣式的邊框，還要求必須100%的呈現效果一致，只能使用圖片

• 在同一個盒子裡，後出現的邊框樣式會覆蓋先出現的邊框樣式。我們往往都先寫一個合寫的總的樣式，然後再單獨寫某個方向上的邊框樣式，來達到某個方向上特殊的邊框樣式

• 邊框的各個子屬性可以給1個值，表示4個方向上的樣式都一樣

•  給2個值，分別代表的是（上下、左右）

• 給3個值，代表的是（上、左右、下）

• 給4個值，代表的是（上、右、下、左）

• 簡單的說就是從上方向開始，順時針轉

 

（2）內邊距 padding 屬性

 

          padding 也分著上、右、下、左四個方向

          如果給盒子新增背景色，這個背景色會作用於整個盒子，包括padding 部分和 border部分

          padding 只有 width 這1個屬性，沒有style、也沒有color

 

（3）盒子的實際佔用空間的大小是由3個屬性決定的：border、padding、width

         盒子的實際大小=border-width*2+padding*2+width

          

 

10.標準文件流：

標準文件流的概念：它不是一個東西，也不是一個物件，它其實是瀏覽器渲染頁面的一個規則：所有的頁面元素 ，都要按照它下Html文件中出現的先後次序，依次在瀏覽器中從左上角開始，從上到下，從左到右的順序依次顯示

 

標準文件流的幾個性質

（1）空白摺疊

（2）高低不齊，底端對齊

標準文件流把頁面上的元素分為兩大類：

（1）塊級元素

     1.單獨的佔一行

     2.可以設定寬高

     3.如果不設定寬度，那麼它將預設佔滿父盒子的寬度

（2）行內元素

     1.與其他元素自動並排在一行上

     2.不能設定它的寬和高，它的寬和高就是自己內容的寬和高

（3）哪些是塊級元素哪些是行內元素？

     1.可以自動換行的是塊級元素，不能自動換行的是行內元素

     2.p標籤  塊級元素

       塊級元素都是容器級標籤，文字級標籤都是行內元素，p標籤是個特列，它是文字級標籤，但是它是個塊級元素

（4）塊級元素與行內元素是能夠相互轉換的

     display:block（塊）/inline（行內）

現在無法實現即能設定寬高又能讓不同的塊並排在同一行，原因是標準文件流的性質不允許這麼做。

所以，現在如果我們必須把網頁的內容以這個形式來顯示，就必須打破標準文件流的限制。

打破標準文件流的限制有3種方法：浮動、相對定位、絕對定位

 

11.浮動float

浮動分為左浮動和右浮動

float:left/right;

浮動帶來的特性：

（1）浮動的元素會脫離標準文件流

     脫離了標準文件流的元素，就可以設定寬和高，而不用理會它是不是塊級元素還是行內元素

（2）浮動的元素會相互貼靠

（3）文字圍繞現象

（4）收縮現象

 

寫選擇器的時候，我們一般都把這個巢狀關係寫足

 

12.清除浮動

（1）給父盒子新增高度屬性（height）

父盒子不能被浮動的子元素撐開高度

新增高度雖然能夠清除浮動帶來的影響，但是它會對我們的頁面產生不好的限制，也就是父盒子下不能自適應內容的多少，所以我們需要找到一種不用新增高，也能清除浮動的方法

（2）給第2個盒子新增屬性clear：both；

     clear就是清除浮動的意思，clear的值有3個：left,right,both.

     這個方法有個後遺症，就是垂直方向上的margin 失效了，原因還是因為父盒子沒高度

（3）隔牆法

     <1>外牆法

     就是在2個互相影響的盒子中間，新增1個div，給它新增樣式clear:both:height: 10px;

     隔牆法隔開的兩個盒子，仍然是沒有height的。

     <2>內牆法

     把牆修在第一個盒子的內部，必須放在最後1個元素

（4）overflow

     給內部有浮動的元素的父盒子，新增一個overflow:hidden;屬性，就能夠清除浮動對其他頁面元素帶來的影響

     overflow:hidden 就是溢位隱藏

     使用原子化的類

 

13.外邊距margin

   margin也分為4個方向，與padding 相同

   <1>盒子居中

   margin:0 auto;

   使用這個語法水平居中的前提

•      盒子必須有明確的寬度

•      只有標準流中的盒子才能使用margin:0 auto 居中

•      margin:0 auto 是使被修飾的盒子在父盒子的區域內部居中，而不能使盒子內部的文字居中對齊  文字的居中對齊屬性：text-align:center

   <2>margin 的疊加

• 水平方向上的margin 是疊加的

• 垂直方向上的margin 不疊加：margin的塌陷現象 （就高不就低）

做盒子模型，首先橫向在一條直線，縱向在一條垂直線

 

14.行高line-height

      css裡實現一個效果，往往有多種手段 

     盒子裡內容很多，想讓文字和盒子的邊框有間距，有縫隙用padding ,單純垂直集中用line-height

 

15.font 屬性：由3個小屬性組成

     font-size

     font-family

     line-height

     語法 font:字號/行高 字型；

     一個盒子可以同時設定多個字型，一定要讓英文的字型寫前邊，漢字的字型寫後邊。

     所有的漢字字型都有個對應的英文名字：“Microsoft YaHei”<=> 微軟雅黑，“SimSun”<=> 宋體做網頁的時候不要用稀奇古怪的字型，所有的字型，都必須是客戶端的電腦裡有這樣的字型才能夠按你的意圖來展示，所以，如果你想用奇特的字型，只能用圖片。

 

16.背景設定

     背景顏色：background-color

     background-color:red;

     background-color:#336699; #369 #rrggbb

     background-color:rgb(225,225,255)

     背景圖：background-image

     如果同時設定了背景圖和背景顏色，那麼背景顏色就會被背景圖蓋住

 

17.精確還原盒子

1.初始化

2.設定寬高

• width

• height

• margin

• border

• font

• padding

• color

 

18.超連結樣式

  偽類：

    ：link         表示使用者沒點選過的樣式

    ：visited    表示使用者點選過之後的樣式

    ：hover      表示滑鼠懸停在超連結之上的樣式

    ：active      表示滑鼠點選下去但是不鬆手的樣式  

 a: link,a:visited  選擇器等價於 a

如果你真的要同時設定4個偽類，那麼必須按照lvha的順序來寫樣式表程式碼  特例，text-decoration 不能從父盒子繼承給a標籤

元素浮動以後