css
文章平均质量分 60
352328759
精通各类电子设备的开启和关闭功能
展开
-
css object-fit, object-position img 标签适应宽高
在弹性布局泛滥成灾的今天, "未知比例图片, 适应未知比例盒子"的需求已经屡见不鲜常用的方法常用的方法是用 css 的背景图div { width: 500px; height: 600px; background-image: url(cat.jpg); background-size: cover; background-position: 50% 50%;}background-size: cover; 让图片大小自适应background-position: 50% 5原创 2021-10-27 16:38:15 · 386 阅读 · 0 评论 -
css :nth-child(an + b) 的坑
css 的 nth-child 已经不是什么新概念了作用就是匹配其父元素的"某个"子元素注: 第一个子元素的序号为 1其实它还可以匹配"某些"子元素, 如::nth-child(odd) { /* 序号为奇数的子元素 */ }:nth-child(even) { /* 序号为偶数的子元素 */ }再拓展一下, 可以控制周长和偏移, 如:p:nth-child(an + b){...}使用公式 (an + b)。描述:a 表示周期的长度,n 是计数器(从 0 开始),b 是偏移值。注原创 2021-10-21 17:26:37 · 224 阅读 · 0 评论 -
魔方4格滚动加载动画
啥也不说 先上效果图完整代码<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-sca原创 2021-10-09 17:41:16 · 234 阅读 · 1 评论 -
css 自定义属性
css 中使用自定义属性必须通过 --x 的格式申明用 var(x) 调用:root{} 下是全局声明块下是局域/* -- 是不能少的 */:root { --swq: red;}h1 { color: var(--swq);}js 中使用css 的自定义属性可以通过 js 的 setProperty 控制要注意自定义属性名仍然要以 “–” 开头// 无效document.documentElement.style.setProperty("defg", "3px"原创 2021-04-19 16:44:32 · 213 阅读 · 2 评论 -
css text-stroke 文字描边
text-stroke 不是标准的 css 属性, 所以本篇读者可以视为娱乐text-stroke 是复合属性, 包括 text-stroke-width, text-stroke-color因为不是标准属性, 大多数情况要加上前缀text-stroke-width 指描边的宽度, 该属性的描边风格是居住描边(内边, 外边各占一半), 且只有居中描边一种结合 absolute 定位, 用未描边的内容, 遮盖已描边的内容, 可以实现只描外边的效果demo<!DOCTYPE html>原创 2020-12-22 16:06:57 · 3302 阅读 · 0 评论 -
css 利用 position + margin 实现固定盒子横向纵向居中
margin:auto; + position: absolute; 上下左右:0一看 demo 就懂的啦<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <meta name="viewport" content="initial-scal原创 2020-12-22 10:02:31 · 744 阅读 · 0 评论 -
css 利用 position + transform 实现弹性盒子横向纵向居中
前端常有"横竖居中"的需求, 固定宽高的还好办遇到宽高不确定的情况, 我向大家推荐下面这个方法原理其实就两点position: absolute; 的百分百参照父元素transform: translate(-50%, -50%); 的百分百参照当前元素position 和 transform 合起来的效果就是把父元素和当前元素的中点对齐, 从而达到居中的效果demo<html><head> <meta http-equiv="Content-Type"原创 2020-12-18 17:18:40 · 1456 阅读 · 1 评论 -
css 控制图片的横竖比例
大概你也遇到过"图片高度是宽度50%"这的需求这需求看起来简单, 其实却非常麻烦因为元素的宽高的百分比是相对于父元素的宽高计算的所以直接设 width, height 是不符合预期的.div { width: 100%; height: 50%;}而且一个空 display: block 元素 height 的默认值是 0px; 如果父元素没设 height 的话, 该元素的 height 就是 0px如果是位置比较浅的元素, 其实可以用 css3 的新单位 vw, vh 来实现.i原创 2020-12-12 14:33:53 · 2739 阅读 · 0 评论 -
css content 与 HTML, JavaScript 的联动
HTML, CSS, JavaScript 三方相互分离, 各司其职这是前端开发的初学者都知道基本原则尤其是 CSS, 虽然和 JavaScript, 都是围着 HTML 转, 但两者间是鲜有来往而 CSS 和 HTML 的关系是 CSS 修饰 HTML, 几乎都是 CSS 单方面指挥 HTML整体来讲, CSS 是个"独立的孩子"但凡事都有例外, 在很个别的情况下, CSS 还是要受到 HTML 的控制比如伪类的 content 属性很多初学者只知道伪类的 content 可以设成字符原创 2020-12-03 16:05:32 · 1884 阅读 · 0 评论 -
css 文本若干行溢出隐藏
溢出隐藏在前端开发里是给常见的效果, 不过以前的 css 只能实现1行的文本溢出隐藏webkit 有个非正式的样式 -webkit-line-clamp, 可以设置若干行的文本溢出隐藏虽然是非正式样式, 但在移动端基本都能兼容-webkit-line-clamp 的使用需要与其它样式合作, 详见下 demo<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text原创 2020-11-30 00:50:03 · 1952 阅读 · 1 评论 -
css特效 - 滚动视差
记一个很简单的css特效——滚动视差对应的图片请自行补充<html><head> <title></title> <style type="text/css"> html, body { height: 100%; width: 100%; margin: 0; padding: 0; } .imgBox { display: block; height: 100%; widt原创 2020-10-16 14:26:01 · 2101 阅读 · 1 评论 -
css position: sticky粘性定位
最近认识到position: sticky;这个比较新的css属性.功能就如字面意思定位: 粘性;用这个新属性做 固定顶部 的功能,简直是湿湿碎作为新属性,简单介绍下它的特性:只对最近一个的滚动环境有效没有滚动环境最后会冒泡到视图窗口,与其它position类似与最近一个的滚动环境之间可以有其它中间节点在中间节点里,定位也能有效,但受中间节点影响,影响规律不明定位是相对于最近的滚...原创 2020-03-06 11:48:11 · 1950 阅读 · 0 评论 -
随滚动条出现,向左推挤,导致居中布局内容闪烁的修复方法
也不是什么高深的技术,写下来备忘用的.wrap-outer { margin-left: calc(100vw - 100%);}原创 2020-02-27 13:53:12 · 2575 阅读 · 5 评论 -
pointer-events css点击穿透
pointer-eventsauto(默认)none(点击无效)ps:对于<svg>有更多的可选值,这里不深入.class { pointer-events: none}end原创 2019-08-24 11:06:34 · 2198 阅读 · 0 评论