一、文本的水平對齊方式
使用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無效；
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/83617.html
標籤：Html/Css