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