摘要：个人的面试踩坑之旅，充满诚意的干货一今日头条用实现一个自适应的正方形详细参考方法单位优点简洁方便缺点浏览器兼容不好方案设置垂直方向的撑开容器按照规定，的百分比数值是相对父元素宽度的宽度计算的。行框的宽度是由包含块和存在的浮动来决定。
个人的面试踩坑之旅，充满诚意的干货~
一：今日头条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中的、、