跳至主要內容

Mr. LRH blogs

知足且上进，温柔而坚定。

CSS 动画

CSS 动画类型

  • transition （过渡动画）
  • keyframe （关键帧动画）
  • steps() （逐帧动画）

过渡动画和关键帧动画的区别：过渡动画需要有状态变化，关键帧动画不需要状态变化，关键帧动画能控制更精细。

transform 变换

transform 属性允许你旋转、缩放、倾斜或平移给定元素。

transform-origin

transform-origin(x, y, z) 设置对象变换的原点，通常和 rotate 旋转、 scale 缩放、 skew 斜切等一起使用。

Mr.LRH2025/4/8CSS基础CSS大约 13 分钟
position

position 属性用于指定一个元素在文档中的定位方式。

  • static ：该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
  • relative ：该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。
  • absolute ：元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。
  • fixed ：元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。fixed 属性会创建新的层叠上下文。当元素祖先的 transform、perspective、filter 或 backdrop-filter 属性非 none 时，容器由视口改为该祖先。
  • sticky ：元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和包含块（最近块级祖先 nearest block-level ancestor），包括 table-related 元素，基于 top、right、bottom 和 left 的值进行偏移。偏移值不会影响任何其他元素的位置。该值总是创建一个新的层叠上下文（stacking context）。
Mr.LRH2025/4/8CSS基础CSS大约 6 分钟
层叠规则与 z-index

层叠上下文

假定用户正面向（浏览器）视窗或网页，而 HTML 元素沿着其相对于用户的一条虚构的 z 轴排开，层叠上下文就是对这些 HTML 元素的一个三维构想。众 HTML 元素基于其元素属性按照优先级顺序占据这个空间。

层叠水平

层叠水平，决定了同一个层叠上下文中元素在 z 轴上的显示顺序。 层叠水平和 CSS 的 z-index 属性不一样：

  • 某些情况下 z-index 确实可以影响层叠水平，但是只限于定位元素以及 flex 盒子的孩子元素。
  • 层叠水平所有的元素都存在。对普通元素的层叠水平探讨只局限在当前层叠上下文元素中。
Mr.LRH2025/4/8CSS基础CSS大约 5 分钟
元素的显隐

操作元素的显隐

  • 元素不可见，同时不占据空间，辅助设备无法访问，同时不渲染，可使用 <script> 标签隐藏。

    <script> 标签是不支持嵌套的，因此，如果希望在 <script> 标签中再放置其他不渲染的模板内容，可以试试使用 <textarea> 元素。

    <script> 标签隐藏内容获取使用 script.innerHTML ，<textarea> 使用 textarea.value。

    <script type="text/html"> 
  <img src="1.jpg"> 
</script>

<script type="text/html">
  <img src="1.jpg"> 
  <textarea style="display:none;"> 
    <img src="2.jpg"> 
  </textarea> 
</script>

  • 元素不可见，同时不占据空间，辅助设备无法访问，但资源有加载，DOM 可访问，可以直接使用 display: none 隐藏。

  • 元素不可见，同时不占据空间，辅助设备无法访问，但显隐的时候可以有 transition 淡入淡出效果，可使用： .hidden { position: absolute; visibility: hidden; }

  • 元素不可见，不能点击，辅助设备无法访问，但占据空间保留，可使用 visibility: hidden 隐藏。

  • 元素不可见，不能点击，不占据空间，但键盘可访问，可使用 clip 剪裁隐藏。

    .clip {
  position: absolute;
  clip: rect(0 0 0 0);
} 

.out {
  position: relative;
  left: -999em;
}

  • 元素不可见，不能点击，但占据空间，且键盘可访问，则可以试试 relative 隐藏。

    /* 如果条件允许，也就是和层叠上下文之间存在设置了背景色的父元素，则也可以使用更友好的z-index 负值隐藏 */
