資訊專欄INFORMATION COLUMN
摘要：個人的面試踩坑之旅，充滿誠意的干貨一今日頭條用實現一個自適應的正方形詳細參考方法單位優點簡潔方便缺點瀏覽器兼容不好方案設置垂直方向的撐開容器按照規定，的百分比數值是相對父元素寬度的寬度計算的。行框的寬度是由包含塊和存在的浮動來決定。
個人的面試踩坑之旅，充滿誠意的干貨~
一：今日頭條1.用css實現一個自適應的正方形
詳細參考：https://idiotwu.me/css-respon...
方法1：CSS3 vw 單位
.placeholder {
width: 100%;
height: 100vw;
}
優點：簡潔方便
缺點：瀏覽器兼容不好
方案2：設置垂直方向的 padding 撐開容器
按照規定，margin, padding 的百分比數值是相對 父元素寬度 的寬度計算的。
.placeholder {
width: 100%;
padding-bottom: 100%;
}
為了防止內容撐開容器，設置容器的高度為0
.placeholder {
height: 0;
}
方法3：利用偽元素的 margin(padding)-top 撐開容器
.placeholder {
width: 100%;
overflow:hidden;
}
.placeholder:after {
content: "";
display: block;
margin-top: 100%; /* margin 百分比相對父元素寬度計算 */
}
2.什么是替換元素和非替換元素？img屬于哪一種？
詳細參考：https://segmentfault.com/a/11...
（1）可替換元素：
可替換元素就是瀏覽器根據元素的標簽和屬性，來決定元素的具體顯示內容。
例如瀏覽器會根據標簽的src屬性的值來讀取圖片信息并顯示出來，而如果查看(x)html代碼，則看不到圖片的實際內容；又例如根據標簽的type屬性來決定是顯示輸入框，還是單選按鈕等。
(x)html中的、、