布局

flex与grid布局

flex.png
grid.png

flex与grid的Alignment Level 3（对齐模块属性）

由css工作组定义，未来也使用这些属性，盒子对齐统一用这6种：flex用4种，grid用6种。-content指的是内容分配属性

属性 flex grid
justify-content 水平居中（横轴中）
align-items 垂直居中（纵轴中）
align-content 调整行列之间的空间，space-evenly等，stretch是指轴线伸长
align-self 子元素使用，改变父元素设置的align-items或者justify-content
justify-items 无
justify-self 无

align-content用来分配轴线方向之间的空间，stretch表示默认占据网格区域整个空间，此时如果

flex与grid合作

仅用grid，grid内部box-alignment属性会使子项宽高缩小到内容宽高，这时候如果给子项加上flex，就可以更好的布局了，比如grid子项的垂直水平居中

flex布局

传送

容器

display：flex；
display：inline-flex；

flex.png

容器属性

  • flex-flow（以下属性简写）
  • flex-direction 项目主轴方向，会影响align-items和justify-content的效果，主轴变化二者跟着变
  • flex-wrap 多个项目折行与否
  • justify-content 横向主轴对齐方式
  • align-items 纵向纵轴对齐方式
  • align-content 多根轴线时轴线的对齐方式，比如三行文字作为整体是flex-start还是flex-end或者center
  • align-self 覆盖align-items属性，设置项目单独的属性

子元素item属性

记忆法则

0相当于关闭，1相当于打开，0/1代表是否会自动缩放

flex三属性

  • flex-grow 项目放大，默认0，不会索取父元素空间，即0表示不会自动扩大
  • flex-shrink 项目缩小，默认1，会随着父元素缩小空间，即1表示会自动缩小
  • flex-basis 项目本身占据空间大小（设置成100%，可以让一个项目占满整行或整列）

flex快捷值

值 含义
默认值initial(0 1 auto) 不放大，只缩小
auto (1 1 auto) 完全缩放
none (0 0 auto) 完全不缩放，简直是僵化
1（1 1 0%） 没有基准值，全靠缩放，等分

flex计算方法

传送

规则

  • 当 flex 取值为一个长度如10px或百分比，则视为 flex-basis 值，flex-grow 取 1，flex-shrink 取 1
  • 当 flex 取值为一个非负数字，则该数字为 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%（flex：1）
  • 当 flex 取值为两个非负数字，则分别视为 flex-grow 和 flex-shrink 的值，flex-basis 取 0%
  • 当 flex 取值为一个非负数字和一个长度或百分比，则分别视为 flex-grow 和 flex-basis 的值，flex-shrink 取 1

举例

  1. flex对剩余空间的分配
<div class="parent">
    <div class="item-1"></div>
    <div class="item-2"></div>
    <div class="item-3"></div>
</div>

.parent {
    display: flex;
    width: 600px;
}
.parent > div {
    height: 100px;
}
.item-1 {
    width: 140px;
    flex: 2 1 0%;
    background: blue;
}
.item-2 {
    width: 100px;
    flex: 2 1 auto;
    background: darkblue;
}
.item-3 {
    flex: 1 1 200px;
    background: lightblue;
}
  • 主轴上父容器总尺寸为 600px
  • 子元素的总基准值是：0% + auto + 200px = 300px，其中
    • 0% 即 0 宽度
    • auto 对应取主尺寸即 100px
  • 故剩余空间为 600px - 300px = 300px
  • 伸缩放大系数之和为： 2 + 2 + 1 = 5
  • 剩余空间分配如下：
    • item-1 和 item-2 各分配 2/5，各得 120px
    • item-3 分配 1/5，得 60px
  • 各项目最终宽度为：
    • item-1 = 0% + 120px = 120px
    • item-2 = auto + 120px = 220px
    • item-3 = 200px + 60px = 260px
  1. flex与自动margin是好友：
  • 子元素水平垂直居中
// 容器
display：flex；
// 子元素
margin：auto；
  • 导航栏左右两侧分离
// 容器ul
display：flex;
// 需要右浮动的li
margin-left：auto；

flex实例

传送

  1. 骰子布局
  2. 网格布局：均匀等比例网格 传送
