CSS小笔记
Posted Grace_Zhong
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS小笔记相关的知识，希望对你有一定的参考价值。
记录个人 css3 学习…
Tips
- Page Icon
<header>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
</header>
- CSS Variables
// 变量以 `--` 开头
//`:root` 表示文档树的根元素，即 `<html>`
:root{
--main-color： red;
--card-height: 50px;
--link: "www.baidu.com";
}
使用：var(变量名，如果变量不存在则使用这个)
div{
color: var(--main-color);
color: var(--main-color, green);
}
- 使用 Normalize.css 或 reset.css
Normalize.css
Reset.css - Bootstrap/Tailwind - 别人写好的 css，可以直接用。也可以用来布局 (页面整体布局)。见 Bootstrap 小笔记
- 巧用 calc()
- 使用 @media 响应式布局
- SASS - 提供一个很方便的方式编写 css 文件，见 SASS 小笔记
关于布局
- Flex Box vs Grid System
Grid System: 每个元素宽度定死，并可以随着页面变小而变小，常用于页面整体布局
Flex Box: 元素可以随着页面变小换行，元素大小不变
颜色渐变
背景颜色渐变
方式一： linear-gradient
linear-gradient(方向, 起始颜色, 目标颜色);
linear-gradient(方向, 起始颜色, 中间色 颜色改变时高度, ...多个中间色..., 目标颜色);
不写 方向 默认为从上到下
background: linear-gradient(to right top, red, blue);
background: linear-gradient(0deg, blue, green 40%, yellow 50%, red);
字体颜色渐变
方式一： linear-gradient
linear-gradient(方向, 起始颜色, 目标颜色);
不写 方向 默认为从上到下
// 颜色渐变以及渐变方向
background: linear-gradient(rgb(146, 146, 146), rgb(255, 255, 255));
// 渐变蒙版覆盖的内容
background-clip: text;
text-fill-color: transparent;
背景图片
background-image: url("./img/1.png");
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
简写
顺序：image -> repeat -> position
background: url('images/bg-3.png') no-repeat center;
单位 em rem px
em 相对于当前元素字体大小的倍数
rem 相对于根元素字体大小的倍数
px 固定值
em和rem可以一次性控制多个元素的大小变化
Flex 排版
flex-wrap: wrap; // 窗口缩小自动换行
justify-content: center; // 水平居中
align-items: center; // 中线对齐
以上是关于CSS小笔记的主要内容，如果未能解决你的问题，请参考以下文章