CSS
文章平均质量分 69
CSS 的魅力
cookcyq
Thinking | Freedom | Opinions are my own.
展开
-
CSS & 实现让最后一排元素向左对齐并且整体要居中的几种方式
关于 grid 布局的更多用法可参考文档,这里我们只要了解 grid-tempelate-columns(设定列宽)、 gap(每个组件的外边距) 即可。整体不居中的其实是”容器宽度“与每排组件的宽度总和没有形成等量关系导致的,我们可以给容器设定。然而这种方案的缺陷是,若产品要求每排组件数量从 4个 改为 8 个时,我们又得重新计算。来完成,但带来的问题就是上述所说的,最后一排组件不会向左居中。以下所指的”组件“ = ”子元素“,”容器“ = ”父元素“。本文就到这里,若有更好的方案欢迎指出。原创 2023-09-09 23:46:00 · 974 阅读 · 2 评论 -
CSS & 滚动容器与固定 Tabbar 自适应的几种方式
其实,header 不用 fixied 也能达到吸顶效果,其原理是,给容器定高 + overflow 实现自己的滚动容器,但如果使用了错误的单位,比如本文一开始说的。这类动态计算 px 的单位在 IE9 前是不支持的,这里可以考虑借助 JS 提供的 getBoundingClientRect 函数来实现。即保留了原生滚动(不用设置 overflow),也实现了自适应,解决了底部留白的问题。而导致的,下面我将会介绍如何使用其它方案来解决。本文就到这里,若有问题或其它更好的方案欢迎指出。原创 2023-08-29 22:42:18 · 401 阅读 · 0 评论 -
JS & CSS 关于 Shadow dom 的用法
你是否好奇过,浏览器自带的元素的样式是如何实现的,例如videoinput,又或者在某些网站中看到一些非浏览器自带且没见过的元素?如果你打开 F12 查看定位该元素的信息,你会发现啥都没看到!其实它只是默认情况下被设置隐藏了,这里可以打开控制面板,按住 F1,将勾选即可:这便是 Shadow DOM 技术,如果你看到了一些非原生标签,它也是用到了 Shadown DOM ,下面我将简单介绍它的用法。原创 2023-05-26 09:34:31 · 1243 阅读 · 0 评论 -
CSS & JS 关于设置 overflow: auto; 元素无法监听滚动问题
是否是 height:100% 搞的鬼<!DOCTYPE html><html><head> <title>Test</title> <style type="text/css"> #box{ height: 100%; overflow: auto; } h1{ height: 100px; } </style></head><body><d原创 2022-03-02 21:37:09 · 1148 阅读 · 0 评论 -
css 总结日常工作用到的选择器
css 选择器是日常工作中必须要掌握的一部分,事实上只要能灵活运用它,是可以节省许多 JS 的,这点我深有体会,关于 css 选择器怎么使用官方已经足够详细了,而且掌握选择器不是一天两天的事,需要自己不断积累运用,这里不在阐述,下面是笔者整理日常工作中长用到的选择器列表供给新手看,以免学习太多比较偏僻的选择器。选择器标签选择器:尽量少用,因为 css 的计算从右往左,而标签又是全局性的,性能略差div / span / a / nav / haeder / main / footer / form原创 2021-12-13 08:04:28 · 521 阅读 · 0 评论 -
css 块元素/内联元素的 padding / margin / border / outline 排版规则
padding / margin / border / outline 是 css 日常工作中经常用到的几个属性,而在 html 标签中有两种元素类型:块元素(占用一行)自动换行 / 内联元素(占用内容)不换行比如 div 就是块元素、 span 就是内联元素。那么对于这两种元素类型设置这些属性后会有什么变化呢?其实我们只需事先记住:内联元素设置的只会影响内联元素、块元素设置的只会影响块元素,然后再结合下面的案例,相信你很快就可以明白是什么意思。padding块元素:包含元素尺寸、仅影响所有块原创 2021-12-12 10:19:41 · 435 阅读 · 0 评论 -
css 总结日常工作用到的 px / % / rem / em / vh / vw 尺寸单位
css 关于尺寸单位 px / rem / em / vh / vw原创 2021-12-12 07:29:10 · 438 阅读 · 0 评论 -
css var() 变量的用法、作用
css var 变量的用法、好处原创 2021-12-11 22:08:39 · 1211 阅读 · 0 评论 -
css 几行代码实现 <>箭头、三角形▲
css 几行代码就能实现上下左右箭头 > < …原创 2021-12-11 14:27:37 · 1143 阅读 · 0 评论 -
css :before / :after 伪类选择器的真正作用及使用场景
css :before / :after 伪类选择器的真正作用及使用场景原创 2021-12-10 21:28:17 · 5288 阅读 · 8 评论