Skip to main content Link Search Menu Expand Document (external link)
像素教程 1px.run

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 部分，建议给要处理的页面额外增加，不影响其他页面。

`html <meta name=”vieent=”width=device-width, viewport-fit=cover”>


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

`html
<meta name="vieent="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 */
}

计算

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-dropdownhtml

root之CSS变量ps://www.weipxiu.com/711html

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

其他

让标签中 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;

波浪下划线

演示一个波浪线 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;
}

Table of contents

回到顶部

Copyright © 2017-2023 1px.run (像素指南) Distributed by an MIT license.