flex: 0 0 33.3333%		
flex：1即flex：1 1 0  // 自动等宽适应（https://segmentfault.com/q/1010000004080910/a-1020000004121373）
  1. 百分比布局：有些item固定宽度
    在网格布局自动flex：1的基础上，对需要固定的项目flex：0 0 20%来设置20%的固定，即00上不允许缩放
  2. 圣杯布局
  • 整体flex-direction：column
  • 头尾flex：1
  • 中间display：flex；
  • 左右固定的部分分别为flex：0 0 12rem；
  • 中间部分为flex:1;order:-1属性帮助left回到left的位置

holygrail.png

  1. 悬挂式布局
    hanged.png

  2. 固定底栏（内容高度不够时）
    理解为header，body，footer三部分纵轴flex，其中body的flex：1，中间自适应缩放填满，页眉页脚高度固定

  3. 流式布局

.parent {
    	display: flex;
        flex-flow: row wrap;
        align-content: flex-start;
}
.child {
    flex: 0 0 25%;
}
//盒子大小等布局无关规则未列出

margin：auto与flex合作愉快

  1. flex+margin:auto水平垂直居中
<div class="demo1">
  <div class="cont"></div>
</div>

<style>
.demo1 {
  display: flex;
}

.demo1 .cont {
  margin: auto;
}
</style>
  1. flex+其中一个元素的margin:auto
<ul class="demo2">
  <li>首页</li>
  <li>动态</li>
  <li>话题</li>
  <li>活动</li>
  <li>登录 &nbsp; 注册</li>
</ul>

<style>
.demo2 {
  display: flex;
}

.demo2 > li:last-child {
  margin-left: auto;
}
</style>

flex+marginleft.png

grid布局

张鑫旭最佳
传送门1
传送门2

简介

  • CSS Grid 布局是 CSS 中最强大的布局系统。与 flexbox 的一维布局系统不同，CSS Grid 布局是一个二维布局系统，也就意味着它可以同时处理列和行。
  • 这里介绍的是2.0语法
  • 注意grid layout属于推荐标准，某些属性更是在草案阶段

概念

1. grid布局

给div这类块状元素元素设置display:grid或者给这类内联元素设置display:inline-grid，Grid布局即创建，如

div {
    display: grid;
}

此时div就是“grid容器”，其子元素称为“grid子项”

2. grid容器与子项属性

grid容器属性与grid子项属性

作用于grid容器 作用于grid子项
grid-template-columns grid-column-start
grid-template-rows grid-column-end
grid-template-areas grid-row-start
grid-template grid-row-end
grid-column-gap grid-column
grid-row-gap grid-row
grid-gap grid-area
justify-items justify-self
align-items align-self
place-items place-self

justify-content
align-content
place-content
grid-auto-columns
grid-auto-rows
grid-auto-flow
grid

grid容器属性

1. 行列划分

.container {
  grid-template-columns: <track-size> ... | <line-name> <track-size> ...;
  grid-template-rows: <track-size> ... | <line-name> <track-size> ...;
}

例如：

.container {
    grid-template-columns: 80px auto 100px;
    grid-template-rows: 25% 100px auto 60px;
}

grid.png

2. 分割线命名

常规网格线
.container {
    grid-template-columns: [第一根纵线] 80px [纵线2] auto [纵线3] 100px [最后的结束线];
    grid-template-rows: [第一行开始] 25% [第一行结束] 100px [行3] auto [行4] 60px [行末];
}
双命名

同一条网格线两次命名

.container {
    grid-template-columns: [第一根纵线] 80px [第1根纵线结束 第2根纵线开始] 100px [最后的结束线];
}
repeat函数
.container {
    grid-template-columns: repeat(24, 40px [col-start]);
}

等同于

.container {
    grid-template-columns: 40px [col-start], 40px [col-start], /* ...省略20个...*/, 40px [col-start], 40px [col-start];
}
fr

fr是单词fraction的缩写，表示分数

// 指的是每部分占据1/3的宽度
.container {
    grid-template-columns: 1fr 1fr 1fr;
}

// 指的是除200px外的空间1/3等分
.container {
    grid-template-columns: 200px 1fr 1fr 1fr;  
}

// 指的是第一块宽度是内部子元素实际占据空间，其他三块三等分
.container {
    grid-template-columns: auto 1fr 1fr 1fr;
}

