背景。元素的背景顯示區域在內容區和內邊距區，並且邊框是畫在背景之上的。這就是說如果邊框的樣式是dotted之類的，則邊框空隙之間是可以看到背景的。
可以設置背景的聲明有：background-color、background-image、background-position、background-repeat、background-attachment、background-origin等等。
首先background-color，這個顧名思義就是設置一個背景純色，這個背景純色是放在背景最底層的，若是有個背景圖案那么這個背景純色是放在背景圖案下面的。它接受的值可以是關鍵字可以是16進制表示也可以是rgba表示。但是更常見的是為背景設置一個背景圖片--background-image，背景圖片接受url參數，這個參數可以是相對地址也可以是絕對地址。如果引入多個url，那么各個url之間要用逗號隔開，先引入的url總是在前面。例如background-image：url（1.jpg），url（2.jpg）；background-color和background-image一樣，都可以應用於塊級元素和行內元素。如果背景圖片比較小，沒有完全充滿元素的內容區和內邊距區域，這種情況下可以為背景圖片設置如何重復效果，相應的樣式屬性就是background-repeat。background-repeat可以取得值是repeat、repeat-x、repeat-y、no-repeat。默認情況下，background-repeat的默認值是repeat，也就是在水平方向和豎直方向上都重復。而重復一定是從某一個圖像開始的，這個圖像就叫做原圖像，它指示出了如果沒有repeat的時候這個背景圖片所在的位置。它可能在元素中的背景上下文中的任何位置。設置這個原圖像位置的屬性就是background-position。這個屬性的取值可以是關鍵字（top、left、right）可以是數值或者百分數，這些值都是相對於某個參照來實現的，默認情況下，這個參照就是上內邊框的邊界和左內邊框的邊界。要修改這個參照的邊界，就要使用background-origin這個屬性，這個屬性可以取三個關鍵字的值：content-box|border-box|padding-box，這三個關鍵字分別說明了背景的顯示區域，是在內容區里面還是在內邊距區域里面還是在邊框區域里面。有了參照的邊界，background-position就可以根據自己的取值計算出原圖像所在的位置，這個位置是根據偏移點到左和上的邊界距離來定位的，這個偏移點就是圖像上用於計算到邊界距離的那個點。在background-position的取值中，數值的偏移點是圖像的左上角。關鍵字沒有偏移點，它很簡單的把整個圖像完整的放到左上角或者右下角之類的。而百分數的偏移點是不固定的，它的偏移點也是根據自己的百分數取值再計算出來的，也就是說百分數值同時應用於元素和原圖像。background-attachment就很簡單了，它就是設置了背景圖片會不會隨着文檔去滾動而已。
浮動。所有元素都可以浮動，一旦元素浮動了，他就會變成一個塊級元素，並且它的寬度會盡可能的窄。它是使元素脫離文檔流的兩種方法之一，可以實現兩個塊級元素的同行顯示。就像許多其他地方說的一樣，當一個元素浮動的時候，它其實是半脫離文檔流的。這里的半脫離文檔流可以這么理解，首先是脫離文檔流，這個是說這個浮動元素在包含快的內容區域中已經不占用空間了，后續元素和包含塊的內容區感覺不到它的存在，所以后續元素會適當的占據它的位置或者父元素的高度會發生變化。而這個“半”字是說這個浮動元素並不是像定位一樣感覺不到其他元素的存在想放哪里放哪里，並且也不是對其他元素沒有任何其他影響的。首先這個浮動元素是不能超出其包含塊的（包含塊就是其最近的塊級祖先元素），其次是其他元素對浮動元素的位置是有影響的（尤其體現在向上浮動的時候），最后浮動元素和其他元素的內容是相互可以感覺到對方的存在的，所以是半脫離文檔流。同時在一個包含塊中的所有浮動元素又都是在同一個文檔流中的，也就是彼此之間不會覆蓋，他們之間的padding、border、margin是相互之間都有效的並且margin不會合並，
浮動的樣式聲明為float，它只有兩個可以產生作用的值：right、left。這兩個值設置了元素水平移動的大方向，向左或者向右。但這並不是說它在垂直方向上是不移動的，稍微動手寫個例子就會發現總覺得浮動元素有往上跑的趨勢，這就說明了浮動元素默認總是同時向上移動的，並且不能修改。這也是浮動元素有些復雜的地方，因為浮動元素對待前面的元素和對待后面的元素是不一樣的並且css規范對浮動元素的向上移動也做了很多限制，會有不同的情況。浮動元素總是能感到前面的元素存在的（這也是半脫離文檔流的原因之一），例如一個浮動元素上面有一個塊級元素那么它是不會向上移動並覆蓋那個塊級元素的，相反，后續塊級元素感覺不到浮動的存在會移動過去並且被浮動元素覆蓋掉,當然內容是不會覆蓋掉的（半脫離文檔流的原因之二）。所以浮動元素對於其前面的元素表現的就好像inline-block一樣。若前面沒有任何元素，那么浮動元素則向上移動到包含塊的內容區頂點為止（半脫離文檔流的原因之三）。向上浮動還需要注意一點就是浮動元素的頂端不能比之前所有浮動元素的頂端更高，
就像3向左浮動，1、2向右浮動，3的頂端不能比之前1、2浮動元素的頂端更高，所以即便3的上面還有空間他也只會和2對齊。
因為畢竟浮動是有些脫離文檔流的，父元素的內容區是感覺不到它的存在的，所以父元素的高度可能會變短，而且浮動元素的部分會跑到父元素的外面造成不希望的結果。
這時候就需要用到清楚屬性clear了。clear只能作用於塊級元素，它的作用就是為了不讓內容圍繞在浮動元素周圍，是使浮動元素對於設置了清楚浮動的內容來說表現的像一個塊級元素一樣，是該內容換到浮動的下一行。這樣就可以增加父元素的高度是浮動元素完全在父元素之中了。一般的寫法是為父元素添加一個樣式 .cleafix::after {content:'.';display:block;visiable:hidden;overflow:hidden;height:0;clear:both;}
定位。定位相對於浮動就比較清晰了，它是使元素脫離文檔流的兩種方法之二，它的作用就是把元素放到你想放的位置上。在css中牽扯到位置定位的一般就會有一個參照，position也不例外，它的取值有三個：relative|absolute|fixed，這三個中每一個都有一個定位參照物。應用於定位參照物的配套屬性有：top、right、bottom、left、z-index，這些屬性如果沒有設置position的情況下使用是不會起作用的。每條屬性的含義都是定位元素對應邊相對於參照物的對應邊的間隔距離，數值可以為負。不同的position不但它的參照物不同，還會有一些自己特有的性質。
首先position：relative的定位方式，這種定位稱為相對定位。當把一個元素設置為相對定位的時候，這個元素仍在在文檔流中並沒有脫離文檔流，父元素的內容區和其他元素還是像在正常文檔流中一樣可以感覺到他的存在，唯一的區別就是它的z-index層級比其他元素高了。這個時候，它原來的位置就是定位參照物，設置的top、right等屬性都是相對於原來位置的。當定位的元素相對於原來的位置偏移的時候，它會覆蓋其相鄰的元素，並且原來的位置空間還是保留在那里不變的。這種定位一般是作為絕對定位的參照物使用。
position：absolute的定位方式。這種定位成為絕對定位，把一個元素設置為絕對定位的時候，這個元素就完全脫離了文檔流，父元素和其他子元素看不到它的存在，所以父元素可能height會變小，而其他元素會占據他原來的位置，同時自己的寬度也會變為內容寬度。這個時候不論他原來是什么類型的元素，現在都是塊級元素，這點和浮動是差不多的。而它的定位參照物就是第一個定位祖先元素或者根元素，所以要相對於父元素定位的話就把父元素設置為relative。這種完全脫離文檔流的元素是不會和浮動元素一樣有所羈絆的，它想放哪里就放哪里。
position：fixed的定位方式和absolute的定位方式是差不多的，只是這個的參照物是瀏覽器窗口而已。
最后一點就是有時候定位元素沒有設置寬或者高，而在定位的時候又同時設置了right、left或者top、bottom這種屬性，那么這種情況下會把定位元素拉寬或者拉高。