文章分类 -  CSS

吸顶效果最优实现
摘要：offsetTop 用于获得当前元素到定位父级（ element.offsetParent ）顶部的距离（偏移值）。 定位父级 offsetParent 的定义是：与当前元素最近的 position != static 的父级元素。 或许写这个代码的人没有注意到“定位父级”这个这个附属条件。 后来在 阅读全文
posted @ 2020-04-28 10:24 还记得你的呢喃 阅读(1125) 评论(0) 推荐(0)
基于vw等viewport视区单位配合rem响应式排版和布局
摘要：如果要实现这种弹性自适应效果，目前主流的实现是通过设定根元素的font-size大小，具体元素或模块使用rem或em单位来实现。 一种是直接设定一个临界点字体大小，如： 还有一种就是使用JS在resize或者屏幕旋转的时候，动态修改root的font-size大小。 例如，我们希望浏览器宽度在600 阅读全文
posted @ 2019-08-20 16:12 还记得你的呢喃 阅读(126) 评论(0) 推荐(0)
css实现的下划线跟随
摘要：先上张图，如何使用纯 CSS 制作如下效果？ 在继续阅读下文之前，你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下，不借助 JS ，能否巧妙的实现上述效果。 OK，继续。这个效果是我在业务开发的过程中遇到的一个类似的小问题。其实即便让我借助 Javascript ，我的第一反应也是，感觉很麻烦 阅读全文
posted @ 2018-08-07 10:42 还记得你的呢喃 阅读(224) 评论(0) 推荐(0)
垂直居中的几种实现方式
摘要：1、vertical-align: middle 2、position 3、margin + transform 4、改变父元素排版书序（父元素添加 .vertical-mode类名） 阅读全文
posted @ 2018-07-11 10:01 还记得你的呢喃 阅读(164) 评论(0) 推荐(0)
overflow:hidden时border-radius无效的问题
摘要：如果一个父元素设置了overflow:hidden属于的同时还设置了border-radius属性，那么如果想隐藏超出的子元素，四个圆角处会出现超出圆角依然显示的bug； 一种方法是运用-webkit-mask-image通过遮罩来实现，先不谈该方法兼容性的问题，对于复杂形状的图形该方法是很好用的， 阅读全文
posted @ 2018-06-06 10:25 还记得你的呢喃 阅读(1139) 评论(0) 推荐(0)
chrome浏览器autofill的黄色背景去除
摘要：方法1：阴影覆盖input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px white inset !important;}注：由于是设置颜色覆盖，所以只对非透明的纯色背景有效； 方法2：修改chrome浏览器渲染黄色背景的时间（推荐）:-we 阅读全文
posted @ 2018-02-27 09:45 还记得你的呢喃 阅读(276) 评论(0) 推荐(0)
CSS小技巧
摘要：1、inline-block元素之间的空白 : 父集font-size设为0、inline-block元素不换行 2、如何在宽高不等的div内，制作一个宽高相等的且都为百分比的div？ height: 0; // 此处的padding-top值等于width： 100% 。 pdding-top: 阅读全文
posted @ 2017-04-27 17:14 还记得你的呢喃 阅读(94) 评论(0) 推荐(0)
CSS秘密花园： 流体背景，固定内容
摘要：在过去的几年中，有种网页设计趋热是越来越受欢迎：这就是我所说的“自适应的背景，固定宽度的内容”。这种模型常用于以下几种场景中： 有多个内容部分<section>,每个内容都占据整个视窗宽度而且都有不同的背景。 固定宽度的内容，即使宽度会根据不同的媒体查询修改。在某些情况之下，不同的区域<sectio 阅读全文
posted @ 2017-04-17 09:21 还记得你的呢喃 阅读(236) 评论(0) 推荐(0)
CSS秘密花园之 hover状态下的鼠标移出动画暂停而不是初始化
摘要：假设我们一个很长的景观照片，如下图所示： 但我们要显示的空间只有150px X 150px的正方形。解决这个问题的一个方法就需要使用动画：默认显示图像的从图像的左边缘开始，当用户有交互行为时，图片慢慢向左滚动(例如，鼠标悬浮在图片上时)。我们使用单个元素，并且给他设置一个背景图片，通过动画修改bac 阅读全文
posted @ 2017-04-14 09:11 还记得你的呢喃 阅读(1342) 评论(0) 推荐(0)
CSS秘密花园： 垂直居中
摘要：问题 44年前我们把人送上月球，但在CSS中我们仍然不能很好实现垂直居中——@James Anderson 让一个元素水平居中对于CSS来说非常简单：如果是一个内联元素，我们可以在他的父元素上设置text-align:center;；如果是一个块元素，我们可以使用margin:auto;。然而，只要 阅读全文
posted @ 2017-04-10 16:09 还记得你的呢喃 阅读(225) 评论(0) 推荐(0)