// 所有fr的和不足1时
.container {
    grid-template-columns: auto 0.25fr .25fr .25fr;
}

此时0.25fr等于(容器宽度 - “宽auto”字符宽度) * 0.25，还剩下的空间给auto

3. 网格区域area

基本规则
.container {
  grid-template-areas: 
    "<grid-area-name> | . | none | ..."
    "...";
}
  • grid-area-name 表示 对应网格区域的名称。
  • . 表示空的网格单元格。
  • none 表示没有定义网格区域。
区域实例

写这样一个图

gridarea.png

基础css：

.container {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-areas: 
        "葡萄 葡萄 葡萄"
        "龙虾 养鱼 养鱼"
        "龙虾 养鱼 养鱼"
        "西瓜 西瓜 西瓜";
}

基础html

<div class="container">
    <div class="putao"></div>
    <div class="longxia"></div>
    <div class="yangyu"></div>
    <div class="xigua"></div>
</div>

划分区域

.putao { grid-area: 葡萄; }
.longxia { grid-area: 龙虾; }
.yangyu { grid-area: 养鱼; }
.xigua { grid-area: 西瓜; }

上述网格线默认名称会是"葡萄-start"、"葡萄-end"这样，当然网格必须是矩形

4. grid-template简写

grid-template是grid-template-rows，grid-template-columns和grid-template-areas属性的缩写。

.container {
    grid-template: <grid-template-rows> / <grid-template-columns>;
}

例如：

.container {
    grid-template: 
        "葡萄 葡萄 葡萄" 1fr 
        "龙虾 养鱼 养鱼" 1fr 
        "龙虾 养鱼 养鱼" 1fr 
        "西瓜 西瓜 西瓜" 1fr
        /1fr 1fr 1fr;
}

5. grid-column-gap和grid-row-gap

定义网格线

.container {
  grid-column-gap: <line-size>;
  grid-row-gap: <line-size>;
}

6. grid-gap简写

grid-column-gap和grid-row-gap缩写

.container {
    grid-gap: <grid-row-gap> <grid-column-gap>;
}

7. justify-items与align-items

指定了网格元素的水平/垂直呈现方式，是拉伸显示，还是左中右对齐

.container {
    xxx-items: stretch | start | end | center;
}

stretch表示拉伸，占满空间；start/end/center表示子元素尺寸由内容决定，整体在一个网格中的位置

8. place-items简写

justify-items与align-items的简写

.container {
    place-items: <align-items> / <justify-items>;
}

9. justify-content/align-content

  • 网格水平/垂直分布属性，条件是grid-template后有剩余空间
  • 属性有：
    • stretch/start/end/center
    • space-between/space-evenly/space-around

10. place-content简写

justify-content/align-content

.container {
    place-items: <align-content> / <justify-content>;
}

11. grid-auto-columns和grid-auto-rows

指定任何自动生成的网格轨道（也称为隐式网格轨道）的大小

.container {
    grid-auto-columns: <track-size> ...;
    grid-auto-rows: <track-size> ...;
}

指的是如果分配的网格空间不够，剩下的网格会出现在容器之外，这个“越位”的网格的宽高由该属性设置

12. grid-auto-flow属性

控制没有明确指定位置的grid子项的放置方式

.container {
  grid-auto-flow: row | column | row dense | column dense
}

13. grid简写

这些grid-template-rows，grid-template-columns，grid-template-areas，grid-auto-rows，grid-auto-columns和grid-auto-flow的缩写

有几种用法：

  • 重置
// 重置所有属性为初始值
grid: none
  • 只表示行列
// 与grid-template一致
grid: <grid-template>
// 例如
.container {
    grid: 100px 300px / 3fr 1fr;
}
  • 可省略表达
grid: <grid-template-rows> / [ auto-flow && dense? ] <grid-auto-columns>?

问号?表示0或1，可有可无的意思。也就是dense关键字和grid-auto-columns值都可以省略。

auto-flow在斜杠左侧表示grid-auto-flow: row;在斜杠右侧表示grid-auto-flow: column;

该属性主要用于隐式轨道的生成，不常用

grid子项属性

1. grid-column-start, grid-column-end, grid-row-start和grid-row-end

