简单写一些CSS基础运用

display 属性：（规定如何去显示元素）

通常元素都是默认显示的，在一些场景下。我们需要将该元素，或者该元素的一部分隐藏

display:none，隐藏元素并且不占据空间，仿佛页面中根本不存在一样

display:hidden，隐藏元素但会占据空间，虽然看不见但只是被隐藏，会影响布局

position （对元素进行定位）

        正常定位都是通过top、bottom、left 和 right 属性定位的 。但是，除非首先设置了 position 属性，否则这些属性将不起作用，并且根据不同的 position 值，它们的工作方式也不同。

static(静态定位) relative(相对定位) fixed(固定定位) absolute (绝对定位) sticky（粘性定位）

设置 position: static; 其元素不会以任何特殊方式定位；它是始终根据页面的正常流进行定位
设置 position: relative; 其元素相对于其正常位置进行定位
设置 position: fixed; 其元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：
设置 position: absolute; 其元素会相对于最近的定位祖先进行定位（而不是相对于视口进行定位）
设置position: sticky; 其元素根据用户的滚动位置进行定位。

tip：值得注意的是，粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。
起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。
z-index 属性指定元素的堆栈顺序（哪个元素应放置在其他元素的前面或后面）。如果两个定位的元素重叠而未指定 z-index，则位于 HTML 代码中最后的元素将显示在顶部。

Overflow（对元素溢出进行处理）

overflow 属性指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条。
overflow 属性可设置以下值：
visible - 默认，溢出没有被剪裁，内容在元素框外渲染
hidden - 溢出被剪裁，其余内容将不可见
scroll - 溢出被剪裁，同时添加滚动条以查看其余内容
auto - 与 scroll 类似，但仅在必要时添加滚动条

tip：overflow 属性仅适用于具有指定高度的块元素。 

元素对齐方式

margin: 0 auto，块元素（例如 <div> ）水平居中对齐
text-align: center，在元素内居中文本
padding，通过设定同等上下内边距，实现垂直居中对齐
line-height，通过设定行高与给定高度相等，实现垂直居中对齐

伪类

伪类用于定义元素的特殊状态

/* 未访问的链接 */
a:link {
  color: #FF0000;
}

/* 已访问的链接 */
a:visited {
  color: #00FF00;
}

/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}

/* 已选择的链接 */
a:active {
  color: #0000FF;
}

tip: 如果需要同时使用以上多个伪类，则必须按照以上顺序进行使用，具体原因可自行尝试

：hover（鼠标悬停）可以搭配opacity（透明度）进行使用，如下：

img {
  opacity: 0.5;
}

img:hover {
  opacity: 1.0;
}

CSS伪类有很多，在此只对伪类进行体验式介绍，有兴趣可在CSS 伪类 | 菜鸟教程 (runoob.com)进行学习

border-radius（修改元素的角样式）

通过 CSS border-radius 属性，可以实现任何元素的“圆角”样式。
border-radius 属性定义元素角的半径。
四个值 - border-radius: 15px 50px 30px 5px;（依次分别用于：左上角、右上角、右下角、左下角）：
两个值 - border-radius: 15px 50px;（第一个值用于左上角和右下角，第二个值用于右上角和左下角）：
一个值 - border-radius: 15px;（该值用于所有四个角，圆角都是一样的）

linear-gradient（背景色渐变） 

线性渐变 - 从上到下（默认）

.bg{
  background-image: linear-gradient(red, yellow);
}

线性渐变 - 从左到右

.bg{
  background-image: linear-gradient(to right, red , yellow);
}

也可以通过指定水平和垂直起始位置来实现对角渐变

下面的例子展示了从左上角开始（到右下角）的线性渐变。它从红色开始，过渡到黄色：

.bg{
  background-image: linear-gradient(to bottom right, red, yellow);
}

当然，涉及到背景颜色还能想到rgba的透明

.bg {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

 text-shadow（文字阴影）

分别对应，上下，左右，模糊范围，颜色

h1 {
  text-shadow: 2px 2px 5px red;
}

如需在文本中添加多个阴影，可以添加以逗号分隔的格式

下面的例子展示了红色和蓝色的霓虹灯发光阴影：

h1 {
  text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

CSS 2D转换

//函数                                     //描述
matrix(n,n,n,n,n,n)          //定义 2D 转换，使用六个值的矩阵。
translate(x,y)               //定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)                //定义 2D 转换，沿着 X 轴移动元素。
translateY(n)                // 定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)                   //定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)                    //定义 2D 缩放转换，改变元素的宽度。
scaleY(n)                    //定义 2D 缩放转换，改变元素的高度。
rotate(angle)                //定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)        //定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)                 // 定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)                 //定义 2D 倾斜转换，沿着 Y 轴

CSS 3D转换

//函数                            //描述
matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n)            //定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)              //定义 3D 转化。
translateX(x)                   //定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)                   //定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)                   //定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z)                  //定义 3D 缩放转换。
scaleX(x)                       //定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)                       //定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)                       //定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)           //定义 3D 旋转。
rotateX(angle)                  //定义沿 X 轴的 3D 旋转。
rotateY(angle)                  //定义沿 Y 轴的 3D 旋转。
rotateZ(angle)                  //定义沿 Z 轴的 3D 旋转。
perspective(n)                  //定义 3D 转换元素的透视视图。

transition（过渡）

transition-delay                   规定过渡效果的延迟（以秒计）。
transition-duration                规定过渡效果要持续多少秒或毫秒。
transition-property                规定过渡效果所针对的 CSS 属性的名称。
transition-timing-function         规定过渡效果的速度曲线。