css基礎

1.塊級元素，行內元素，和內聯(lián)元素

塊級元素就是可以設置寬高，自己可以單獨成為一行，別的元素無法跟他并行；

行內元素，對其設置寬高無法起作用，只能依靠自己內部元素來撐起寬高，可以和別的行內元素或者內聯(lián)元素并行，無法和塊級元素并行；

內聯(lián)元素，可以設置寬高，也是自己不單獨成一行，可以和內聯(lián)元素或者行內元素成為一行；

當然這些可以用display屬性來轉換，display:block可以轉換成塊級元素，display:inline,可以轉換成為行內元素，display:inline-block，可以轉換成內聯(lián)元素

2.邊距問題

盒子模型的屬性，內邊距padding和外邊距margin；

當這兩個屬性只有一個值的時候，例：padding：10px;那么就是四個內邊距都是10px;

如果有兩個值，例：padding: 10px 20px;那么就是上下內邊距是10px，左右為20px；

三個值，例：padding: 10px 0 20px；那么就是上內邊距是10px,左右為0，下為20px;

margin和padding他們的設置是相同的；

3.浮動（float)

在有些時候，需要對盒子進行浮動，來達到自己想要的布局。盒子浮動的時候，脫離了普通文檔流。當上一個盒子浮動的時候，下一個盒子會自動跑上一個盒子的下面；下面我會將浮動和不浮動的情況截圖顯示

這個是兩個盒子都沒有浮動，也就是普通文檔流的形式

這個是box1浮動的時候，box2不浮動的時候，box2會自動跟到box1的下方

這個是兩個盒子都浮動，如果兩個盒子的寬度的總和沒有超過父盒子，兩個盒子會并排

既然我們講了浮動，那么有些時候我們需要清除浮動；

清除浮動有很多種方法，說一下我常用的方法；

偽類清除，IE8以上和非IE瀏覽器才支持:after，原理和方法2有點類似，zoom(IE轉有屬性)可解決ie6,ie7浮動問題?

以下不截圖了，第二種父盒子添加overflow:hidden；父盒子不用添加高度，會隨著子盒子最高的高度走，如果父盒子添加高度沒有子盒子高，那么會隱藏掉一截；第三種，父盒子跟子盒子一起浮動，第四種是，同級盒子之間的清除，用clear:both，clear:left，clear:right，按照字面意思，清除對應的浮動

4.定位(position)

定位有3個屬性，默認static(加上這個相當于4種)；第一種，relative，單獨加這個對于自己本身是沒有任何的影響的；第二種，absolute，子級絕對定位，父級相對定位，可以用left,right,top,bottom，來決定相對于父級的位置，第三種是fixed，這種是相對于瀏覽器來決定位置的也是left,right,top,bottom來決定在瀏覽器中的位置，如果想要清除定位（relative是不需要清除的），用static；

布局是基于浮動和定位來實現(xiàn)，有時間整理出布局的相關內容