Link Search Menu Expand Document

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

计算

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

自定义变量

使用CSS自定义属性(变量)

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

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

参考: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流布局

参考:利用css3 flex布局超简单快速实现瀑布流排版

其他

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

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

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

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

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

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

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

direction: ltr;

选择器

常用

.class	.intro	选择所有class="intro"的元素
#id	#firstname	选择所有id="firstname"的元素
*	*	选择所有元素
element	p	选择所有<p>元素
element,element	div,p	选择所有<div>元素和<p>元素
element element	div p	选择<div>元素内的所有<p>元素
element>element	div>p	选择所有父级是 <div> 元素的 <p> 元素
element+element	div+p	选择所有紧跟在 <div> 元素之后的第一个 <p> 元素

临近选择器 兄弟选择器

.content + .link{
  /* content 代码块旁边的 link 代码块 */
}
:before	p:before	在每个<p>元素之前插入内容
:after	p:after	在每个<p>元素之后插入内容

:nth-child(n) 该元素其父元素的第n个子元素 :nth-last-child(n) 倒数该元素其父元素的第n个子元素

p:nth-child(2){}
/* 父元素的第二个子元素,不一定是p也有可能是h1-h6,具html结构 */

p:nth-chi* 奇数 */

p:nth-child(even){}
/* 偶数 */

p:nth-child(3n+0){}
/* 第三个 */

p:nth-child(3n+2){}
/* 第三个然后间隔两个后的第三个以此类推 */


p:nth-last-child(2){}

:nth-of-type(n) 选择该元素其父级下第n个该元素相同的元素 :nth-last-of-type(n) 倒数选择该元素其父级下第n个该元素相同的元素

p:nth-of-type(2){}
p:nth-last-of-type(2){}

:last-child 该元素其父级下的最后一个该元素相同的元素,最后一个不同无效

p:last-child{}

:link a:link 选择所有未访问链接 :visited a:visited 选择所有访问过的链接 :active a:active 选择活动链接 :hover a:hover 选择鼠标在链接上面时

妙用

[attribute^=value] attribute html 标签的属性,value 表示属有三种方式:^值以这个内容开始,$表示值以这个内容结尾,*表示值包含这个内容。 以下为举例大多数标签可用,不限a标签。

a[href^="https"]{} /*选择 href 属性的值以"https"开头的元素*/
a[href$=".pdf"]{}	/*选择 href 属性的值以".pdf"结尾的元素*/
a[href*="atop.run"]{}	/*选择 href 属性的值包含"atop"的元素*/
[attribute]	[target]	选择所有带有target属性元素
[attribute=value]	[target=-blank]	选择所有使用target="-blank"的元素
[attribute~=value]	[title~=flower]	选择标题属性包含单词"flower"的所有元素
[attribute|=language]	[lang|=en]	选择 lang 属性以 en 为开头的所有元素

:not(selector) 选择每个并非所选标签的元素

:not(p){}
:empty	p:empty	选择每个没有任何子级的p元素(包括文本节点)
:target	#news:target	选择当前活动的#news元素(包含该锚名称的点击的URL)可以实现类似tab切换功能

:first-letter	p:first-letter	选择每一个<p>元素的第一个字母
:first-line	p:first-line	选择每一个<p>元素的第一行
:first-child	p:first-child	指定只有当<p>元素是其父级的第一个子级的样式。

表单输入框

:valid	:valid	用于匹配输入值为合法的元素
:invalid	:invalid	用于匹配输入值为非法的元素
:focus	input:focus	选择具有焦点的输入元素

通用值

继承

| 值 | 支持属性 | 说明 | | – | – | – | | 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样式效果示例