css实用小技巧 您所在的位置:网站首页 小章鱼最右 css实用小技巧

css实用小技巧

2023-06-29 00:48| 来源: 网络整理| 查看: 265

工作以来,css很难说系统的去学习,只要能还原就可以了。但是你会这个小技巧,那真的会让人惊呼,甚至效率提升不少。

神奇的margin

一开始,我真不知道margin可以这么玩,后面被同事秀了下,发现原来还可以这么玩。

说实话,之前以为margin就是调盒子与盒子之间的边距,没太过多去使用这个神奇的auto值,我感觉也没有很多人注意到。 但注意,这个的前提是你要设置display:flex,这样才可以生效。

使用场景

比如说,左边有个图片,最右边是这个图片的名称或者描述,那我们怎么实现这样的效果? 第一反应应该都是绝对定位的方式让最右边的盒子定位到相对父元素的最右边,但我们可以margin-left:auto,这样就可以让浏览器自动分布左边的空白空间,这样就实现无论怎么样都是最右边显示,这就和水平居中的效果一样。

注意事项

那么是要浏览器自动分布剩余空间,那么就肯定是要非标准布局,我觉得最好就是display:flex。

如有不对之处,烦请指正。也希望这个能帮助到有需要的人。



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有