前言：该笔记适合学习过CSS，想快速回忆复习的人
css基本语法
选择器
标签选择器： div
类选择器： .class_div
id选择器： #id_div
选择器优先级：id>类>标签
!important：在html元素行内添加，优先级最高
后代选择器：.class_div span
群组选择器：.class_div, #id_div
背景样式
background-color：颜色
background-image：图片url background-size：图片大小
background-position：图片位置center
background-repeat：图片重复 属性：no-repeat、repeat-x、repeat、repeat-y
文本属性
line-height：行高
text-align：对齐方式
text-decoration：文本修饰 属性：line、color、style、thickness
字体属性
font-family：类型
font-size：大小
font-weight：字体粗细
font-style：风格
链接中的伪类
| 状态 | 效果 |
|---|---|
| a:link | 普通的、未被访问的链接。 |
| a:hover | 鼠标指针位于链接的上方。 |
| a:active | 链接被单击的时刻。 |
| a:visited | 用户已访问的链接。 |
盒模型
margin：外边框属性
padding：内边距属性
border：边框属性
dispaly属性
| 属性值 | 说明 |
|---|---|
| block | 元素以块级方式展示。 |
| inline | 元素以内联方式展示。 |
| inline-block | 元素以内联块的方式展示。 |
| none | 隐藏元素。 |
inline：可以让像 div 这样的霸道块，接纳其他元素来自己的地盘。
浮动与定位
float:left、right：元素沿其容器的左侧或右侧放置 属性：left、right
position：对元素位置控制
-
静态定位（position:inherit）（默认：普通流、标准流）
-
相对定位（position:relative） （相对于自身位置移动，占位置）
-
绝对定位（position:absolute） （相对带有定位的父级，不占位置）
-
固定定位（position:fixed）（元素不随着滚动条拖动而改变位置，不占位置）
子绝父相
.ad-l {
position: relative;
left: -40px;
}CSS新特性
新增选择器
属性选择器：通过正则去匹配指定属性的元素
| 选择器 | 描述 |
|---|---|
| E[attr^=“xx”] | 选择元素 E，其中 E 元素的 attr 属性是以 xx 开头的任何字符。 |
| E[attr$=“xx”] | 选择元素 E，其中 E 元素的 attr 属性是以 xx 结尾的任何字符。 |
| E[attr*=“xx”] | 选择元素 E，其中 E 元素的 attr 属性是包含 xx 的任何字符。 |
子元素伪类选择器：选择某元素的子元素
| 选择器 | 描述 |
|---|---|
| E:first-child | 选择元素 E 的第一个子元素。 |
| E:last-child | 选择元素 E 的最后一个子元素。 |
| E:nth-child(n) | 选择元素 E 的第 n 个子元素，n 有三种取值，数字、odd 和 even。注意第一个子元素的下标是 1。 |
| E:only-child | 选择元素 E 下唯一的子元素。 |
| E:first-of-type | 选择父元素下第一个 E 类型的子元素。 |
| E:last-of-type | 选择父元素下最后一个 E 类型的子元素。 |
| E:nth-of-type(n) | 选择父元素下第 n 个 E 类型的子元素，n 有三种取值，数字、odd 和 even。 |
| E:only-of-type | 选择父元素唯一的 E 类型的子元素。 |
| E:nth-last-child(n) | 选择所有 E 元素倒数的第 n 个子元素。 |
| E:nth-last-of-type(n) | 选择所有 E 元素倒数的第 n 个为 E 的子元素。 |
UI伪类选择器：通过元素的状态来选择
| 选择器 | 描述 |
|---|---|
| :focus | 给获取焦点的元素设置样式。 |
| ::selection | 给页面中被选中的文本内容设置样式。 |
| :checked | 给被选中的单选框或者复选框设置样式。 |
| :enabled | 给可用的表单设置样式。 |
| :disabled | 给不可用的表单设置样式。 |
| :read-only | 给只读表单设置样式。 |
| :read-write | 给可读写的表单元素设置样式。 |
| :valid | 验证有效。 |
| :invalid | 验证无效。 |
文本阴影
text-shadow: x-offset y-offset blur color;
文本溢出
text-overflow：设置超长文本省略显示
| 属性值 | 描述 |
|---|---|
| clip | 修剪文本。 |
| ellipsis | 显示省略符号来代表被修剪的文本。 |
圆角边框
border-radius： 顺序：左上角、右上角，右下角，左下角
盒子阴影
box-shadow: h-shadow v-shadow blur spread color inset;
| 值 | 说明 |
|---|---|
| h-shadow | 必选，水平阴影的位置，允许负值。 |
| v-shadow | 必选，垂直阴影的位置，允许负值。 |
| blur | 可选，模糊距离。 |
| spread | 可选，阴影的大小。 |
| color | 可选，阴影的颜色。 |
| inset | 可选，将外部阴影改为内部阴影。 |
渐变属性
线性渐变
/*从上到下线性渐变*/
.gradient1 {
background-image: linear-gradient(#ff577f, #c6c9ff);
}
/*从左到右线性渐变*/
.gradient2 {
background-image: linear-gradient(to right, #ff9d72, #c6c9ff);
}
/*从左上角到右下角的渐变*/
.gradient3 {
background-image: linear-gradient(to bottom right, #8ad7c1, #c6c9ff);
}
/*定义角度的渐变*/
.gradient4 {
background-image: linear-gradient(50deg, #bc6ff1, #ffd5cd);
}
径向渐变
/*均匀分布径向渐变*/
.gradient1 {
background-image: radial-gradient(#ff577f, #c6c9ff, #8ad7c1);
}
/*不均匀渐变*/
.gradient2 {
background-image: radial-gradient(#8bcdcd 5%, #ff9d72, #c6c9ff);
}
/*椭圆形渐变*/
.gradient3 {
background-image: radial-gradient(ellipse, #8ad7c1, #c6c9ff, #fce2ce);
}
/*圆形渐变*/
.gradient4 {
background-image: radial-gradient(circle, #bc6ff1, #ffd5cd, #b6eb7a);
}
重复性径向渐变
是用重复性的径向渐变组成的图像。它与径向渐变的区别在于，它会从原点开始重复径向渐变来覆盖整个元素。
元素转换
旋转函数(transform:rotate(角度edg))：绕原点旋转 其他属性：rotateX()、rotateY()、
移动函数(transform:translate(px,px))：定位 X 轴和 Y 轴的新坐标
其他属性：translateX()、translateY()
缩放函数(transform:scale（number)：沿着 X 轴和 Y 轴缩放
其他属性：scaleX()、scaleY()
CSS3过渡
元素从一种样式逐渐过渡到另一种样式
transition: 指定属性 持续时间 速度曲线 开始时间; (前两个必写)
transition: transform 1s ease-in-out;
动画
@keyframes 被称为关键帧，它能够设置一些元素的样式，让该元素可以从原来的样式渐渐过渡到新的样式中。
@keyframes 动画名 {
0% {样式属性：属性值;}
25% {样式属性：属性值;}
50% {样式属性：属性值;}
100% {样式属性：属性值;}
}
animation: 动画名 完成动画的周期(s) 是否重复;弹性盒子
display: flex 盒子为弹性盒子
flex-direction 弹性子元素在父容器中的排列方向和顺序
| 属性值 | 描述 |
|---|---|
| row | 横向从左到右排列（左对齐），默认的排列方式。 |
| row-reverse | 反转横向排列（右对齐），从后往前排，最后一项排在最前面。 |
| column | 纵向排列 |
| column-reverse | 反转纵向排列，从后往前排，最后一项排在最上面。 |
flex-wrap 弹性盒子的子元素换行方式
| nowrap | 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。 |
|---|---|
| wrap | 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行。 |
| wrap-reverse | 反转 wrap 排列。 |
align-items 弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
| 属性值 | 描述 |
|---|---|
| flex-start | 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。 |
| flex-end | 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。 |
| center | 弹性盒子元素在该行的侧轴（纵轴）上居中放置。 |
| baseline | 如弹性盒子元素的行内轴与侧轴为同一条，则该值与 flex-start 等效。其它情况下，该值将参与基线对齐。 |
| stretch | 如果指定侧轴大小的属性值为 auto，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照 min/max-width/height 属性的限制。 |
align-content 控制多行的对齐方式，一行则不起作用
| 属性值 | 描述 |
|---|---|
| stretch | 默认。各行将会伸展以占用剩余的空间。 |
| flex-start | 各行向弹性盒容器的起始位置堆叠。 |
| flex-end | 各行向弹性盒容器的结束位置堆叠。 |
| center | 各行向弹性盒容器的中间位置堆叠。 |
| space-between | 各行在弹性盒容器中平均分布。 |
| space-around | 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。 |
媒体查询
@media语法
@media mediatype and|not|only (media feature) {
CSS-Code;
}mediatype （媒体类型）取值范围如下：
| 值 | 描述 |
|---|---|
| all | 适用于所有设备 |
| 用于打印机和打印预览 | |
| screen | 用于电脑屏幕，平板电脑，智能手机等 |
| speech | 用于屏幕阅读器等发声设备 |
| 值 | 描述 |
|---|---|
| and | 用于将多个媒体查询规则组合成单条媒体查询，当每个查询规则都为真时则该条媒体查询为真 |
| not | 用来排除某种设备 |
| only | 用以指定某特定媒体设备 |
media feature （媒体特性）常用取值如下：
| 值 | 描述 |
|---|---|
| max-width | 定义输出设备中的页面最大可见区域宽度 |
| max-height | 定义输出设备中的页面最大可见区域高度 |
| min-width | 定义输出设备中的页面最小可见区域宽度 |
| min-height | 定义输出设备中的页面最小可见区域高度 |
| orientation | 视口（viewport）的旋转方向。portrait ：表示 viewport 处于纵向，即高度大于等于宽度 ； landscape ：表示 viewport 处于横向，即宽度大于高度 |