表示grid子项所占据的区域的起始和终止位置，包括水平方向和垂直方向，其实就是子项

.item {
    grid-column-start: <number> | <name> | span <number> | span <name> | auto
    grid-column-end: <number> | <name> | span <number> | span <name> | auto
    grid-row-start: <number> | <name> | span <number> | span <name> | auto
    grid-row-end: <number> | <name> | span <number> | span <name> | auto
}

法中的管道分隔符|表示“或者”的意思

  • 起止与第几条网格线。
  • 自定义的网格线的名称
  • span 表示当前网格会自动跨越指定的网格数量。
  • span 表示当前网格会自动扩展，直到命中指定的网格线名称。
  • auto 全自动，包括定位，跨度等。

其实就是指定子项的起止范围，例如：

例子1：

<div class="container">
    <div class="item-a"></div>
</div>

.container {
    grid-template-columns: [第一根纵线] 80px [纵线2] auto [纵线3] 100px [最后的结束线];
    grid-template-rows: [第一行开始] 25% [第一行结束] 100px [行3] auto [行末];
}
.item-a {
    grid-column-start: 2;
    grid-column-end: 纵线3;
    grid-row-start: 第一行开始;
    grid-row-end: 3;
}

itemeffect.png

例子2:

.item-b {
    grid-column-start: 2;
    grid-column-end: span 纵线3;
    grid-row-start: 第一行开始;
    grid-row-end: span 3;
}

span在有line-name时不起作用，在span 3这样的数字时，3表示跨越3行

2. grid-column和grid-row简写

前者是grid-column-start + grid-column-end的缩写，后者是grid-row-start + grid-row-end的缩写，斜杠分割

3. grid-area

表示当前网格所占用的区域

.item {
    grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
}

例如：

.container {
    grid-template: 1fr 1fr 1fr/1fr 1fr 1fr 1fr;
}
.item-c { 
    grid-area: 1 / 2 / 3 / 4;
}

结果：
griditemarea.png

4. justify-content/align-self

同容器属性，但只对子项生效

5. place-self简写

同容器属性，但只对子项生效

.container {
    place-items: <align-self> / <justify-self>;
}

grid注意事项

  1. grid布局中，传统特性如float，display:inline-block，display:table-cell，vertical-align以及column-*这些属性和声明对grid子项是没有任何作用的
  2. 支持中文，但中文有乱码风险
  3. ie需要加前缀-ms-，ie10-15仅支持老版本grid特性

grid中的灵活性尺寸(flexible sizing)

属性 简介
fr grid中的剩余空间计算规则
auto grid中用到，指的是默认内容宽度，某些情况下可调整（如fr和小于1）
minmax(min,max) grid中属性，指的是网格最大最小的宽度 MDN传送
fit-content( [ 或 ] ) grid网格宽度的下限

css Time

css的时间概念在css中的提现

动画设计思路-分时间轴

简单联动：
animationdes.png
复杂联动：
design.png

移动端过渡时长300ms分水岭

动画设计的业界惯例是过渡控制在300ms以内，平板上面则长30%，更小的可穿戴设备则缩短30%

视觉与创意表现-张鑫旭

1. 平行四边形

方案选择

  1. transform:skew(30deg) 可以实现图形倾斜，这里不可用，因为文字也会倾斜
  2. 这里使用了css shape布局

css shape布局

css shape布局也是布局的一种，类似grid和flex布局

三种属性

shape-outside
shape-margin
shape-image-threshold

shape-outside为例
  • none – 默认值，普通矩形
  • – 图形盒子
  • – 基本图形函数。
  • – 图像类。

图示布局：

skewno.png

<div class="shape-left"></div>
<div class="shape-right"></div>
<content class="content">
   ...内容...
</content>

思路：content靠内容撑开；content::before画外侧倾斜线(skew);左右两侧浮动的三角形靠shape-outside完成；

slayout.png

.shape-left {
    float: left;
    width: 200px; height: 500px;
    shape-outside: polygon(0 0, 100% 0, 0% 100%);
}
.shape-right {
    float: right;
    width: 200px; height: 500px;
    shape-outside: polygon(100% 0, 100% 100%, 0 100%);
}
.content {
    display: block;
    padding: 1px;
    position: relative;
    z-index: 0;
}
.content::before {
    content: '';
    position: absolute;
    background-color: #fff;
    transform: skewX(-22deg);
    left: 50px; right: 50px; top: 0; bottom: 0;
    border: 1px solid #ddd;
    z-index: -1;
}

