TablePie

/home

/tech

/reading

/writing

flex 布局元素竖直和水平方向间距：gap: 8px 16px;

  • 8px 竖直方向
  • 16px 水平方向

flex 布局元素换行后右对齐：justify-content: flex-end;

<a> 标签是行内元素（display: inline;）。行内元素不支持设置 padding 或 margin。行内元素不会产生一个新行。

display: inline-block; 行为和行内元素一致，但是支持设置 padding 或 margin。但一般直接使用 FlexBox 而不是 inline-block。

CSS Nesting 目前支持情况较差，采用非嵌套写法。

属性选择器：input[type=text] 表示带有以 type 命名的属性，且属性值为 text 的 input 元素。

忽略优先级，确保样式一定可以显示：在样式结尾加上 !important。如 border: 1px solid red !important;

修改 input 光标颜色：caret-color: red;

为所有元素设置 box-sizing 属性，确保元素的宽高包括 padding 和 border。 # CSS Box Sizing

* {
    box-sizing: border-box;
}

# 伪类和伪元素

伪类 :，选择器的一种。如 :hover。

伪元素 ::。如 ::before、::after。

本地网页端 UI 优化 #

flex布局子元素宽度超出父元素问题，解决方案：

flex: 1;
width: 0;
min-width: 0;

a 标签文字垂直居中：设置 line-height 属性。

Android 输入法导致 css 媒体查询横竖屏判断失效：

// 问题
@media screen and (orientation: landscape)
@media screen and (orientation: portrait)

// 解决
@media screen and (min-aspect-ratio: 13/9) // 横屏
@media screen and (max-aspect-ratio: 13/9) // 竖屏

iPhone12 Pro 分辨率：2,532 × 1,170

Oppo R17 分辨率：2,340 × 1,080

CSS 样式命名规则和规范

#css !important：重要声明。

selector {
  property: value; /* 普通声明 */
  property: value !important; /* 重要声明（推荐） */
  property: value ! important; /* 重要声明（不推荐） */
}
  • important 标志必须是声明中的最后一个标记。
  • 尽量避免使用，使用时增加注释。

calc(100vh - 310px) #

核心概念：

  • calc() 函数：
    • CSS3 函数，用于动态计算 CSS 属性值。
    • 支持混合单位的数学运算。
  • vh 单位：
    • 视口高度单位，1vh 等于视口高度的 1%。
    • 100vh 代表整个视口高度。
  • 计算：
    • 100vh - 310px：视口高度减去固定像素值。

作用：

  • 动态设置元素高度，使其适应视口变化，并保留固定间距。
  • 常用于布局中，使内容区域填充剩余可用空间。

关键知识点：

  • calc() 允许 CSS 进行动态计算，增强布局灵活性。
  • vh 单位实现视口相关尺寸设置。
  • 此功能在响应式设计中很重要。

oveflow #

overflow 是 CSS 的简写属性，其设置了元素溢出时所需的行为——即当元素的内容太大而无法适应它的区块格式化上下文时。

  • auto：取决于用户代理。如果内容适应边距（padding）盒，它看起来与 visible 相同，但是仍然建立了一个新的块级格式化上下文。如果内容溢出，则浏览器提供滚动条。

flex-wrap: wrap; #

超出时自动换行。flex-wrap

←
→
back to top