CSS面試題：CSS實現自適應正方形以及等寬高比矩形

里沒什么好說的直接上圖、上代碼:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS實現自適應正方形以及等寬高比矩形</title>
</head>
<style>
  /* * {
    padding: 0;
    margin: 0;
  } */
  html, body {
    height: 100%;
  }

  /* 方法一: */
  .w_son-cont {
    width: 20% ;
    /*基于父級的寬度設置*/
    padding-top: 20% ; /* 或者padding-bottom: 20%; */
    background: red ;
  }


  /* 方法二: 這個方法不能實現正方形; 高度總是要比寬度大幾個像素 */
  .w_vw-cont {
    width: 30%;
    height: 30vw;
    background: red;
  }

  /* 方法三:  */
  .w_mar-outer {
    overflow: hidden;
    width: 20%;
    background-color: skyblue;
  }
  .w_mar-outer::after {
    content: '';
    display: block;
    padding-top: 100%; /* margin 百分比相對父元素寬度計算 */
  }
</style>
<body>
  <div class="w_son-cont"></div>
  <div class="w_vw-cont"></div>
  <div class="w_mar-outer"></div>
</body>
</html>

運行結果如圖所示:

語言上如何表達:

1. 實現方式有三種:
   1. 設置 寬度 width 、 padding 的top 或者 bottom 為相同的百分比 。
   2. 設置 寬度 width 百分比; 設置 高度 height vw; 且數值相同 。 
      1. 但是此方法不能實現完全的正方形, 只是看上去是一個正方形, 因為此方法得到的結果高度總是要比寬度大幾個像素 。
   3. 設置 寬度 width 百分比; 且使用 after 偽元素設置 display 屬性為  block, padding-top或者padding-bottom為 100% 。

之前有整理過部分知識點, 現在將整理的相關內容, 驗證之后慢慢分享給大家; 這個專題是 "前端面試題" 的相關專欄; 大概會有200+的文章。

如果對大家有所幫助，可以點個關注、點個贊; 文章會持續打磨。

有什么想要了解的前端知識, 可以在評論區留言, 會及時分享所相關內容。

上一篇網頁設計。首先感謝大家能對我進行指導，如果大家能講出更好的解決思路，感激不盡。特別感謝單調D奢華，PEK5SHL,哼哼哈hi等幾位朋友給出了自己的觀點。我用的是bootstrap的容器解決的。閑話少說，上干貨。

下圖是前臺效果：

HTML代碼如下圖：

哈哈，就是用的柵格。太low了，有沒有？感覺不高大上，那就來點正常的

上圖用的是bootstrap的導航插件。就不上代碼了。有的同學說媒體查詢也可以，時間太短，沒有深入研究，就不誤導大家了。謝謝大家觀賞。

后注：有好的問題，技術可以私信，大家可以共同分享，也歡迎各位投稿。再次感謝。

高自適應

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

寬度自適應

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

高度自適應

1)自適應元素高度：height:auto;或者不設置;（是子元素撐開父元素的高度）
?
2)元素高度自適應窗口高度
設置方法：html,body{height:100%;}
注：如果設置子元素的高度跟隨父元素的高度變化而變化，那么父元素必須有高度。

最小高度的自適應

min-height屬性：最小高度；(IE6瀏覽器不識別該屬性) ?

hack1:min-height:value;_height:value; ?

hack2:min-height:value; height:auto!important;height:value;

浮動元素父元素高度自適應（高度塌陷）

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

高度塌陷的解決方法

hack1：給父元素添加聲明overflow:hidden;(觸發一個BFC)

hack2: 在浮動元素下方添加空div,并給該元素添加聲明：div{clear:both; height:0; overflow:hidden;}

hack3:萬能清除浮動法

選擇符:after {
	content: "";
	clear: both;
	display: block;
	height: 0;
	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:定義對象內第一行的樣式。
*(該偽元素只能用于塊級元素。)