📖 earlier posts 📖

CSS Animation

2022-04-21
css

CSS 中，对于实现动画或过渡等方式主要可以通过使用transition / animation来进行实现大部分交互需求：

ID	DA	FA
@keyframes	通过@keyframes 创建动画（原理是将一套CSS样式逐渐变化为另一套样式，通常可以通过百分比）
animation-name	为动画设置名称	keyframename、none
animation-duration	设置动画的持续时间（秒/毫秒）	time
animation-timing-function	规定动画的速度曲线（`速度曲线将会使得动画更加丝滑`）	linear、ease、ease-in、ease-out、ease-in-out、cubic-bezier
animation-delay	设置动画何时开始（单位可以是秒或毫秒，`允许负值`）	time
animation-iteration-count	设置动画播放次数	n、infinite
animation-direction	属性控制在`奇数（reverse）、和偶数（alternate）`之间播放动画	normal 、alternate
animation-play-state	设置是否运行或暂停动画	paused \ running
animation-fill-mode	设置样式在动画不播放时的应用元素	none、forwards、backwards、both、initial、inherit
	none	默认值
	forwards	动画结束后使用元素的结尾结束值
	backwards	使用元素的起始值
	both	动画将遵循向前向后规则

transform

通过使用 transform 来让单纯的上移更加的富有动画效果：

<div class="con">
    <div class="ui" height="160px">
        <div class="li">D3 地理与数据集合</div>
        <div class="li">D3 地理与数据集合</div>
        <div class="li">D3 地理与数据集合</div>
        <div class="li">D3 地理与数据集合</div>
    </div>
</div>

CSS

@keyframes scroll {
  0% {
    transform: translate(0, 0); }
  100% {
    transform: translate(0, -160px); } }
.con {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 220px;
  height: 40px;
  background: #007fff;
  border-radius: 6em;
  overflow: hidden; }

.ui {
  animation-name: scroll;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite; }

.li {
  width: 100%;
  line-height: 40px;
  vertical-align: bottom;
  color: white;
  text-align: center; }

/*# sourceMappingURL=style.css.map */

Animation and js

打字效果

通过使用 Animation 内每个阶段不同之间的动画，来配合js属性调用activeCSS属性来实现出打字效果。

<div>
    <h1 class="h1">Hello,world!</h1>
    <script>
        const doms = document.getElementsByClassName('h1')
        function run(dom) {
            dom.className += ' active'
            setTimeout(() => {
                dom.className = 'h1'
            }, 3000)
        }
        run(doms[0])
    </script>
</div>

CSS

@keyframes animate-x {
  0% {
    width: 0; } }
