資訊專欄INFORMATION COLUMN
摘要：個人的面試踩坑之旅，充滿誠意的干貨一今日頭條用實現(xiàn)一個自適應(yīng)的正方形詳細參考方法單位優(yōu)點簡潔方便缺點瀏覽器兼容不好方案設(shè)置垂直方向的撐開容器按照規(guī)定，的百分比數(shù)值是相對父元素寬度的寬度計算的。行框的寬度是由包含塊和存在的浮動來決定。
個人的面試踩坑之旅，充滿誠意的干貨~
一：今日頭條1.用css實現(xiàn)一個自適應(yīng)的正方形
詳細參考：https://idiotwu.me/css-respon...
方法1：CSS3 vw 單位
.placeholder {
width: 100%;
height: 100vw;
}
優(yōu)點：簡潔方便
缺點：瀏覽器兼容不好
方案2：設(shè)置垂直方向的 padding 撐開容器
按照規(guī)定，margin, padding 的百分比數(shù)值是相對 父元素寬度 的寬度計算的。
.placeholder {
width: 100%;
padding-bottom: 100%;
}
為了防止內(nèi)容撐開容器，設(shè)置容器的高度為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）可替換元素：
可替換元素就是瀏覽器根據(jù)元素的標簽和屬性，來決定元素的具體顯示內(nèi)容。
例如瀏覽器會根據(jù)標簽的src屬性的值來讀取圖片信息并顯示出來，而如果查看(x)html代碼，則看不到圖片的實際內(nèi)容；又例如根據(jù)標簽的type屬性來決定是顯示輸入框，還是單選按鈕等。
(x)html中的、、