CSS 笔记

外国网站字体设置列表

苹果官网中文增加 Emoji 2021 年

body{
  font-family: "SF Pro Text", "Myriad Set Pro", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}

Google 手机网页版所使用字体 2021 年

body{
  font-family: Google Sans,Roboto,Helvetica Neue,Arial,sans-serif;
}

兼容性处理

横屏的处理（针对横屏或竖屏定义 CSS）

@media screen and (orientation: portrait) {
  /* 竖屏 */
  body {
    color: blue;
  }
}
@media screen and (orientation: landscape) {
  /* 横屏 */
  body {
    color: red;
  }
}

兼容 iOS iPhone 刘海屏

Head 部分，建议给要处理的页面额外增加，不影响其他页面。

<meta name="viewport" content="width=device-width, viewport-fit=cover">

或者与视图缩放放一起，暂时不建议，因为浏览器默认是给左右添加了安全边距，如果所有页面都这样用会导致要每个页面都检查适配。

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">

CSS 部分，页面底部增加黑条高度，因为我们大多数是处理竖屏页面，所以默认就没加竖屏查询了

body{
    /* iOS < 11.2 */
    padding-bottom: constant(safe-area-inset-bottom);
    /* iOS >= 11.2 */
    padding-bottom: env(safe-area-inset-bottom);
}

或者，CSS 部分，针对视觉进行计算调整底部高度，这里 1rem = 20px （针对 @media only screen and (min-width: 414px)）

body{
    /* iOS < 11.2 */
    padding-bottom: calc(constant(safe-area-inset-bottom) - 0.9rem);
    /* iOS >= 11.2 */
    padding-bottom: calc(env(safe-area-inset-bottom) - 0.9rem);
}

横屏优化，因为我们 viewport-fit 使用 cover 后页面内容会覆盖整个视窗，本来浏览器横屏是有处理左右的。之所以 padding-right 也使用 safe-area-inset-left 是因为屏幕可以左右旋转，但是 iOS 在旋转只后左边保留间距右边却不会，所以会导致刘海屏对内容遮挡；下面代码把左右内边距独立出来在新的 body 选择器中是为了便于处理页面的一些悬浮内容，如导航或固定在页面底部的按钮。

@media screen and (orientation: landscape) {
    body {
        /* iOS < 11.2 */
        padding-bottom: constant(safe-area-inset-bottom);
        /* iOS >= 11.2 */
        padding-bottom: env(safe-area-inset-bottom);
    }
    body, .bottom-nav{
        /* iOS < 11.2 */
        padding-right: constant(safe-area-inset-left);
        padding-left: constant(safe-area-inset-left);
        /* iOS >= 11.2 */
        padding-right: env(safe-area-inset-left);
        padding-left: env(safe-area-inset-left);
    }
}

暗黑模式、夜间模式、深色模式（当系统为暗黑模式时改变样式）

@media (prefers-color-scheme: dark) {
  /* your css sheet */
}

强制使用暗黑模式或者浅色模式

normal 默认

html{
  color-scheme: normal;
}

light 浅色模式，如果默认的样式没有定义在 Light 中则无效

html{
  color-scheme: light;
}

dark 暗黑模式

html{
  color-scheme: dark;
}

暂无说明

html{
  color-scheme: light dark;
}

暂无说明
```
html{
  color-scheme: only light;
}
```

计算

div {
  width: calc(100vw - 180px);
}

自定义变量函数

兼容性：Chrome（49）、Edge（15）、Firefox（31）
使用CSS自定义属性（变量）

:root {
  --main-bg-color: brown;
}

div {
  background-color: var(--main-bg-color);
}

当一个值未生效，使用默认值

当 --header-color 未定义时（没有配置），就使用 blue 这个值

div {
  color: var(--header-color, blue);
}

参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties

纯CSS下拉菜单

参考：https://www.runoob.com/css/css-dropdowns.html

<style>
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}
</style>

<h2>下拉菜单</h2>
<p>鼠标移动到按钮上打开下拉菜单。</p>

