如何理解css
I like to think of CSS as a collection of layout modes. Each layout mode is an algorithm that can implement or redefine each CSS property. We provide an algorithm with our CSS declarations (key/value pairs), and the algorithm decides how to use them.
In other words, the CSS we write is an input for these algorithms, like arguments passed to a function. If we want to truly feel comfortable with CSS, it’s not enough to learn the properties; we have to learn how the algorithms use these properties.
参考An Interactive Guide to Flexbox in CSS
常见的css布局单位
px: 绝对单位
em: 相对单位
- font-size：相对于父元素字体
- width: 相对于当前元素字体
rem(root em): 相对单位
- 相对于根元素，也就是
html
- 相对于根元素，也就是
viewport
wip
orientation
portrait: The viewport is in a portrait orientation, i.e., the height is greater than or equal to the width.
landscape: The viewport is in a landscape orientation, i.e., the width is greater than the height.
Visibility
- visible
- hidden
- collapse: 只对 table 对象起作用，能移除行或列但不会影响表格的布局。如果这个值用在 table 以外的对象上则表现为 hidden
- inherit
Display
分类
- none: 元素不可见，并且不为其保留相应的位置
- block: 表现为一个块级元素（一般情况下独占一行）
<div>、 <h1>、<p> - inline: 表现为一个行级元素（一般情况下不独占一行）
<a>、<img>、<span> - inline-block: 结合了行內元素和塊級元素的特點，會像 inline 元素一樣的同行排列，但同時擁有 block 元素可以設定寬高的特性。
visibility:hidden vs display:none vs opacity:0
visibility: hidden;: 隐藏元素，但是它仍然占用布局中的空间。如果隐藏框的子元素的可见性设置为“可见”，则它们将是可见的。display: none;: 关闭显示并从文档中完全删除该元素。即使它的HTML仍在源代码中，它也不占用任何空间。即使所有子元素的显示属性均设置为none，也将关闭其显示。- 具有
opacity: 0的元素是可以互动的，因为它们实际上是可见的，只是非常透明。opacity 属性并不指定一个元素的可见性——它只指定透明度 - 参考: CSS display:none 和 visibility:hidden 的区别
BFC v.s IFC
BFC
- 块级格式上下文 (Block Formatting Context)
- 概念
- 一个独立的渲染区域，只有Block-level box参与
- 规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
- 规则
- 内部的Box会在垂直方向，一个接一个地放置
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
- 产生
- overflow的值不为visible。(这个是最推荐开启bfc的,副作用最小)
- position的值不为relative和static。
- display的值为table-cell, table-caption, inline-block中的任何一个。
- 使用场景
- 自适应两栏布局
- 清除内部浮动
- 防止margin重叠
- 实现更健壮、更智能的自适应布局。
IFC
- 内联格式化上下文（inline formatting context）
参考
盒模型
四部分组成
- 元素内容（content）：
- 内边距（padding）
- 边框（border）
- 外边距（margin）
分类
- W3C 标准盒子模型: width/height 只是内容高度
- IE 怪异盒子模型: width/height 包含了 padding和 border
box-sizing
- 语法:
box-sizing: content-box|border-box|inherit:
CSS中可以和不可以继承的属性
- 具体参见CSS中可以和不可以继承的属性 - KerwinLee - 博客园
- 基本原则:
- 文本属性和字体属性通常是可以继承的: font-size, font-weight, line-height, color, cursor,letter-spacing等
- 涉及到盒模型属性，布局属性(例如，display, position)，背景属性普遍是不能继承: display, margin，border，padding，height等
- 需要特别注意的是元素可见性属性(visibility)是可以继承的
- 验证: 开发者工具，选择具体元素并查看元素选项，若为灰色则不可继承
- 参考
优先级
选择器
- id选择器:
#id{} - 类选择器:
.class{} - 属性选择器:
a[href="ds63.eu.org"]{} - 伪类选择器:
::before{} - 标签选择器:
span{} - 通配选择器:
*{}
规则
- 最近的祖先样式比其他祖先样式优先级高
- “直接样式"比"祖先样式"优先级高
- 优先级顺序: 内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
- 计算选择符中 ID 选择器的个数（a），计算选择符中类选择器、属性选择器以及伪类选择器的个数之和（b），计算选择符中标签选择器和伪元素选择器的个数之和（c）。按 a、b、c 的顺序依次比较大小，大的则优先级高，相等则比较下一个。若最后两个的选择符中 a、b、c 都相等，则按照"就近原则"来判断。
- 属性后插有
!important的属性拥有最高优先级。若同时插有 !important，则再利用规则 3、4 判断优先级
参考
position
static
默认值。没有定位，元素出现在正常的流中（忽略top,bottom,left,right,z-index声明）。
absolute
- 生成绝对定位的元素，相对于值不为static的第一个父元素的paddingbox进行定位
- 在父元素没有设置相对定位或绝对定位的情况下，元素相对于根元素定位（即html元素）
- 元素会脱离文档流
fixed
- 生成绝对定位的元素，相对于浏览器窗口进行定位。
relative
- 生成相对定位的元素，相对于其元素本身所在正常位置进行定位。
inherit
- 规定从父元素继承position属性的值。
参考
伪类与伪元素
伪类
:hover:focus:first-child:nth-child(n)- LVHA
:link:visited:hover:active
伪元素
- 用户无法直接选中或复制 CSS 伪元素: 因为伪元素生成的内容并不是真正的 DOM 元素，而是由浏览器在渲染时动态插入的,这也是伪元素为什么叫“伪”元素。
::before,::after- Accessibility: Using a ::before pseudo-element to add content is discouraged, as it is not reliably accessible to screen readers.
content- 属性:
urlcounterattr(X): 将元素的 X 属性以字符串形式返回。如果该元素没有 X 属性，则返回一个空字符串
- 示例
content: url(http://www.mozilla.org/favicon.ico) " MOZILLA: ";content: " (" attr(id) ")";这里的id即该元素的id
- 属性:
::first-letter::first-line::selection: 选择用户选择的元素部分。
参考
- CSS 伪类
- :link - CSS：层叠样式表 | MDN
- CSS 伪元素
- ::before - CSS: Cascading Style Sheets | MDN
- content - CSS：层叠样式表 | MDN
letter-spacing
- 用于设置文本字符的间距表现
- 可继承
- letter-spacing - CSS: Cascading Style Sheets | MDN
GRID
wip
Transforms
- We can use translate to shift an item along in either axis:
- x moves side to side, y moves up and down.
- Positive values move down and to the right. Negative values move up and to the left.
- the item’s in-flow position doesn’t change
calc: 示例：transform: translateX(calc(15% + -8px));- 参考: CSS Transforms tutorial
animation
- 示例:
.cylon_eye { animation: 4s linear 0s infinite alternate move_eye; } @keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; } } - 参考: animation - CSS：层叠样式表 | MDN
媒体查询
- 语法:
@media (min-width: 30em) and (orientation: landscape) { ... } - 使用媒体查询 - CSS：层叠样式表 | MDN
预处理器
- LESS
- SCSS
- PostCSS
less/sass解决了什么问题
wip
css in js 与 less sass预处理器的好处
wip
现代化 CSS 开发流程
- 借助@mixin、@extend等预处理器提供的方法，可以复用 css 代码片段，甚至在 css 中写一些逻辑。
- 借助autoprefixer、px2rem等 postcss 工具，不需要写繁琐的前缀和单位转换。
- 借助css module、css scoped等工具，不用考虑样式冲突，以至于不用过多地考虑命名了。
- 借助BEM命名规范，解决命名难
- 参考
TailwindCSS
- 工作原理：扫描所有文件的类名，生成相应的样式，然后将它们写入静态 CSS 文件。
- JIT 引擎（Just-In-Time）:在编译过程才去扫描html 文件，在这个过程中去识别使用了哪些类名，然后才生成对应的样式
- 缺点:
- 每个标签的 class 都很长，语义化的可读性；
- 如果全都使用原子类来构建页面，则维护起来是很麻烦的
- 选择器嵌套、后代选择器等 css 的特点看起来也是不太好用上了
- 优点:
- 通过自定义原子类，能约定好设计规范,规范好标题字号、颜色，这个盒子内边距、外边距之类的属性
- 通过@apply可以将一堆原子类合并到一个独立的类名中,就能结合原子类的样式复用和语义化类名容易维护的优点,由此一定程度上解决缺点1
- 针对维护麻烦的问题，可以将常用组件进行封装, 由此一定程度上解决缺点2
- 缺点:
- 每个标签的 class 都很长，语义化的可读性；
- 如果全都使用原子类来构建页面，则维护起来是很麻烦的
- 选择器嵌套、后代选择器等 css 的特点看起来也是不太好用上了
- 参考
scroll-timeline
scroll-timeline - CSS: Cascading Style Sheets | MDN
问答题
显示小于12px文字
- 使用transform: scale()
.small-text {
font-size: 10px;
transform: scale(1);
transform-origin: left top;
}
- 使用-webkit-text-size-adjust
.small-text {
-webkit-text-size-adjust: none;
font-size: 10px;
}
- 使用vw单位
.small-text {
font-size: 0.625vw;
}
css画三角形
- 等腰三角形
<style>
.filled-triangle {
width: 0px;
height: 0px;
border-bottom: 50px solid cyan;
border-top: 50px solid transparent;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
</style>
如何实现水平垂直居中
- Flexbox 适用于块级容器中的元素垂直居中。
.container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 100vh; /* 确保容器有高度 */
}
- Grid Layout
.container {
display: grid;
place-items: center; /* 同时垂直和水平居中 */
height: 100vh;
}
- 使用
line-height（适用于单行文本） 如果只是文本，使用line-height与height相等可以达到垂直居中效果。
.container {
height: 200px;
line-height: 200px; /* 与容器高度相同 */
text-align: center; /* 水平居中 */
}
- 绝对定位 + 负边距 适用于已知元素宽高的情况下：
.container {
position: relative;
height: 100vh;
}
.element {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 通过transform偏移居中 */
}
table布局 适用于需要兼容旧版浏览器的场景：
.container {
display: table;
height: 100vh;
width: 100%;
}
.element {
display: table-cell;
vertical-align: middle;
text-align: center;
}
- CSS Variables（动态适应不同的场景） 可以结合Flexbox和Grid等方式，动态控制居中的方法。
:root {
--container-height: 100vh;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: var(--container-height);
}
脱离文档流
- 含义:
- 元素脱离文档流之后，将不再在文档流中占据空间，而是处于浮动状态（可以理解为漂浮在文档流的上方）。脱离文档流的元素的定位基于正常的文档流，当一个元素脱离文档流后，依然在文档流中的其他元素将忽略该元素并填补其原先的空间。
- 方法
- float
- absolute
- fixed
- 参考: 【css】脱离文档流的三种方法 - 十八力丁 - 博客园
如何实现响应式
- 减少使用绝对单位，而是使用相对单位
- 媒体查询
- 响应式图片 - 学习 Web 开发 | MDN
- 响应式设计 - 学习 Web 开发 | MDN
如何实现固定宽高比
实现三栏布局
wip
写个css，当文本没有超过容器宽度时居中显示，超过宽度则换行，并左对齐（display:tabel-cell或者width:fit-content，但是忘了）
wip
用css实现一个模态窗口，要从窗口下面向上弹的动画
wip
如何保证让contextmenu出现在可视区域，如何打开自己的contextmenu
wip