9.寬度自適應和解決浮動塌陷

錨點

命名錨點鏈接的應用：

命名錨點的作用：在同一頁面內的不同位置進行跳轉。
製作錨標記：
	1)給元素定義命名錨記名
	語法：<標記   id="命名錨記名">    </標記>	
	2)命名錨記連接
	語法：<a href="#命名錨記名稱"></a>

寬高自適應

網頁佈局中經常要定義元素的寬和高。但很多時候我們希望元素的大小能夠根據窗口或子元素自動調整，這就是pc自適應。
自適應的優點：
元素自適應在網頁佈局中非常重要，它能夠使網頁顯示更靈活，可以適應在不同設備、不同窗口和不同分辨率下顯示。

寬度自適應

元素寬度設置爲100%。（塊元素寬度默認爲100%）
或者不設置寬度（width）;（寬度是父元素的寬度）

高度自適應

1)自適應元素高度：height:auto;或者不設置;（是子元素撐開父元素的高度）

2)元素高度自適應窗口高度
設置方法：html,body{height:100%;}
注：如果設置子元素的高度跟隨父元素的高度變化而變化，那麼父元素必須有高度。

高度自適應第一種情況：
height不設置 或者 height:auto; 元素的高度是被內容撐開的。
但是height不去設置或者是設置height：auto; 存在問題：當內容極度減少容器的高度不會被撐開，影響整個版式的佈局。
上述問題解決方法：當內容沒有或內容極度減少，讓容器保持一個最小高度

高度自適應第一種情況的需求：
a：當內容增加，要內容撐開容器的高度
b: 當內容極少，要讓容器保持一個最小高度。

最小高度的設置：
    屬性：min-height:;

擴展(瞭解)：
min-height:; 現代高版本瀏覽器都能支持，但是ie低版本（ie6）不認min-height
height在現代主流瀏覽器裏面，就是固定高度，但是在ie6裏面默認把height 解析成最小高度。

解決浮動塌陷

當子元素有浮動並且父元素沒有高度的情況下父元素會出現高度塌陷

高度塌陷的解決方法
法一：
給父元素添加聲明overflow:hidden;(觸發一個BFC)
法二：
在浮動元素下方添加空div,並給該元素添加
聲明：div{clear:both; height:0; overflow:hidden;}
法三：萬能清除浮動法
選擇符::after {
/* 內容可以是空格、點等，這個內容最後會被隱藏 /
content: “.”;
/ 將元素轉換爲塊級元素 /
display: block;
/ 高度爲0，內容被擠出去了 /
height: 0;
/清除兩側浮動/
clear: both;
/ 溢出隱藏 ，隱藏點*/
overflow: hidden;
/* 隱藏元素、佔據空間 */
visibility: hidden;
}

visibility:hidden/隱藏

visibility:hidden;和display:none;的區別：
visibility:hidden;屬性會使對象不可見，但該對象在網頁所佔的空間沒有改變，等於留出了一塊空白區域，而 display:none屬性會使這個對象徹底消失不顯示，也不再佔用位置。

僞對象選擇符

1）、::after :  與content屬性一起使用，定義在對象後的內容。

語法：選擇符:：after{content:”文字”;}
	 選擇符:：after{content:url(圖片路徑)；}
	
如：div::after{content:url(logo.jpg);}
   div::after{content:"文本內容";} 
   
   
   2）、::before:     與content屬性一起使用,定義在對象前 的內容。
div::before{content:"在其前放內容";}


3）、::first-letter 定義對象內第一個字符的樣式。
說明：
*(該僞元素只能用於塊級元素)

4）、::first-line:定義對象內第一行的樣式。
	*(該僞元素只能用於塊級元素。)

拓展

 min-height:; 現代高版本瀏覽器都能支持，但是ie低版本（ie6）不認min-height
height在現代主流瀏覽器裏面，就是固定高度，但是在ie6裏面默認把height 解析成最小高度。
   
如果考慮IE6兼容：最小高度怎麼設置？
  a: 
     min-height:300px;
      _height:300px;
      執行邏輯：
          非IE6瀏覽器：能識別min-height,不認_height
          iE6瀏覽器：能識別_height 默認解析成最小高度，不識別min-height;
 b：
      min-height:300px;
      height:auto!important;
      height:300px;
     執行邏輯：
          非IE6瀏覽器：執行min-height, height:auto權重最高，會把height:300px用auto覆蓋，auto爲height默認值。
          ie6瀏覽器：不識別min-height, 不認爲height:auto爲權重最高,後寫的是height:300px  執行的就是height:300px;