请注意： shape布局解决的是文字环绕块状格式的问题，如这种：
shapeeffect.png

shape-image-threshold属性

shape-image-threshold指图像环绕时候的半透明阈值，默认是0.0，也就是图像透明度为0的区域边界才能环绕。同理，如果值是0.5表示透明度小于0.5的区域都可以文字环绕。

2. 镂空技术

outline无限大

<div class="warp">
    <div class="inner"></div>
</div>

.warp {
    width: 500px;
    height: 500px;
    background: lightblue;
    position: relative;
    overflow: hidden;
    display: flex;
}

.inner {
    margin: auto;
    width: 150px;
    height: 150px;
    outline: 999px solid rgb(0, 0, 0, 0.5);
}

box-shadow

通过环绕的阴影扩大实现，将上述outline替换为box-shadow

// 参数：水平阴影，垂直阴影，模糊距离，阴影宽度，颜色
box-shadow: 0 0 0 999px rgb(0, 0, 0, 0.5);

不规则图形镂空

张鑫旭传送
css遮罩的应用，子元素与父元素重叠部分被遮罩显示出来

mask: no-repeat center;
mask-image: linear-gradient(black, black), url(./star.svg);
mask-size: cover, 120px 120px;
mask-composite: exclude;
mask-composite: source-out;

3. 图像处理

混合模式+滤镜

background-blend-mode:darken;
filter:brightness(80%) grayscale(20%) contrast(1.2);

4. 动画

主要是实现思路

1.根据百分比显示静态的饼图

思路：关键点是半个矩形以圆点为中心旋转，旋转过右半圆时，右半圆覆盖，左半圆再开始旋转

技术点：如何判断百分比到了50%，判断使用opacity:calc()
opacity小于0按0计算，大于1按1解析

2.字符打点动画

方法一

起止关键帧是动画的两个关键帧

.dot {
    position:relative;
}
.dot::after {
    content:'...';
    position:absolute;
    left:0;
    animation:dot2 3s infinite step-start both;
}
@keyframe dot2 {
    33% {content:'.'}
    66% {content:'..'}
}

方法二

垂直位移形成动画

.dot::after {
    content:'...\A..\A.';  // \A换行符号
    white-space:pre-wrap;
}
@keyframes dot2 {
    33% {transform:translateY(1rem)}
    66% {transform:translateY(2rem)}
}

3. 流光溢彩的文字效果

liuguangyicai.png
利用色相

<h2 class="flow-slogon">第五届CSS大会</h2>

.flow-slogon {
    font-size: 120px;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to right, red, yellow, lime, aqua, blue, fuchsia);
    animation: hue 6s linear infinite;
}
@keyframes hue {
    from {
        filter: hue-rotate(0deg);
    }
    to {
        filter: hue-rotate(360deg);
    }
}

4. 条纹滚动

tiaowen.png

<div class="flow-twill"></div>

// 利用repeating-linear-gradient重复性渐变画倾斜条纹
 .flow-twill {
    padding-right: 30%;
    height: calc(1.4142 * 20px);
    background: repeating-linear-gradient(45deg, teal, teal 10px, transparent 11px, transparent 19px, teal 20px);
    background-clip: content-box;
    animation: twill 1s linear infinite;
    position: relative;
}

// 使用伪元素来画管道，管道纵向也有渐变
.flow-twill::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, .5), hsla(0, 0%, 100%, .5), rgba(0, 0, 0, .5));
}

// 纵向滚动条纹，形成横向错觉
@keyframes twill {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 0 calc(-1 * 1.4142 * 40px);
    }
}

5. 波浪线滚动

<a href="javascript:" class="flow-wave">hover我（移动端按下）</a>

.flow-wave {
    padding: 5px 0;
}
.flow-wave:hover,
.flow-wave:focus {
    background: radial-gradient(circle at 10px -7px, transparent 8px, currentColor 8px, currentColor 9px, transparent 9px) repeat-x,
        radial-gradient(circle at 10px 27px, transparent 8px, currentColor 8px, currentColor 9px, transparent 9px) repeat-x;
    background-size: 20px 20px;
    background-position: -10px calc(100% + 16px), 0 calc(100% - 4px);
    animation: waveFlow 1s infinite linear;
}
@keyframes waveFlow {
    from { background-position-x: -10px, 0; }
    to { background-position-x: -30px, -20px; }
}