<div class="dropdown">
  <button class="dropbtn">下拉菜单</button>
  <div class="dropdown-content">
    <a href="https://1px.run">像素教程 1</a>
    <a href="https://1px.run">像素教程 2</a>
    <a href="https://1px.run">像素教程 3</a>
  </div>
</div>

column-cou 快速实现纯CSS瀑布流布局排版

.grid-container {
    width: auto;
    margin: 50px auto;
    column-count: 3; /* 笔记：瀑布流的列数（响应式布局需不同屏幕单独定制） */
    column-gap: 20px; /* 笔记：列之间的间距 */
}
.grid-item {  
    display: inline-grid; /* 笔记：如果使用 block 可能会出现，3列内容平均，第1列未完部分内容出现在第2列顶部 */
    margin: 0 0 20px; /* 笔记：多行 */
}

表格

表格去除单元格内置边距

边框风格样式

border-style

none: 默认无边框

dotted: 定义一个点线边框

dashed: 定义一个虚线边框

solid: 定义实线边框

double: 定义两个边框。两个边框的宽度和 border-width 的值相同

groove: 定义3D沟槽边框。效果取决于边框的颜色值

ridge: 定义3D脊边框。效果取决于边框的颜色值

inset:定义一个3D的嵌入边框。效果取决于边框的颜色值

outset: 定义一个3D突出边框。效果取决于边框的颜色值

有序列表

给有序列表二级有序列表数字序号加括号

.content > ol > li > ol{counter-reset: list;}
.content > ol > li > ol > li{list-style-type: none; position: relative;}
.content > ol > li > ol > li:before { counter-increment: list; content: "(" counter(list, decimal) ") "; position: absolute; left: -25px; }

表单

定义 placeholder 的样式

必须两个:，否则无效

全局

::placeholder {
  color: red;
}

特定元素

input::placeholder {
  color: green;
}

其他

让标签中 title alt 参数中的内容直接显示在页面

下列示例，让 div 中 title 属性直接显示在 div 内容前面

html

<div title="site_name">1px 像素指南</div>

css

div::before{content: attr(title);}
/* 效果区分样式 可以手动启用 */
/* 
div::before{content: attr(title); display: block;margin-right: 1em; text-align: left; color: #00aafe; font-size: 0.8em;} 
div{ margin: 1em 0; padding: 1em 0.2em; font-size: 1.5rem; border-top: 1px solid #000;}*/ 

文文、英文是否换行、超出隐藏

/* 针对英文，根据字母换行 */
word-break:break-all;

/* 针对英文，根据单词换行 */
word-wrap:break-word; 

/* 针对中文，强制换行 */
white-space:pre-wrap; 

/* 中、英强制不换行 */
white-space:nowrap; 

/* 不换行，超出隐藏以省略号结尾（部分浏览器不支持）  */
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;

文字从右向左排列（阿拉伯语倒序第一个字在最后）

在何方 لدي صديق أعسر

direction: rtl;

direction 默认选项为从左到右 ltr
References CSS direction

波浪下划线

演示一个波浪线 GO

.tduw{text-decoration: underline wavy;}

通用值

继承

值	支持属性	说明
inherit		继承父级元素对应属性的值

CSS 渐变背景

/* 线性渐变 从上向下 */
.simple-linear {
  background: linear-gradient(blue, pink);
}

/* 线性渐变 从左向右 */
.horizontal-gradient {
  background: linear-gradient(to right, blue, pink);
}

/* 线性渐变 打鸡血渐变 左上角向右下角 */
.diagonal-gradient {
  background: linear-gradient(to bottom right, blue, pink);
}

/* 线性渐变 改变渐变角度 “70deg” */
.angled-gradient {
  background: linear-gradient(70deg, blue, pink);
}

/* 多个颜色 */
.auto-spaced-linear-gradient {
  background: linear-gradient(red, yellow, blue, orange);
}

/* 颜色终止位置 */
.multicolor-linear {
   background: linear-gradient(to left, lime 28px, red 77%, cyan);
}

其他渐变：实线

.striped {
   background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%);
}

.multiposition-stop2 {
   background: linear-gradient(to left,
      lime 25%, red 25%, red 50%, cyan 50%, cyan 75%, yellow 75% );
   background: linear-gradient(to left,
      lime 25%, red 25% 50%, cyan 50% 75%, yellow 75% );
}

