如何理解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
  • <meta name="viewport" content="width=device-width">

参考


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.

  • 参考: orientation - CSS: Cascading Style Sheets | MDN


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)
  • 概念
    1. 一个独立的渲染区域,只有Block-level box参与
    2. 规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。
  • 规则
    1. 内部的Box会在垂直方向,一个接一个地放置
    2. BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
  • 产生
    1. overflow的值不为visible。(这个是最推荐开启bfc的,副作用最小)
    2. position的值不为relative和static。
    3. display的值为table-cell, table-caption, inline-block中的任何一个。
  • 使用场景
    1. 自适应两栏布局
    2. 清除内部浮动
    3. 防止margin重叠
    4. 实现更健壮、更智能的自适应布局。

IFC

  • 内联格式化上下文(inline formatting context)

参考


盒模型

四部分组成

  1. 元素内容(content):
  2. 内边距(padding)
  3. 边框(border)
  4. 外边距(margin)

分类

  1. W3C 标准盒子模型: width/height 只是内容高度
  2. IE 怪异盒子模型: width/height 包含了 padding和 border

box-sizing

  • 语法: box-sizing: content-box|border-box|inherit:

CSS中可以和不可以继承的属性


优先级

选择器

  • id选择器: #id{}
  • 类选择器: .class{}
  • 属性选择器: a[href="ds63.eu.org"]{}
  • 伪类选择器: ::before{}
  • 标签选择器: span{}
  • 通配选择器: *{}

规则

  1. 最近的祖先样式比其他祖先样式优先级高
  2. “直接样式"比"祖先样式"优先级高
  3. 优先级顺序: 内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
  4. 计算选择符中 ID 选择器的个数(a),计算选择符中类选择器、属性选择器以及伪类选择器的个数之和(b),计算选择符中标签选择器和伪元素选择器的个数之和(c)。按 a、b、c 的顺序依次比较大小,大的则优先级高,相等则比较下一个。若最后两个的选择符中 a、b、c 都相等,则按照"就近原则"来判断。
  5. 属性后插有!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
    1. :link
    2. :visited
    3. :hover
    4. :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
      • 属性:
        • url
        • counter
        • attr(X): 将元素的 X 属性以字符串形式返回。如果该元素没有 X 属性,则返回一个空字符串
      • 示例
        • content: url(http://www.mozilla.org/favicon.ico) " MOZILLA: ";
        • content: " (" attr(id) ")"; 这里的id即该元素的id
  • ::first-letter
  • ::first-line
  • ::selection: 选择用户选择的元素部分。

参考


letter-spacing

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

媒体查询


预处理器

  • LESS
  • SCSS
  • PostCSS

less/sass解决了什么问题

wip

css in js 与 less sass预处理器的好处

wip


现代化 CSS 开发流程


TailwindCSS

  • 工作原理:扫描所有文件的类名,生成相应的样式,然后将它们写入静态 CSS 文件。
  • JIT 引擎(Just-In-Time):在编译过程才去扫描html 文件,在这个过程中去识别使用了哪些类名,然后才生成对应的样式
  • 缺点:
    1. 每个标签的 class 都很长,语义化的可读性;
    2. 如果全都使用原子类来构建页面,则维护起来是很麻烦的
    3. 选择器嵌套、后代选择器等 css 的特点看起来也是不太好用上了
  • 优点:
    1. 通过自定义原子类,能约定好设计规范,规范好标题字号、颜色,这个盒子内边距、外边距之类的属性
    2. 通过@apply可以将一堆原子类合并到一个独立的类名中,就能结合原子类的样式复用和语义化类名容易维护的优点,由此一定程度上解决缺点1
    3. 针对维护麻烦的问题,可以将常用组件进行封装, 由此一定程度上解决缺点2
  • 缺点:
    1. 每个标签的 class 都很长,语义化的可读性;
    2. 如果全都使用原子类来构建页面,则维护起来是很麻烦的
    3. 选择器嵌套、后代选择器等 css 的特点看起来也是不太好用上了
  • 参考

scroll-timeline

scroll-timeline - CSS: Cascading Style Sheets | MDN


问答题

显示小于12px文字

  1. 使用transform: scale()
.small-text {
    font-size: 10px;
    transform: scale(1);
    transform-origin: left top;
}
  1. 使用-webkit-text-size-adjust
.small-text {
    -webkit-text-size-adjust: none;
    font-size: 10px;
}
  1. 使用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>

如何实现水平垂直居中

  1. Flexbox 适用于块级容器中的元素垂直居中。
.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100vh; /* 确保容器有高度 */
}
  1. Grid Layout
.container {
  display: grid;
  place-items: center; /* 同时垂直和水平居中 */
  height: 100vh;
}
  1. 使用line-height(适用于单行文本) 如果只是文本,使用line-heightheight相等可以达到垂直居中效果。
.container {
  height: 200px;
  line-height: 200px; /* 与容器高度相同 */
  text-align: center; /* 水平居中 */
}
  1. 绝对定位 + 负边距 适用于已知元素宽高的情况下:
.container {
  position: relative;
  height: 100vh;
}
.element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 通过transform偏移居中 */
}
  1. table布局 适用于需要兼容旧版浏览器的场景:
.container {
  display: table;
  height: 100vh;
  width: 100%;
}
.element {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
  1. CSS Variables(动态适应不同的场景) 可以结合Flexbox和Grid等方式,动态控制居中的方法。
:root {
  --container-height: 100vh;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: var(--container-height);
}

脱离文档流

  • 含义:
    • 元素脱离文档流之后,将不再在文档流中占据空间,而是处于浮动状态(可以理解为漂浮在文档流的上方)。脱离文档流的元素的定位基于正常的文档流,当一个元素脱离文档流后,依然在文档流中的其他元素将忽略该元素并填补其原先的空间。
  • 方法
    1. float
    2. absolute
    3. fixed
  • 参考: 【css】脱离文档流的三种方法 - 十八力丁 - 博客园

如何实现响应式

  1. 减少使用绝对单位,而是使用相对单位
  2. 媒体查询
  3. 响应式图片 - 学习 Web 开发 | MDN
  4. 响应式设计 - 学习 Web 开发 | MDN

如何实现固定宽高比

实现三栏布局

wip

写个css,当文本没有超过容器宽度时居中显示,超过宽度则换行,并左对齐(display:tabel-cell或者width:fit-content,但是忘了)

wip

用css实现一个模态窗口,要从窗口下面向上弹的动画

wip

如何保证让contextmenu出现在可视区域,如何打开自己的contextmenu

wip


参考