6. 滚动指示器

  • 建议在页面高度超过一屏时使用,即100%-100vh才可以有值
  • indicator是渐变占满屏幕的值
  • 伪元素用来占满除了顶部条外的其他部分的
  • mix-blend-mode: darken;特别关键，没有他，白色的伪元素就会彻底遮挡页面内容，有了他则白色变透明了；这里darken表示对比混合，显示更深色的颜色，代表白色变为隐藏色，相当于白色透明了。
<div class="indicator"></div>

body {
    position: relative;
}
.indicator {
    position: absolute;
    top: 0; right: 0; left: 0; bottom: 0;
    background: linear-gradient(to right top, teal 50%, transparent 50%) no-repeat;
    background-size: 100% calc(100% - 100vh);
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: darken;
}
.indicator::after {
    content: '';
    position: fixed;
    top: 5px; bottom: 0; right: 0; left: 0;
    background: #fff;
    z-index: 1;
}

7. 视差滚动

  • 利用3D的景深-即有的元素z轴上靠后，有的靠前，滚动起来有一种比其他元素慢的“错觉”
  • 只能用于自定义的div，不能用于body

8. 分栏拉伸

利用了block级元素本身的resize属性与-webkit-scrollbar

<div class="lashen"></div>

.lashen {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    resize: horizontal;
    overflow: scroll;
    opacity: 0;
}

.lashen::-webkit-scrollbar {
    width: 200px;
    height: 200px;
    opacity: 0;
}

注意，这只是有了拉伸模块。实际中，拉伸模块仅仅用来占空间，需要opacity为0，这时候再让实际空间覆盖在lashen块的上面，左侧float+右侧div，这样就可以拉伸分栏了

张鑫旭传送

css-trick剖析-大漠

  • css中没有变量，只有自定义属性
  • css3，没有css4
    • CSS到Level 3因为采取了“模块化”策略，本身不会再进化到Level 4了。正因为如此，CSS理论上永远不会出现CSS4
      （There is no CSS Level 4. Independent modules can reach level 4 or beyond, but CSS the language no longer has levels. (“CSS Level 3” as a term is used only to differentiate it from the previous monolithic versions.)

一、SVG icon

二、滚动特性

  • 滚动条可以通过css自定义样式
  • 滚动捕捉
    指的是滚动了图片如轮播等滚动一点图片始终处于视区中间的效果（实验性质，尚未定稿且经常变化）
    参考链接

三、自定义属性

前缀带有–的自定义值,不是变量，有的人称为变量，其实不存在变量，只有自定义属性（大漠）

传送参考

基础语法

:root {
    --mycolor:#00f;
}

.child {
    background:var(--mycolor)
}

特性

1.动态的
这个相对于scss来说，scss只有编译后才生效，静态不可用；但自定义属性直接可以用（因为是基础语法啊）
2.级联
自定义属性是普通属性，可以在任意元素上声明它们
3.继承
4.全局与局部作用域
5.条件判断
利用calc属性

四、web layout（css grid）

新的布局系统，主要有以下几方面，综合使用来布局，没有绝对的优劣：

  1. flex grid 多列布局等
  2. 书写模式
  3. 逻辑书写（逻辑盒模型）
  4. Box Alignment
  5. 尺寸
  6. media query
  7. css shape
  8. transform
  9. Scroll snapping
  10. 变量字体

五、混合模式与滤镜

  1. mix-blend-mode
  2. background-blend-mode
  3. isolation（配合1 2 用）
  4. filter

六、其他

1. 渐变文本与渐变边框

text-fill-color+backgroun-clip

2. css片段模板

box-decoration-break

3. css计数器counter()

掘金
图标上数字的展示

4. clip-path路径剪切

5. object-fit

MDN
object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框

6. 书写模式writing-mode

传送

  • 书写模式指的是从左往右或者从上到下的文本写法。
  • 书写模式是我们创建的所有布局的首要基石。
  • 书写模式属性
