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);
}
自定义变量函数
: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;
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;
}