摘要:个人的面试踩坑之旅,充满诚意的干货一今日头条用实现一个自适应的正方形详细参考方法单位优点简洁方便缺点浏览器兼容不好方案设置垂直方向的撑开容器按照规定,的百分比数值是相对父元素宽度的宽度计算的。行框的宽度是由包含块和存在的浮动来决定。
个人的面试踩坑之旅,充满诚意的干货~
一:今日头条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中的、、
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/82822.html
一直在网站上学习别人的测试之路,现在也想分享一下自己的经历。 结缘测试 和大家不同的地方在于,作为一名生物医学工程专业毕业生,我都是在医疗行业打转。 我的软件测试之旅分为两段,第一段是一份实习,从2019年9月到2020年1月,第二段是毕业后的第一份工作,从2020年4月到今天。 实习之路 虽然从时间上来看,我的软件测试之旅接近两年,尤其是第一份实习,虽然时间跨度有四个月,但因为当时学校导师给的压...
摘要:是的架构的实现。是在年提出的一种前端架构,主要用来处理复杂的逻辑的一致性问题当时是为了解决页面的消息通知问题。 去年10月底来到了新公司,刚开始接手 Android 项目时,发现该项目真的是一团遭,项目开发上没有任何架构可言,开发人员连简单的 MVC、MVP 都不了解,Activity 及其臃肿,业务边界也不明确,因此我决定重新分析一下当前主流的几种开发架构,选出适合当前项目的架构形式...
阅读 864·2021-11-15 11:38
阅读 1570·2021-09-24 09:48
阅读 799·2021-09-24 09:47
阅读 2248·2021-08-26 14:15
阅读 3478·2019-08-30 11:09
阅读 2578·2019-08-29 16:55
阅读 1566·2019-08-26 14:01
阅读 2978·2019-08-23 16:47