共计 9305 个字符，预计需要花费 24 分钟才能阅读完成。
目录
目录
一、关于一些显示隐藏类型的相关元素
1.display：定义元素使如何显示的
2.visibility：可见性
二、透明度相关
1.rbga 元素（red，green，blue，不透明度）
2.opacity：不透明度（该元素会继承至子元素，子元素需重新设置透明度）
三、元素的溢出属性
overflow：当元素溢出时，如何进行显示
修改滚动条样式:
四、居中相关
1. 文本水平居中：
2. 文字的垂直居中：
3. 图片的垂直居中对齐：
4. 盒子的水平居中：
5. 盒子的垂直居中：
6. 水平垂直居中：
五、CSS3 的部分补充：CSS3 被拆分为“模块”。旧规范已经拆分为小块，还增加了新的（在 CSS2 的基础上新增了部分属性）
1. 边框属性：
2. 盒子阴影
box-shadow：给盒子设置阴影
可以设置多个阴影，属性使用逗号隔开
3. 背景新增的属性
background-origin：定义背景图的定位区域
background-clip：定义背景的绘制区域
4.CSS3 渐变（该属性是基于 background-image 属性）
5.CSS3 自定义字体
@font-face：定义自定义字体
字体图标的使用：（基于自定义字体而实现）
六、伪元素
七、text-overflow（规定当文本溢出元素时如何显示）
单行文本溢出显示省略号
多行文本溢出显示省略号
八、CSS3 的转换（2D 或 3D 效果）
transform 应用于元素的 2D 和 3D 的转换
旋转
缩放
移动
倾斜 / 斜切
transform-origin：用来改变转换元素的位置 / 轴
嵌套的元素在三维空间中呈现：（transform-style）
3D 效果相关:
1.perspective: 规定 3D 元素的透视效果。
2. perspective-origin 规定 3D 元素的底部位置。
3. backface-visibility 定义元素在不面对屏幕时是否可见。
九、CSS3 的过渡属性
transition 属性：给元素添加过渡效果 简写
property duration timing-function delay（多个样式时间不一致：width 2s,height 5s 使用, 隔开）
transition-delay：什么时候们开始过渡 默认 0
transition-duration：过渡所需要的时间 默认 0
transition-property：用于过渡的属性
transition-timing-function：过渡效果的时间曲线
十、CSS 的动画（创建动画，取代网页中动图，flash 动画以及 js 实现的效果）
animation 属性：调用动画
1.animation-name：规定 @keyframes 动画的名称
2.animation-duration：规定动画完成一个周期所花费的秒或毫秒
3.animation-timing-function：规定动画的速度曲线
4.animation-fill-mode：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式
5.animation-delay：规定动画何时开始
6.animation-iteration-count：规定动画被播放的次数
7. animation-direction：规定动画是否在下一周期逆向地播放
8.alternate
9.animation-play-state 规定动画是否正在运行或暂停（默认为 running）
一、关于一些显示隐藏类型的相关元素
1.display：定义元素使如何显示的
block：显示元素
none：隐藏（不占位，会导致文本内容出现格式变化）
常用于创建绝对定位下的下拉菜单或蒙版。
2.visibility：可见性
visible：元素是可见的（默认值）
hidden：元素不可见（占位，隐藏时不会导致文档出现内容变化，相当于将元素设置为透明）
二、透明度相关
1.rbga 元素（red，green，blue，不透明度）
作为元素的颜色属性值进行使用，常用于 color 或 bgcolor 属性中。
该元素不会继承至子元素，且较多用于蒙版。
2.opacity：不透明度（该元素会继承至子元素，子元素需重新设置透明度）
value：0 到 1（0 为完全透明，1 为完全不透明）
三、元素的溢出属性
overflow：当元素溢出时，如何进行显示
| visible（默认值） | 内容不被修剪，呈现在元素框之外 |
| hidden（隐藏） | 内容被裁剪，并且多余的内容不可见 |
| scroll（滚动条） | 内容会被修剪，浏览器会显示滚动条以便查询其余的内容，且不管是否被修剪都会显示滚动条 |
| auto | 如果内容被修剪，浏览器则会显示滚动条 |
修改滚动条样式:
1.webkit-scrollbar 滚动条整体部分
2.webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂 直滚动条还是水平滚动条）
3.webkit-scrollbar-track 滚动条的轨道（里面装有 Thumb）
4.webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
5.webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
6.webkit-scrollbar-corner 边角，即两个滚动条的交汇处
7.webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
四、居中相关
1. 文本水平居中：
1.text-align：center 给盒子（父元素）/ 块级元素设置，图片也属于文本
2.padding：设置导航，按钮，菜单等类的内边距
2. 文字的垂直居中：
line-height: 数值，将文字的行高设置为当前父元素的高
margin：不占背景色
padding：占背景色
3. 图片的垂直居中对齐：
margin-top: 设置数值
图文对齐：
vertical-align：middle 图片和文字的中线对齐，可以通过 line-height 调整文字的行高
float：给图文设置浮动，同时给文字设置行高为图片的高度。
4. 盒子的水平居中：
1.margin：0 auto；0 可以设置为自己需要的数字，进行上下调整，auto 为自动计算使文本居中
2. 定位：给子元素绝对定位，数值设置为 left：50%；margin-left：自身宽的负 50%
5. 盒子的垂直居中：
1.margin：数值；通过计算来设置具体数值进行居中
2. 定位：给子元素绝对定位，数值设置为 top：50%；margin-left：自身高的负 50%
6. 水平垂直居中：
子元素相当于父元素的绝对定位：
top:0;
left:0;
right:0;
bottm:0;
margin:auto;
五、CSS3 的部分补充：CSS3 被拆分为“模块”。旧规范已经拆分为小块，还增加了新的（在 CSS2 的基础上新增了部分属性）
1. 边框属性：
1)border-radius：设置元素的圆角
2) border-image：设置所有边框图像
| border-image-source | 指定用于边框图片的路径 |
| border-image-slice |
图像边界向内偏移 number（像素） % 相对于图片大小的百分比 |
| border-image-width |
图像边界的宽度 number（border-width 的倍数） % 相对于图片大小的百分比 |
| border-image-outset |
指定边框外部绘制图像的面积 length：px rem em 边框与边框图像的距离 number：border-width 的倍数 |
| border-image-repeat |
用于设置图像边界是否重复 |
3）border-image-repeat：
tretch 默认值。拉伸图像来填充区域
repeat 平铺（repeated）图像来填充区域
round 类似 repeat 值。如果无法完整平铺所有图像，则对图像进行缩放以适应区域
space 类似 repeat 值。如果无法完整平铺所有图像，扩展空间会分布在图像周围
2. 盒子阴影
box-shadow：给盒子设置阴影
h-shadow：水平阴影位置 必需 可以是负值
v-shadow：垂直阴影位置 必需 可以是负值
blur：模糊范围 / 距离
spread：阴影的大小
color：阴影的颜色
inset：内侧阴影
可以设置多个阴影，属性使用逗号隔开
3. 背景新增的属性
background-image：插入背景图片
background-size：设置背景图的大小
background-origin：定义背景图的定位区域
| padding-box | 默认的 从 padding 开始填充 |
| border-box | 从边框开始填充 |
| content-box | 只填充在内容区域 |
background-clip：定义背景的绘制区域
| padding-box | 默认的 从 padding 开始填充 |
| border-box | 从边框开始填充 |
| content-box | 只填充在内容区域 |
4.CSS3 渐变（该属性是基于 background-image 属性）
1）线性渐变：linear-gradient 从点到点：
linear-gradient(direction/angle,color-stop1,color-stop2,…) 创建一个线性渐变的图像
direction：方向 默认自上而下 to bottom/left /right/top
angle：角度 deg 单位
2）径向渐变：radial-gradient 从点到四周
radial-gradient(shape size at position,start-color,…last-color) 创建一个径向渐变的图像 (center 同 edges)
shape：定义形状 circle(圆形) ellipse(默认 椭圆)
size：大小
position：位置 top bottom left right center（默认）
坐标：
farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角
closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边
closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边
3）重复渐变
repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, …) 创建
重复的线性渐变图像
repeating-radial-gradient() 创建重复的径向渐变图像
5.CSS3 自定义字体
使用除自带字体以外的字体
字体图标库
@font-face：定义自定义字体
@font-face
{
font-family: 必需 定义字体名称
src: 必需 定义字体的路径
font-style: 设置字体的样式
font-weight: 设置字体的粗细
font-stretch: 设置字体如何拉伸
}
字体图标的使用：（基于自定义字体而实现）
1. 下载自定义字体库 ==》2. 引用字体库 ==》3. 使用自定义字体
2. 下载自定义字体库：阿里矢量图标库（选择自己需要的图标，添加购物车，下载代码，包含字体库）
3. 引用字体库（阿里矢量图标库，@font-face{font-family: 字体库名字;src: 字体库地址}）
4. 使用自定义字体（html 标签中使用）
六、伪元素
1.before：在元素之前插入内容，给元素添加子元素
2.after：在元素之后插入内容
:after/before
{
content:"";
disable:block/inline;
...
}插入伪元素时可以添加各种属性，且插入该元素可以清除浮动，常用于字体图标库
七、text-overflow（规定当文本溢出元素时如何显示）
| initial | 设置为默认值 |
| clip | 裁剪文本 |
| ellipsis | 显示省略号，代替被修剪的文本 |
| string | 使用特定的字符串代表被修剪的文本（只针对火狐浏览器） |
单行文本溢出显示省略号
.text
{
white-space: nowrap;
/* 文本不换行 */
overflow: hidden;
/* 溢出隐藏 */
text-overflow: ellipsis;
/* 文本溢出部分被省略号代替 */
}多行文本溢出显示省略号
.text{
overflow: hidden;
/* 溢出隐藏 */
display: -webkit-box;
/* 兼容到使用 webkit 内核的浏览器 */
-webkit-line-clamp: ;
/* 显示的最大行数 */
-webkit-box-orient: vertical;
/* 设置垂直方向上排列 */
text-overflow: ellipsis;
/* 文本溢出部分被省略号代替 */
}八、CSS3 的转换（2D 或 3D 效果）
transform 应用于元素的 2D 和 3D 的转换
旋转
rotate()：定义 2D 的旋转 单位 deg
rotateX()：沿 X 轴旋转
rotateY()：沿 Y 轴旋转
rotateZ()：沿 Z 轴旋转
rotate3d(x,y,z,deg)：定义 3D 的旋转 0/1,0/1,0/1, 角度
缩放
scale() 定义 2D 的缩放
scaleX() 沿着 X 轴的缩放
scaleY() 沿着 Y 轴的缩放
scaleZ() 沿着 Z 轴的缩放
scale3d(x,y,z) 定义 3D 的缩放
移动
translate() 定义 2D 的移动
translateX() 沿着 X 轴移动
translateY() 沿着 Y 轴移动
translateZ() 沿着 Z 轴移动
translate3d() 定义 3D 的移动
倾斜 / 斜切
skew()：定义 2D 的倾斜
skewX()：沿着 X 轴倾斜
skewY()：沿着 Y 轴倾斜
transform-origin：用来改变转换元素的位置 / 轴
x：left right center px %
y：top bottom center px %
z：px
嵌套的元素在三维空间中呈现：（transform-style）
flat：所有子元素在 2D 平面中呈现
preserve-3d：所有子元素在 3D 空间中呈现
3D 效果相关:
1.perspective: 规定 3D 元素的透视效果。
none：默认值 不设置透视 0
number：元素距离透视的距离，像素
2. perspective-origin 规定 3D 元素的底部位置。
x：left center right px %
y：top center bottom px %
3. backface-visibility 定义元素在不面对屏幕时是否可见。
visible：背面可见
hidden：背面不可见
九、CSS3 的过渡属性
给元素添加一个效果，从一个样式过渡到另一个样式，是使用 css 的方式来实现某些 js 的效果
transition 属性：给元素添加过渡效果 简写
property duration timing-function delay（多个样式时间不一致：width 2s,height 5s 使用, 隔开）
transition-delay：什么时候们开始过渡 默认 0
transition-duration：过渡所需要的时间 默认 0
transition-property：用于过渡的属性
none：默认
property：具体的属性
all：所有的属性
transition-timing-function：过渡效果的时间曲线
linear 规定以相同速度开始至结束的过渡效果。
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果。
ease-in 规定以慢速开始的过渡效果。
ease-out 规定以慢速结束的过渡效果。
ease-in-out 规定以慢速开始和结束的过渡效果。
十、CSS 的动画（创建动画，取代网页中动图，flash 动画以及 js 实现的效果）
@keyframes name
{
0%{
width:;
color:;
}
10%{
width:;
color:;
}
20%{
width:;
color:;
}
100%{
width:;
color:;
}
} name：动画的名称（必需的）
0%-100% 设置帧（from=0%，to=100%）
在其中设置 css 样式即可创建关键帧动画
animation 属性：调用动画
属性排列：animation: name duration timing-function delay iteration-count direction fill-mode play-state
1.animation-name：规定 @keyframes 动画的名称
none：没有动画
keyframename：调用动画的名称
2.animation-duration：规定动画完成一个周期所花费的秒或毫秒
number 设置数值，默认是 0。
3.animation-timing-function：规定动画的速度曲线
linear 规定以相同速度开始至结束的过渡效果。
ease（默认）规定慢速开始，然后变快，然后慢速结束的过渡效果。
ease-in 规定以慢速开始的过渡效果。
ease-out 规定以慢速结束的过渡效果。
ease-in-out 规定以慢速开始和结束的过渡效果。
4.animation-fill-mode：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式
none 默认值。动画在动画执行之前和之后不会应用任何样式到目标素。
forwards 在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。
backwards 动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当 animation-direction 为 “normal” 或 “alternate” 时）或 to 关键帧中的值（当 animation-direction 为 “reverse” 或 “alternate-reverse” 时）。
both 动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。
5.animation-delay：规定动画何时开始
默认是 0
6.animation-iteration-count：规定动画被播放的次数
默认是 1
number：动画执行的次数
infinite：无限循环
7. animation-direction：规定动画是否在下一周期逆向地播放
默认是 “normal”。效果为正常播放
reverse 动画反向播放。
8.alternate
该行代码表示动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放
alternate-reverse 动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放
9.animation-play-state 规定动画是否正在运行或暂停（默认为 running）
pasued：指定暂停动画
原文地址: 前端：HTML CSS 阶段的一些补充