@keyframes cursor-x {
  0% {
    border-color: #007fff; }
  50% {
    border-color: transparent; }
  100% {
    border-color: #007fff;
    border-right: 3px solid #007fff; } }
div {
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #007fff; }

h1 {
  text-align: left;
  overflow: hidden;
  white-space: normal;
  width: 190px;
  border-right: 1px solid transparent; }
  h1.active {
    animation: animate-x 3s 0s steps(12) 1 forwards, cursor-x 0.4s 0s linear infinite; }

/*# sourceMappingURL=style.css.map */

这里的 steps(12)实际上将动画分为了12段，这也正符合了Hello,world的文字字数。

弹窗

HTML


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <link rel="stylesheet" href="http://analysis-of-river-snow.gitee.io/xue-css/less/xue.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans+SC:100,300,400,500,700,900">
</head>
<body>
<button onclick="show()">唤起弹窗</button>
<div class="popup">
    Hello,world
    <div class="popup__close" onclick="hide()">x</div>
</div>
<script>
    function show() {
        const popup = document.getElementsByClassName("popup")[0]
        popup.className += ' popup--isActive'
    }
    function hide() {
        const popup = document.getElementsByClassName("popup")[0]
        popup.className = "popup"
    }
</script>
</body>
</html>

CSS

@charset "UTF-8";
button {
  padding: 6px 20px;
  font-size: 14px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #007fff;
  color: white;
  border: 0;
  border-radius: 6em;
  outline: none; }
  button:hover {
    opacity: 0.8;
    cursor: pointer; }

.popup {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  position: fixed;
  top: -50%;
  width: 300px;
  line-height: 200px;
  text-align: center;
  background: #007fff;
  color: white;
  border-radius: 0.25em;
  box-shadow: 0 0 10px white;
  /* 当点击按钮时，调用 animate 动画 */ }
  .popup--isActive {
    animation-name: animate;
    animation-duration: 0.5s;
    animation-timing-function: cubic-bezier(0.21, 0.85, 1, 1);
    animation-iteration-count: 1;
    animation-fill-mode: forwards; }
  .popup__close {
    width: 40px;
    line-height: 40px;
    height: 40px;
    border-radius: 50%;
    background: white;
    color: #202020;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    top: 100%;
    box-shadow: 0 0 10px #888484;
    cursor: pointer; }
    .popup__close:hover {
      /* 应用线性乘法，使得看起来更加明亮或暗，如果值是 0%，则是全黑，值如 100% 则无变化。 */
      filter: brightness(1.2); }

@keyframes animate {
  0% {
    top: -100%;
    opacity: 0; }
  25% {
    top: 60%;
    opacity: 1; }
  50% {
    top: 48%;
    opacity: 1; }
  75% {
    top: 52%;
    opacity: 1; }
  100% {
    top: 50%;
    opacity: 1; } }

/*# sourceMappingURL=style.css.map */

CSS linear or clip-path of chamefer

2022-04-21
css

斜切角，Angle of chamefer，通过CSS来实现的方法主要有linear-gradient、border-imgage、clip-path来进行绘制斜切角或三角形。

linear-gradient

通过使用使用线性渐变，分别通过45deg/-45deg角度来实现左下角和右下角的斜切角，当然这里使用的斜切角大小为15px，可根据需求来进行调整。

<style>
    .angle-45a {
        background: linear-gradient(45deg, transparent 15px, blue 0);
    }
    .angle-45b {
        background: linear-gradient(-45deg, transparent 15px, blue 0);
    }
</style>
    <div class="xu-col-9 or">
        <div class="con-md-2">
            <div class="angle-45a"></div>
            <div class="angle-45b"></div>
        </div>
    </div>

除此之外，我们也可通过使用多个线性渐变来达到多个角度切割的效果，线性渐变可以配合：

ID	DA	FA
top	顶部	`top and left or top and right`
bottom	底部	`bottom and left of bottom and rifht`
left	左
right	右
由于默认的情况下两个线性渐变被应用在同一个元素，因此需要通过使用将此分割成`50%`让其各占一半。

为避免重复，需要通过使用background-repeat来避免背景的重复：

.angle-45a {
    background: linear-gradient(-45deg, transparent 15px, #6464ff 0) right,
    linear-gradient(45deg, transparent 15px, #6464ff 0) left;
    background-size: 50% 100%;
    background-repeat: no-repeat;
}
.angle-45b {
    background: linear-gradient(45deg, transparent 15px, #6464ff 0) right,
        linear-gradient(-45deg, transparent 15px, #6464ff 0) left;
    background-size: 50% 100%;
    background-repeat: no-repeat;
}

不仅仅线性可以达到斜切角的效果，径向渐变也可以来完成其曲线切角的效果：

.angle-45a {
    background: radial-gradient(circle at top left, transparent 50px, #6464ff 0);
    background-size: 50% 100%;
    background-repeat: no-repeat;
}
.angle-45b {
    background: radial-gradient(circle at top right, transparent 50px, #6464ff 0);
    background-repeat: no-repeat;
}

一秒爱上 clip-path

对于 border-image，svg 玩家可能会狂喜，因为通过使用border-image中通过 svg内的多边形来实现，是不会太难的，但是对于 CSS 玩家可能会感觉非常的无语，于是clip-path可能会让你一秒爱上。

1
2

border: 20px solid transparent;
border-image: 1 url('data:image/svg+xml,\<svg xmlns="http://www.w3.org/2000/svg" width="3" height="3" fill="AliceBlue">\<polygon points="2 0, 80 0, 100 100, 0 100"/>\</svg>');

clip-path

裁剪路径，（clip-path），使用SVG或形状定义一个HTML元素的可见区域方法，在MDN中，介绍如下：

clip-path属性可以防止部分元素通过定义的剪切区域来显示，仅通过显示的特殊区域。剪切区域是被URL定义的路径代替行内或者外部svg，或者定义路线的方法例如circle().。clip-path属性代替了现在已经弃用的剪切 clip属性。

这时候可能CSS玩家会很无语，于是国外有一个非常不错的项目，来直接生成clip-path路径（PS：SVG很多路径都可以被生成）

https://bennettfeely.com/clippy/

1	clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);

CSS text-decoration

2022-04-21
css

文字装饰，(text-decoration)，通常在<a>标签中会经常遇到，即他的下划线他，通常我们会直接使用text-decoration: none 直接去掉下划线，而在新的 CSS 规范中“CSS Text Decoration Module L3”对text-decoration有较好的样式，同时支持了：

ID	DA	FA
text-decoration-line	文本的装饰线（`可以多个搭配`）
	none	不产生文本装饰线，即下划线
	underline	每行都有下划线
	overline	每一行的文本上面都有一行下划线（可与`underline`配合使用）
	line-through	每行的中间都有一行下划线
text-decoration-style	下划线样式
	solid	实心
	double	双下划线
	dotted	虚线（`更细`）
	dashed	粗一点的虚线
	wavy	波浪线
text-decoration-color	下划线颜色
text-decoration	文本装饰属性（通常用于写`text-decoration: none`，他也是`text-decoration-line` 的简写）
text-underline-position	下划线位置
	auto	基于字母的基线处或下方
	under	下划线位置基于元素文本内容下方
	left	在垂直文字下，下划线与下方对齐，与文本的左边缘对齐
	right	在垂直文字下，下划线与下方对齐，与文本的右边缘对齐

值得注意的是，我们通过配合text-underline-offset属性可以实现他的动画效果，当然，他本身并不支持变换，因此需要通过使用@property来实现过度，但是@property是一项实验性技术，目前的兼容，还是很差。。

@property --offset {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

xu-t1 {
  text-underline-offset: var(--offset, 10px);
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-decoration-color: @color-blue;
  transition: --offset 400ms, text-decoration-color 400ms;
}

xu-t1:hover {
  --offset: 10px;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-decoration-color: @color-blue;
  transition: --offset 400ms, text-decoration-color 400ms;
}

CSS mask 遮盖应用

2022-04-21
css

CSS 属性中，为我们提供了一个用于遮盖的属性即mask，通过mask允许开发者通过遮盖或剪切特定的区域或图片的方式来隐藏一个元素或全部可见的区域，在目前mask属性经常被应用在弹幕之中，在 bliblibli平台内所应用。

<style>
    html, body {
        width: 100%;
        height: 100%;
        display: flex;
    }

    .text {
        -webkit-mask: linear-gradient(90deg, transparent, #000);
        mask: linear-gradient(90deg, transparent, #000);
    }
</style>
<h1 class="text">Hello,world!</h1>

在通常的情况下并没有这么简单，上述只是简单的使用MASK来实现文字的消失效果，通常真实环境中，可能还会根据后端来生成遮盖图片，文字移动过去则触发遮盖的效果等。

CSS 文本块溢出

2022-04-21
css

单行

在 CSS 中，为我们提供了一个可用于文本溢出的元素，分别可以搭配white-space、overflow、text-overflow等元素进行进行来进行文本溢出的设置：

    <style>
        .text {
            width: 100px;
            white-space: nowrap;
            /* */
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
    <p class="text">This text-overflow in index.html</p>
</body>

多行

可能有时候上面的需求无法满足我们的实际需要，只可以单行的显示文本，对此我们只需要加入display、-webkit-line-clamp、-webkit-box-orient来进行设置多行文本的溢出效果，主要通过-webkit-line-clamp来设置一个夹子，然后通过-webkit-box-orient中在盒子模型内的右侧设置一个垂直的效果即可实现：

    <style>
        .text {
            width: 100px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
    </style>
    <p class="text">This text-overflow in index.html</p>
</body>

Less 命名空间

2022-04-21
css less

Less 命名空间无非就是遵守目前最为流行和通用的 BEM 命名规范，他有三种符号来表示扩展关系，主要代表了 BEM 中的 块（Block）、元素（Element）、修饰符（Modifier）

ID	DA	FA
-	为连接字符使用，表示某块或子元素的多单词链接符号	`xxx_jiu-xiang-zhe-yang`
__	用于表示块的子元素	`list__title{}`
_	描述一个块或块子元素的状态	`list_title_active`

BEM

块 (Block)

块（Block），我们如果想更简单的理解的话，他其实就是这一范围的统称。就比如一个列表，那么他的块就是 .list：

1
2

.list {
}

元素（Element）

从上往下，块的下面可以添加元素，假设我们需要为列表增加一个标题样式，就是 **元素 (Element)**，那么可以这样写：

.list {
  &__title {
    color: #007fff;
    font-weight: bold;
  }
}

而 View 可以直接也根据这个层级顺序进行使用样式:

1
2
3

<div class="list">
    <p class="list__title">hello</p>
</div>

修饰符（Modifier）

修饰符我们可以理解为就是一个元素的状态，假设一个标题有：大、中、小 三个大小，为了让他更加的明显，我们可以使用修饰符进行区分：

.list {
  &__title_big {
    font-size: 10em;
    font-weight: bold;
    color: #007fff;
  }
  &__title_middle {
    font-size: 5em;
    font-weight: bold;
    color: #007fff;
  }
  &__title_small {
    font-size: 1em;
    font-width: bold;
    color: #007fff;
  }
}

而 view 识图依然可以根据层级关系进行引入

<div class="list">
    <p class="list__title_big">hello</p>
    <p class="list__title_middle">hello</p>
    <p class="list__title_small">hello</p>
</div>

BEM 的书写风格并不于此，只需要遵守其层级关系即可。

File name

当然除了类名的书写规范，还有文件的名称，我们以腾讯的 Less 书写规范为例：

ID	FA
lib-base.less	用于预定义变量：“颜色、字号、字体……”
lib-mixins.less	用于混合的代码
lib.reset.less	页面的初始布局
lib-ui.css	颗粒化 ui 样式
xxx.less	模块样式

Less 安装与简介

2022-04-21
css less

Less与sass、stylus的区别之处在于支持浏览器支持，Less官方为此推出了专门的less.js，用于处理.less语法，并将此转换为浏览器可认知的语法格式。而Sass、stylus之类的只能通过使用node.js来进行预处理，或者你可以通过使用相关语法转换为.css，这都是以上语言所支持的。

Less与Sass、Stylus等CSS扩展语言一样，都支持变量、函数以及Mixin等特征，使得CSS更加容易维护可扩展，而Less虽然语法上没有Sass、Stylus等具有特征，但支持浏览器支持是他的特点之一。

npm

通常安装 less 的方法可以通过使用脚手架进行安装，即npm install -g less来进行全局安装，通过 less 可将 .less转换为.css文件：

1	less styles.less styles.css

通过 lessc 来进行转换为 css

将.less转换为.css，则需要使用lessc style.less style.css来进行转换，转换后的信息如下：

[root@kunlun less]# lessc style.less style.css
[root@kunlun less]# more style.css 
p {
  color: red;
}
[root@kunlun less]# more style.less 
@red: red;
p {
        color: @red;
}

lessc 不存在

如果lessc不存在的话可通过在 node_modules即Node模块中下载是否存在，可使用sudo find / -name lessc来搜索less文件是否存在。如果存在则可通过下方命令进行建立：

1	ln -s {user}node_modules/less/bin/lessc /usr/local/bin/lessc

将{user}替换为你的node_modules之前的目录即可，之后通过使用lessc来检测是否关联成功。

浏览器支持

下载

Lass的浏览器支持需要引入官方的lass.js文件来进行渲染，lass与其他css扩展的区别就是可以在非node.js环境中运行(主要是因为node.js支持欲渲染功能)。

通过“https://codeload.github.com/less/less.js/zip/master”来进行下载，解压缩后将```dist/less.js```文件引入到项目文件中即可。

使用

本文通过使用 Laravel 框架进行运行(也可支持将扩展名改为.html)，并通过引入less.js来进行支持.less渲染：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello</title>
    <link rel="stylesheet" type="text/less" href="less/style.less">
    <script src="js/less.js"></script>
</head>
<body>
    <p>Hello</p>
</body>
</html>

@red: red;

p {
    color: @red;
}

CSS 元素框（Overflow）

2022-04-21
css

可滑动元素框（overflow）

<style>
.over {
	/*边距*/
	padding: 50px;
	
	/*宽度*/
	width: 70%;
	
	/*宽度*/
	height: 200px;
	
	/*滑动方式*/
	overflow: scroll;
	
	/*边框*/
	border: 0px solid #A9A9A9;
	}
</style>
<body>
	<div class="over">
		<p>Hello,world!</p>
		<p>Hello,world!</p>
		<p>Hello,world!</p>
		<p>Hello,world!</p>
		<p>Hello,world!</p>
		<p>Hello,world!</p>
		<p>Hello,world!</p>
		<p>Hello,world!</p>
		<p>Hello,world!</p>
		<p>Hello,world!</p>
		<p>Hello,world!</p>
		<p>Hello,world!</p>
		<p>Hello,world!</p>
		
	</div>
</body>

不可滑动元素框（border）

<style>
.over {
	/*边距*/
	padding: 50px;
	
	/*宽度*/
	width: 70%;
	
	/*宽度*/
	height: 200px;
	
	/*边框*/
	border: 1px solid #A9A9A9;
	}
</style>
<body>
	<div class="over">
		<p>Hello,world!</p>
		<p>Hello,world!</p>
		<p>Hello,world!</p>
		<p>Hello,world!</p>
	</div>
</body>

ID	DE	FA
scroll	元素下滑	overflow

solid	元素边框	border

CSS 位置

2022-04-21
css

文档流（static）

如无特殊定位，则按照文档流进行位置排版

<style>
	img {
		position: static;
	}
</style>
<body>
	<img src="http://zsdk.org.cn/img/Joint_ZhongShan/Jiang_Xue_Open_Knowledge_Repository.png">
	<img src="http://zsdk.org.cn/img/Joint_ZhongShan/Khan.png">
</body>

固定流（fixed）

<style>
.p1 {
	position: fixed;
	top: 2px;
	right: 10px;
	}
</style>
<body>
	<p class="p1">2020年12月5日</p>
</body>

左右定位（relative）

<style>
.p1 {
	position: relative;
	left: 110px;
	}
.p2 {
	position: relative;
	left: -12px;
</style>
<body>
	<p class="p1">右</p>
	<p class="p2">左</p>
</body>

绝对定位（absolute）

<style>
.p1 {
	position: absolute;
	left: 60px;
	top: 20px
	}
</style>
<body>
	<p>Hello:</p>
	<p class="p1">world!</p>
</body>

固定位置（-webkit-sticky）

<style>
.p1{
  	position: -webkit-sticky;
  	position: sticky;
	top: 0px;
	}
</style>
<body>
	<br>
	<p class="p1">我是固定的</p>
	<br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	</body>

重叠样式（z-index）

<style>
.index {
	position:absolute;
	z-index: -1;
	}
</style>
<body>
	<img class="index" src="http://zsdk.org.cn/img/Joint_ZhongShan/Jiang_Xue_Open_Knowledge_Repository.png">
	<p style="position: absolute;top: 2px;">Jiangxue.org.cn</p>
</body>

浮动流（float）

<style>
.float {
	float: right;
	}
</style>
<body>
	<img class="float" src="http://zsdk.org.cn/img/Joint_ZhongShan/Jiang_Xue_Open_Knowledge_Repository.png">
	<p>江雪分析（JIANGXUE ANALYSIS）成立于2018年12月，是国内首家非盈利性质的计算机端口安全及多边安全研究团队。主要致力于计算机端口安全的研发和防护等相关方面的安全模型制定和防护系统的维护及开发，也是钟山计算机端口安全联合团队之一。</p>
</body>

图片浮动流（left）

<style>
.fwhm {
	float: left;
	width: 200px;
	height: 50px;
	
	/*距离*/
	margin: 10px;
	}
</style>
<body>
	<img class="fwhm" src="http://zsdk.org.cn/img/Joint_ZhongShan/Jiang_Xue_Open_Knowledge_Repository.png">
	<img class="fwhm" src="http://zsdk.org.cn/img/Joint_ZhongShan/Jiang_Xue_Open_Knowledge_Repository.png">
	<img class="fwhm" src="http://zsdk.org.cn/img/Joint_ZhongShan/Jiang_Xue_Open_Knowledge_Repository.png">
</body>

ID	DE	FA
static	文档流	position
fixed	固定流
relative	左右定位
absolute	绝对定位
-webkit-sticky	固定位置

z-index	重叠样式	z-index

right	使用浮动流	float
left	向左浮动

margin	距离	margin

CSS 尺寸

2022-04-21
css

高度

<style>
.height {
	height: 40px;
	}
</style>
<body>
<img src="http://zsdk.org.cn/img/Logo_ZhongShan/Logo_CN-a.png">
<img class="height" src="http://zsdk.org.cn/img/Logo_ZhongShan/Logo_CN-a.png">
</body>

<style>
.height {
	height: 10%;
	}
</style>
<body>
<img src="http://zsdk.org.cn/img/Logo_ZhongShan/Logo_CN-a.png">
<img class="height" src="http://zsdk.org.cn/img/Logo_ZhongShan/Logo_CN-a.png">
</body>

宽度

<style>
.width {
	width: 40px;
	}
</style>
<body>
<img src="http://zsdk.org.cn/img/Logo_ZhongShan/Logo_CN-a.png">
<img class="height" src="http://zsdk.org.cn/img/Logo_ZhongShan/Logo_CN-a.png">
</body>

<style>
.wihe {
	width: 60%;
    }
</style>
<body>
<img src="http://zsdk.org.cn/img/Logo_ZhongShan/Logo_CN-a.png">
<img class="wihe" src="http://zsdk.org.cn/img/Logo_ZhongShan/Logo_CN-a.png">
</body>

<style>
.wihe {
	width: 60%;
	height: 50%;
	}
</style>
<body>
<img src="http://zsdk.org.cn/img/Logo_ZhongShan/Logo_CN-a.png">
<img class="wihe" src="http://zsdk.org.cn/img/Logo_ZhongShan/Logo_CN-a.png">
</body>

最大宽度与最大高度

<style>
.wihe {
	max-width: 74%;
	max-height: 19%;
	}
</style>
<body>
<img src="http://zsdk.org.cn/img/Logo_ZhongShan/Logo_CN-a.png">
<img class="wihe" src="http://zsdk.org.cn/img/Logo_ZhongShan/Logo_CN-a.png">
</body>

最小宽度与最小高度

<style>
.wihe {
	min-width: 1100px;
	min-height: 1100px;
	}
</style>
<body>
<img src="http://zsdk.org.cn/img/Logo_ZhongShan/Logo_CN-a.png">
<img class="wihe" src="http://zsdk.org.cn/img/Logo_ZhongShan/Logo_CN-a.png">
</body>

ID	DE	FA
height: 0px;	高度px	height
height: 0%;	高度%

width: 0px;	宽度px	width
width: 0px;	宽度%

max-width: 0px	最大宽度px	max
max-width: 0%	最大宽度%
max-height: 0px;	最大高度px
max-height: 0%;	最大高度%

min-width: 0px	最小宽度px	min
min-width: 0%	最小宽度%
min-height: 0px;	最小高度px
min-height: 0%;	最先宽度%

📖 more posts 📖

transform

Animation and js

打字效果

弹窗

linear-gradient

一秒爱上 clip-path

clip-path

单行

多行

BEM

块 (Block)

元素（Element）

修饰符（Modifier）

File name

npm

通过 lessc 来进行转换为 css

lessc 不存在

浏览器支持

下载

使用

可滑动元素框（overflow）

不可滑动元素框（border）

文档流（static）

固定流（fixed）

左右定位（relative）

绝对定位（absolute）

固定位置（-webkit-sticky）

重叠样式（z-index）

浮动流（float）

图片浮动流（left）

高度

宽度

最大宽度 与 最大高度

最小宽度 与 最小高度

最大宽度与最大高度

最小宽度与最小高度