.lower {
  position: relative;
  z-index: -1;
}

  • 元素不可见，但可以点击，而且不占据空间，则可以使用透明度。

    .opacity {
  position: absolute;
  opacity: 0;
  filter: Alpha(opacity=0);
}

  • 元素看不见，但位置保留，依然可以点可以选，则直接让透明度为 0 。

    .opacity {
  opacity: 0;
  filter: Alpha(opacity=0);
}

  • 标签受限的情况下希望隐藏某文字，可能使用 text-indent 缩进。

    .hidden {
  /* 希望显示的时候可以加一个 transition 动画，就可能要使用 max-height 进行隐藏 */
  max-height: 0;
  overflow: hidden;
}
Mr.LRH2025/4/8CSS基础CSS大约 3 分钟
盒模型

当对一个文档进行布局（layout）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）。CSS 决定这些盒子的大小、位置以及属性（例如颜色、背景、边框尺寸等）。

box-sizing 属性定义了 user agent 应该如何计算一个元素的总宽度和总高度。

  • content-box ：默认值，标准盒子模型。

    尺寸计算公式：width = 内容的宽度；height = 内容的高度

    宽度和高度的计算值都不包含内容的边框（border）和内边距（padding）。

  • border-box ： 当文档处于 Quirks 模式 时 Internet Explorer 使用的盒模型。

    尺寸计算公式：width = border + padding + 内容的宽度；height = border + padding + 内容的高度

Mr.LRH2025/4/8CSS基础CSS大约 19 分钟
line-height 与 vertical-align

x-height

x 字高

x 字高： 指字母 x 的高度。即：基线（baseline）和主线（median line）之间的距离。

注：vertical-align: middle 与字母中线（median）不是一个意思，vertical-align: middle 指的是基线（baseline）往上 1/2 x-height 高度。

Mr.LRH2025/4/7CSS基础CSS大约 22 分钟
流与元素

块级元素

常见的块级元素有 <div>、<li> 和 <table> 等。“块级元素” 和 display 为 block 的元素不是一个概念。

“块级元素” 的特征：一个水平流上只能单独显示一个元素，多个块级元素则换行显示。正是由于 “块级元素” 具有换行特性，因此理论上它都可以配合 clear 属性来清除浮动带来的影响。

按照 display 的属性值不同：

Mr.LRH2025/4/7CSS基础CSS大约 11 分钟
CSS Shapes

传统 CSS3 的方式绘制几何图形

CSS 形状函数

circle 圆形

circle(r at cx cy) 定义了一个圆形。

  • r 指圆的半径，它的值可以是 <length-percentage> 。如果取百分比值时，其值是从参考框的宽度和高度解析出来的；

    • closest-side ：从形状中心到参考框最近边的长度。对于圆来说，这是任何维度中最近的边；对于椭圆来说，这是半径维度中最近的边；
    • farthest-side ：从形状中心到参考框最远边的长度。对于圆来说，这是任何维度中最远的边；对于椭圆来说，这是半径维度中最远的边。

  • cx 和 cy 指的是圆心位置，其中 cx 对应的圆心在 x 轴上的坐标位置，cy 对应的圆心在 y 轴上的坐标位置。如果省略，元素的中心(对角线的交点)将被用作默认值，元素的水平垂直中心点位置。

Mr.LRH2025/4/7CSS基础CSS大约 16 分钟
滚动条样式

序号 伪元素 说明
1 ::-webkit-scrollbar 滚动条整体部分，其中的属性有width,height,background,border（就和一个块级元素一样）等
2 ::-webkit-scrollbar-button 滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果
3 ::-webkit-scrollbar-track 外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果
4 ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
5 ::-webkit-scrollbar-thumb 滚动条里面可以拖动的那部分
6 ::-webkit-scrollbar-corner 边角
7 ::-webkit-resizer 定义右下角拖动块的样式
Mr.LRH2025/4/7CSS基础CSS大约 2 分钟
MIT Licensed | Copyright © 2020-present Mr. LRH