web-css-文本

1、文本的水平對齊方式
    使用text-align來設置文本的對齊方式；text-align的取值:left(向左對齊)/center(水平居中對齊)/right(向右對齊)/justify(兩端對齊);
    text-align只對應用此樣式的元素的非塊級子元素有效，對塊級子元素無效；對比使用margin進行設置居中對齊，不一樣點是margin的做用效果對象是當前塊級元素，而並不是子元素；
    ps:line-height(行高),若是行高的設置值大於font-size(字體大小)的設置值，則一行中的文字將在該行的設置的行高區域中垂直居中顯示，這個是做用到應用了該樣式的元素的區域裏的每一行；
2、定位
    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無效；