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% );
}

渐变色背景

background: linear-gradient(145deg, #FFEE33 0%, #FF2299 100%);

渐变色文字

background: linear-gradient(90deg, #aaff04 1%, #04aaff 50%);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;

注意：-webkit-background-clip 必须放在渐变色后面，不然会失效。

特殊处理

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

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;
}

ol 有序列表从 0 开始计数

css 样式

 ol {
    list-style: none; /* 移除原有的序号 */
    counter-reset: item -1; /* 伪元素序号，从0开始 */
  }
  ol li {
    counter-increment: item;
  }
  ol li::before {
    content: counter(item) ". ";
  }

html 结构示例

<ol>
  <li>我们从0开始</li>
  <li>我们从0开始</li>
  <li>我们从0开始</li>
</ol>