一、文本的水平對齊方式 使用text align來設置文本的對齊方式；text align的取值:left(向左對齊)/center(水平居中對齊)/right(向右對齊)/justify(兩端對齊); text align只對應用此樣式的元素的非塊級子元素有效，對塊級子元素無效；對比使用margi ...
一、文本的水平對齊方式
使用text-align來設置文本的對齊方式；text-align的取值:left(向左對齊)/center(水平居中對齊)/right(向右對齊)/justify(兩端對齊);
text-align只對應用此樣式的元素的非塊級子元素有效，對塊級子元素無效；對比使用margin進行設置居中對齊，不同點是margin的作用效果對象是當前塊級元素，而並非子元素；
ps:line-height(行高),如果行高的設置值大於font-size(字體大小)的設置值，則一行中的文字將在該行的設置的行高區域中垂直居中顯示，這個是作用到應用了該樣式的元素的區域里的每一行；
二、定位
1.普通流定位，這也是瀏覽器預設的文檔流定位；
2.浮動定位；
3.相對定位:relative(相對於該元素原始位置產生的偏移距離，不會脫離文檔流)；
4.絕對定位:absolute(會脫離文檔流，相對於離自己最近的以定位的祖先級元素髮生位置偏移,ps:只要一個元素的樣式被relative/absolute/fixed這三者的任何一個所修飾，那麼該元素就成了已定位元素)；
5.固定位:fixed(會脫離文檔流)；
(1)普通流定位：每個元素都有自己的占地空間，每個元素都是從其父元素的左上角位置開始顯示的；
(2)浮動定位float:left/right/none;
left:元素脫離文檔流，在當前行的位置，停靠在父元素的左側或者挨著當前行中之前已經浮動的元素；
right:元素脫離文檔流，在當前行的位置，停靠在父元素的右側或者挨著當前行中之前已經浮動的元素；
none:預設值，不浮動;
發生浮動現象時的特點:
*****預設自動補位到當前行的最後一行;
*****元素一旦發生浮動，該元素則脫離文檔流(即該元素不占文檔流的空間，浮動之前的該元素的後面的元素會自動向該元素方向補位，補位的實質原因還是因為前面的元素脫離了文檔流)
*****發生浮動的元素會自動變成塊級元素(變成塊級元素的實質原因實際上是該元素脫離了文檔流)；
*****沒有發生浮動的文本，行內元素，行內塊元素，不會被壓在已浮動元素的下麵，而是自己環繞著已浮動元素的周圍；
清除浮動帶來的影響:clear:left(清除左浮動帶來的向前補位的影響)/right(清除右浮動帶來的向前補位的影響)/both(同時清除右浮動和左浮動帶來的向前補位的影響)/none；這裡並不是說clear是清除了浮動，而是清除當前元素因為前一個元素脫離文檔流而導致自己向前補位的這一個影響；
高度坍塌:當塊級元素沒有設置高度的時候，則此時該塊級元素的高度是由該塊級元素裡面的元素內容撐起來的，但是因為該塊級元素內部的元素都已經發生浮動了，意味著裡面的子元素都已經脫離文檔流，那麼作為父級的塊元素就認為自己內部已經沒有子元素的，此時原本是由子元素的內容撐起來的高度因為子元素髮生浮動脫離文檔流的影響而導致塊級父元素的高度直接變為0；由此就發生了高度坍塌現象；
解決：在父級塊級元素的內容末尾添加一個空的div塊級元素，同時設置該塊級元素的css樣式為清除受浮動影響的效果，這樣一來，該div塊級元素就不會因為它之前的元素髮生浮動而導致自己會自動向前補位了，這樣就保證了父級塊級元素的高度依舊是之前由內容撐起來的高度，也就不會產生高度坍塌現象了；
這裡可以利用css樣式來添加空的div塊級元素，代碼如下：
.list::after{
display:block;/*以塊級元素的方式顯示*/
content:"";/*該元素里的內容為空，沒有內容*/
clear:both;/*清除該元素受浮動效果的影響*/
}
堆疊順序：只有已定位元素能設置z-index(元素的疊放順序)；z-index設置的值越高的那個已定位元素，則那個元素顯示疊放在最頂層，父子級關係產生的堆疊現象設置z-index無效；