特殊处理

页内锚点跳转实现平滑滚动

html{ scroll-behavior: smooth; }

通过rem或em对文字和其他元素针对不同设备自适应

这里主要考虑了一些常见设备，可能偏iPhone会多一些，也可以结合自己项目用户群体调整

如何计算rem、em：子元素都使用em作为尺寸单位，如宽高，字体。计算单位用px数值如设计稿18显示，已苹果414设备为准，20/16=0.9em

基于rem,

@media only screen and (min-width: 414px){
  body{margin: 0 auto; max-width: 414px;}
  /* 电脑浏览器预览时最大宽度为414px */
}
@media only screen and (min-width: 385px){
  html{font-size: 20px;}
}
@media only screen and (max-width: 375px){
  html{font-size: 18px;}
}
@media only screen and (max-width: 320px){
  html{font-size: 16px;}
}

基于em，配置在父级元素，如控制span，当结构为 .content > span

@media only screen and (min-width: 385px){
    .content{font-size: 20px !important;}
}
@media only screen and (max-width: 375px){
    .content{font-size: 18px !important;}
}
@media only screen and (max-width: 320px){
    .content{font-size: 16px !important;}
}

精美纯CSS样式效果示例

引入 iframe 视频自动满屏自动宽高度

演示

.video-container {
  position: relative;
  padding-top: 56.25%;
  height: 0;
  overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-top: 0;
}

CSS 笔记

外国网站字体设置列表

苹果官网中文增加 Emoji 2021 年

Google 手机网页版所使用字体 2021 年

兼容性处理

横屏的处理（针对横屏或竖屏定义 CSS）

兼容 iOS iPhone 刘海屏

暗黑模式、夜间模式、深色模式（当系统为暗黑模式时改变样式）

强制使用暗黑模式或者浅色模式

计算

自定义变量函数

使用CSS自定义属性（变量）

当一个值未生效，使用默认值

纯CSS下拉菜单

column-cou 快速实现纯CSS瀑布流布局排版

表格

表格去除单元格内置边距

边框风格样式

有序列表

给有序列表二级有序列表数字序号加括号

表单

定义 placeholder 的样式

其他

让标签中 title alt 参数中的内容直接显示在页面

文文、英文是否换行、超出隐藏

文字从右向左排列（阿拉伯语倒序第一个字在最后）

波浪下划线

通用值

继承

CSS 渐变背景

其他渐变：实线

特殊处理

页内锚点跳转实现平滑滚动

通过rem或em对文字和其他元素针对不同设备自适应

精美纯CSS样式效果示例

相关教程

引入 iframe 视频自动满屏自动宽高度

Table of contents

CSS 笔记

外国网站字体设置列表

苹果官网中文 增加 Emoji 2021 年

Google 手机网页版所使用字体 2021 年

兼容性处理

横屏的处理（针对横屏或竖屏定义 CSS）

兼容 iOS iPhone 刘海屏

暗黑模式、夜间模式、深色模式（当系统为暗黑模式时改变样式）

强制使用暗黑模式或者浅色模式

计算

自定义变量函数

使用CSS自定义属性（变量）

当一个值未生效，使用默认值

纯CSS下拉菜单

column-cou 快速实现纯CSS瀑布流布局排版

表格

表格去除单元格内置边距

边框风格样式

有序列表

给有序列表二级有序列表数字序号加括号

表单

定义 placeholder 的样式

其他

让标签中 title alt 参数中的内容直接显示在页面

文文、英文是否换行、超出隐藏

文字从右向左排列（阿拉伯语倒序第一个字在最后）

波浪下划线

通用值

继承

CSS 渐变背景

其他渐变：实线

特殊处理

页内锚点跳转实现平滑滚动

通过rem或em对文字和其他元素针对不同设备自适应

精美纯CSS样式效果示例

相关教程

引入 iframe 视频自动满屏 自动宽高度

Table of contents

苹果官网中文增加 Emoji 2021 年

引入 iframe 视频自动满屏自动宽高度