资讯专栏INFORMATION COLUMN

CSS欺骗

Drummor / 868人阅读

摘要:下面就介绍几种情况,仅供参考持续更新位置欺骗图片占位场景从后端拉取一张图片,然后显示在前端,图片宽高各为,或者宽高比为实现在端一般是没问题的,因为固定宽度和高度。

为什么叫这个题目呢?

其实,自己刚开始接触前端的时候,以为界面就是和正常的流式布局一样,这里放一个div,那里放一个div,整个界面就搭建完成了。做过几次项目后,好像自己想的也没错,就按照前面的思路,可以解决大部分的界面搭建。但是有的时候,需要一些特殊的处理,这些特殊的处理,可能会打破你脑袋中的流式布局。
下面就介绍几种情况,仅供参考(持续更新)

1、位置欺骗——图片占位 场景
从后端拉取一张图片,然后显示在前端,图片宽高各为100px,或者宽高比为1:1
实现
//html


//css
img {
    width: 100px;
    height: 100px;
}

在pc端一般是没问题的,因为固定宽度和高度。

但是在移动端,这样的方式就显得不太合理,宽度一般通过设置为百分比,但是高度就没法设置为百分比了,移动端的高度一般是无限拖动的,设置百分比明显是不行的。

为什么移动端要用百分比?请戳           
               
                                           
                       
                 

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/114794.html

相关文章

  • CSS欺骗

    摘要:下面就介绍几种情况,仅供参考持续更新位置欺骗图片占位场景从后端拉取一张图片,然后显示在前端,图片宽高各为,或者宽高比为实现在端一般是没问题的,因为固定宽度和高度。 为什么叫这个题目呢? 其实,自己刚开始接触前端的时候,以为界面就是和正常的流式布局一样,这里放一个div,那里放一个div,整个界面就搭建完成了。做过几次项目后,好像自己想的也没错,就按照前面的思路,可以解决大部分的界面搭建...

    roundstones 评论0 收藏0
  • HTML 文档流,设置元素浮动,导致父元素高度无法自适应的解决方法(高度欺骗

    摘要:元素浮动定义属性定义元素在哪个方向浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。子元素浮动会导致父元素高度塌陷这是因为内部的元素设置后,就丢失了和持怀疑态度的样式,所以外部的父容器不会被撑开。 元素浮动定义 float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何...

    yy736044583 评论0 收藏0
  • HTML 文档流,设置元素浮动,导致父元素高度无法自适应的解决方法(高度欺骗

    摘要:元素浮动定义属性定义元素在哪个方向浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。子元素浮动会导致父元素高度塌陷这是因为内部的元素设置后,就丢失了和持怀疑态度的样式,所以外部的父容器不会被撑开。 元素浮动定义 float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何...

    iflove 评论0 收藏0
  • Linkedin Intro的钓鱼研究

    摘要:年月日,我联系了的安全团队,并会在近期发布修复补丁来解决下面的问题。有关月日,推出一个名为的应用程序。会对你的做些什么为了更好地观察的行为,目前我正对其进行更深入的分析研究,并很快就会发布。钓鱼去啦为达教学目的,我已经建立了一个基本的模板。 2013年10月28日,我联系了Linkedin的安全团队,并会在近期发布修复补丁来解决下面的问题。这个修复程序适用于随机生成ID的styling...

    lykops 评论0 收藏0
  • Linkedin Intro的钓鱼研究

    摘要:年月日,我联系了的安全团队,并会在近期发布修复补丁来解决下面的问题。有关月日,推出一个名为的应用程序。会对你的做些什么为了更好地观察的行为,目前我正对其进行更深入的分析研究,并很快就会发布。钓鱼去啦为达教学目的,我已经建立了一个基本的模板。 2013年10月28日,我联系了Linkedin的安全团队,并会在近期发布修复补丁来解决下面的问题。这个修复程序适用于随机生成ID的styling...

    wenshi11019 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<