writing-mode: horizontal-tb; 
writing-mode: vertical-rl; 
writing-mode: vertical-lr; 
writing-mode: sideways-rl; 
writing-mode: sideways-lr;

五个你不知道的css特性(勾三股四)

1. float

圣杯布局已经不怎么用了，float现在和css shape用来实现文字多边形环绕

例如张鑫旭的渐变环绕形状：

.shape {
    float: left;
    width: 150px; height: 120px;
    --gradient: linear-gradient(to right bottom, #cd0000, transparent 50%, transparent 90%, #cd0000);
    shape-outside: var(--gradient);
    background: var(--gradient);
}

2. page-网页打印

1. 解决打印不出链接问题

@media print {
    a::after {
        content:'-' attr(href);
        font-size:0.8rem;
    }
}

2. page box

页面盒子，打印时用到
pagebox.png

打印属性

@page {
    size:a4;margin:0;
    // 这里还可以有其他很多内容
}

3. 自定义滚动条

4. font

5. viewpoint

  • 移动端开发
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  • 未来css将接管html的viewpoint设置
@viewpoint {
    width:extend-to-zoom 100%;
    height:auto;
    zoom:1.0;
}
  • 异形viewpoint
    viewpoint不一定是矩形，如智能手表，viewpoint也有规范来应对

新特性

1. css内容内部与外部尺寸

  • 可以作为width的属性，即内容宽度，也可以作为grid的grid-template-column的宽度值
  • 这四个属性实际上将css3以前的某些特性明晰化了
  • 实际上这四个属性最适合解决中文和西文最小宽度的问题
分类 属性 简介
外部尺寸（由外部元素决定） fit-available 设置的这个元素表现相当于没有设置样式的div，宽度自动充满父级
内部尺寸（由内部元素决定） fit-content 将元素宽度收缩为内容宽度
内部尺寸（由内部元素决定） min-content 采用内部元素最小宽度值最大的那个元素的宽度作为最终容器的宽度
内部尺寸（由内部元素决定） max-content 采用内部元素宽度值最大的那个元素的宽度作为最终容器的宽度

其中，fit-content属性的用处还不止于此，它还可以配合margin：auto；实现元素居中

.fit {
    margin:auto;
    width:fit-content;
}

2. css新尺寸单位

单位 解析
vmin 宽或高最小值的百分之一，类似vh
vmax 宽或高最大值的百分之一，类似vw

3. 混合模式mix-blend-mode/background-blend-mode

张鑫旭传送

1. mix-blend-mode文字混合

如difference模式表示差值，即文字颜色不会与背景混合造成看不清的情况
mixblend.png

2. background-blend-mode背景间混合

背景混合属性

4. SVG/Canvas中nonzero和evenodd填充规则

张鑫旭传送

简介

只要是路径填充，都有两种规则，nonzero和evenodd，无论是SVG中的路径填充，还是Canvas中的路径填充，如果还有其他和路径相关的技术（甚至设计软件），也离不开这两种填充规则

表现

体现在图形叠加时的现象
overlay.png

判断方法

nonzero非零规则

要判断一个区域是路径内部还是路径外部，需要在判断区域任选一个点，向区域外延伸一条射线，该射线与经过的每一条线段的交叉点的值的和非0则是内部，为0是外部；内部填充，外部为空

值的计算是看交叉点线段和射线夹角划出的“路线”是顺时针还是逆时针，顺时针为1，逆时针为-1

nozero.png

evenodd奇偶规则

从待判断区域选一个点，向外延伸射线，交叉点的个数为奇数表示内部，否则表示外部；内部填充，外部镂空

evenodd.png

5. 计算属性 calc

width:calc(expression)

规则

expression是计算得到的长度值，规则：

  • 使用“+”、“-”、“*” 和 “/”四则运算；
  • 可以使用百分比、px、em、rem等单位；
  • 可以混合使用各种单位进行计算；
  • 表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的；
  • 表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。

例子

width: calc(100% - (10px + 5px) * 2);
width: calc(100% - 40px);

6. css支持性查询

.selector {
  /* Styles that are supported in old browsers */
}

@supports (property:value) {
  .selector {
    /* Styles for browsers that support the specified property */
  }
}

js中也有类似方法CSS.supports()