随笔分类 - (新) CSS
摘要：前言 ul > li 经常会用到, 它原本的 style 很丑, 这篇介绍如果修改它. 以前学 W3Schools 的时候也有记入过: HTML – W3Schools 学习笔记 参考: Youtube – HTML & CSS for Beginners Part 17: How to Creat
阅读全文
摘要：前言 续上一篇介绍了各种语言的阅读方向. 这一篇来讲一下 Logical Properties. 它与 left to right, right to left, horizontal, vertical 息息相关. 参考: Youtube – Write better CSS using logi
阅读全文
摘要：前言 世界上有很多语言的阅读方向是不同的. 英文 中文 (以前才有竖排文字, 现在中文和英语一样了) 阿拉伯文 (Arabic) 面对不同的语言, HTML 和 CSS 就需要不同的写法. 虽然我没有做过类似的项目, 但是知识还是要有的, 正所谓 "没吃过猪肉，也见过猪跑" 嘛. 参考: HTML
阅读全文
摘要：前言 CSS 很早就有 build-in 方案 for 省略号 ellipsis 了. 但是只能 one line, 遇到多行的时候只能用 JS. 后来出了 line-clamp 终于把 multiple line ellipsis 解决了. 参考: stackoverflow – Limit te
阅读全文
摘要：前言 要让一个元素 "消失"，有 4 种做法。它们有一点点的不同，在实战时要清楚什么时候用什么哦。 例子说明 <div class="abc"> <div class="xyz"></div> </div> CSS Style .abc { border: 1px solid red; width:
阅读全文
摘要：参考: stackoverflow – Is there a CSS-only (pure CSS) workaround to apply fade-in and fade-out on objects with display:none? 思路和难点 最简单的思路就是 opacity 0 到 1
阅读全文
摘要：参考: Youtube – CSS Variables - CSS vs Sass - variables inside media queries Why we prefer CSS Custom Properties to SASS variables 与 Sass Variables 的区别
阅读全文
摘要：前言 之前写的 W3Schools 学习笔记 (3) – CSS 2D Transforms. 这篇作为整理. 参考: Youtube – Learn CSS Transform In 15 Minutes Demo Structure <div class="frame"></div> <div
阅读全文
摘要：前言 之前写过一些: W3Schools 学习笔记 (2) – CSS Image Sprites W3Schools 学习笔记 (3) – CSS Styling Images & CSS Multiple Backgrounds 这篇作为整理. Styling img default behav
阅读全文
摘要：前言 之前的文章 CSS – W3Schools 学习笔记 (3), 这篇独立出来写, 作为整理. 参考: Youtube – Advanced CSS Border-Radius Tutorial W3C – Rounded Corners 正文 以长方形作为例子比较容易理解. normal us
阅读全文
摘要：参考: Youtube – Chrome 88 adds aspect-ratio and 2 awesome new devtool features! MDN – aspect-ratio W3Schools – How TO - Aspect Ratio W3C – Aspect Ratios
阅读全文
摘要：参考: 掘金 – 如何更愉快地使用em —— 别说你懂CSS相对单位 绝对值 vs 相对值 px, cm, mm 这些是绝对值. rem, em 是相对值. 绝对值就是最终的尺寸. 相对值的意思是它不是最终值, 它依赖另一个变量去决定最终值. 比如 font-size: 16px 那么最终值就是 1
阅读全文
摘要：什么是 vw, vh? vh 的 v 指的是 viewport, h 就是 height. 它是 CSS 值的单位就像 px, %. .container { height: 30vh; background-color: red; } 那么 30vh 是多高呢? 30% of viewport h
阅读全文
摘要：前言 许多 element tag 都有自带的 style. 比如 h1 默认 font-size 是 2 em anchor 默认颜色是 blue 大部分默认 style 并不会是开发人员期望的效果. 所以就有了 reset css 的概念. 而开发人员期望的效果就诞生了 base css. 简单
阅读全文
摘要：前言 BEM 是一种 CSS class 命名规范. 目的是防止大家名字取太短, 不小撞名字后果很麻烦. 参考: Youtube – You Probably Need BEM CSS in Your Life (Tutorial) Battling BEM CSS: 10 Common Probl
阅读全文
摘要：<img> extra 4px at the bottom 参考: Extra 4px at the bottom of html <img> The mysterious 4px gap in between images 效果 红色部分多出来的 4px. 原因是 img 是 inline ele
阅读全文
摘要：前言 定位是 CSS 里蛮重要的一课. 图片黑影 (overlay), back to top button, header, footer 紧贴在屏幕上下方等效果都是靠 position 完成的. 参考: Youtube – #CSS 認識 Position 粤语 阮一峰 – CSS 定位详解 S
阅读全文
摘要：介绍 它们类似 calc(). 用来通过 formula 输出一个值. 用于 font-size, width, height 之类的, 这些地方. 非常适合用来做 RWD 哦 (特别是 font-size). 参考: CSS中 min() max() clamp()函数及使用场景详解 Kevin
阅读全文
摘要：前言 之前就有写过关于 Retina 和 Responsive Image 响应式图片 (responsive image) Retina 显示屏 但写的太烂了, 所以有了后来的 屏幕, 打印, 分辨率, 物理像素, 逻辑像素, Retina, DPI, PPI 是什么? 和这一篇. 参考: 阮一峰
阅读全文
摘要：前言 Media Query 是用来做 RWD 的, 类似 JS 的 if else. 写的多有伤管理, 所以要谨慎使用哦. 参考: Learn CSS Media Query In 7 Minutes https://css-tricks.com/logic-in-css-media-querie
阅读全文
浙公网安备 33010602011771号