css的基础知识sharing定位常用的有四种，包括静态定位、绝对定位、相对定位、固定定位。若设置静态定位，则显示方

Html标签分类（补充）

块级元素：元素自己独占一行 ,可以设置宽度和高度如果两个块级元素嵌套，子元素若没有设置宽度，那么元素的宽度与父元素一样（p div h ul li）
行内元素: 所有元素都在一行显示，行内元素的宽度就是其内容的宽度（所以没办法设置居中）不能直接设置宽和高(span a strong)
行内块元素：所有元素在一行显示，可以设置宽和高(img input) 模式的转换: display: block; [以块级元素显示] display: inline-block; [以行内块显示方式显示] dispaly: inline; [以行内部元素的方式显示]

CSS中的定位简介

定位常用的有四种，包括静态定位、绝对定位、相对定位、固定定位。

静态定位（position: static）：若设置静态定位，则显示方式为标准流的显示方式。
绝对定位(position: absolute)：
①如果一个单独的元素，设置绝对定位，那么元素，以浏览器左上角为基准设置定位。
②如果一个元素的父元素，没有设置定位，则该元素以浏览器左上角为准设置定位。
③如果一个元素的父元素，设置定位（除了静态定位以外）那么子元素，会以父元素左上角为准设置定位。

绝对定位的特点：
①设置绝对定位的盒子会脱离标准流。
②绝对定位可以实现模式转换。
③绝对定位的元素不占位置。用完定位的元素，仍然可以使用盒模型。

相对定位(position: relative)：如果一个元素设置了相对定位，那么该元素只会参照自己的位置设置定位（与父元素是否定位无关）

相对定位的特点：
①元素设置了相对定位，该元素没有脱标，仍占原来的位置。
②不能实现模式转换

固定定位(position: fixed)：如果设置固定定位的元素，只会看浏览器的左上角可是区域进行定位。

固定定位的特点：
①设置固定定位的元素会脱标（不占位置）
②可以实现模式转换

层级（z-index）

定位，不得不说层级关系。 z-index的值越大，层级就越高。

使用层级的必要条件：

①只有定位的元素才有，层级关系，她的值只能是整数

层级的特点：

①定位的盒子的层级会高于标准的盒子
②如果两个定位的盒子在一起显示，那么后面的定位的盒子会压着前面定位的盒子，后来者居上
③如果两个子元素的父元素都设置了定位，那么首先要看两个父元素的值。

居中的方式：

对于脱标的盒子
① 首先子元素走父盒子宽度的一半
② 再往回走子元素自己宽度的一般

例如： position:  absolute;
      left:  50%;
      margin-left:  -150px;(假设子盒子的宽度是300)

CSS3 2D转换（简介transition和animation）

2D平面上的移动、旋转、缩放、斜切

移动： transform: translate(x轴, y轴)
分开来写： transform: translatex(); transform: translateY()
参数：可以是px 也可以是百分比
目的：(实现居中)
我们可以通过盒子的绝对定位配合transform：translate（-50%，-50%）实现一个没有宽度高度的盒子水平垂直居中 ,如果没有宽度的话，盒子最大的宽只能达到父盒子的一半

/*内容垂直水平居中*/
.content-center{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
/*内容垂直居中*/
.content-vertical-center{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
/*内容水平居中*/
.content-horizontal-center{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

旋转： transform: rotate(xxdeg)
方向：正值是顺时针，负值是逆时针
中心点：可以控制 transform-origin:left center/ 100px 100px/ 50% 70%
缩放：transform: scale();
分开来写：transform: scaleX(); transform: scaleY();
参数：可以接受小数，可以是具体的倍数
中心点：可以控制
斜切： transform: skew()
中心点：可以控制
作用：(比如将长方形变成四边形）

这些效果可以并存的例： transform: rotate(360deg) scale(2)
过渡（transition)
它不是动画，只是CSS由一种状态到另外一种状态的变换过程
用的地方：那个元素需要变化，就可以给那个元素加上
使用：transition: all 1s [简写的一种方式，涉及到的所有的属性都会在h1s完成]
动画（animation）
性能特别好，特别是对移动端，因为它底层是c++,而其他的定时器，所以但凡不是功能性的动画就用css3
animation的参数：{
①：自定义动画名
②：运行的时间
③：运动的曲线
④：延时执行的时间
⑤：循环的次数
⑥：是否逆序播放（默认是normal）[逆序 alternal]
⑦：播放的状态（默认是running）[暂停是 paused]
⑧：动画最后停止的位置 [forwards 让动画停止在最后一帧]
}

@前缀keyframes 自定义的动画名{
0%{
 //css语句
 }
...
100%{
//css语句
}
}

例如：
.flyIn-flyOut {
  animation: flyIn 0.3s linear forwards, flyOut 0.3s linear 3s forwards;
  -webkit-animation: flyIn 0.3s linear forwards, flyOut 0.3s linear 3s forwards;
}

@keyframes flyIn {
  0% {
    top: 2rem;
    right: 75rem;
  }
  100%{
    top: 2rem;
    right: 1rem;
  }
}

css的盒子阴影

box-shadow: 水平上的偏移 垂直上的偏移  羽化的大小（模糊） 阴影的尺寸  阴影的颜色  内阴影或者外阴影
box-shadow:  20px  50px  30px  red  inset
(阴影可以简写但是有些值需要补0)

CSS3私有前缀

作用：兼容低版本的一些高级浏览器，或者一些特定的css3属性需要添加私有前缀才起作用 每一条css3属性合理来说都需要添加对应浏览器的前缀，以保证其兼容性
谷歌 苹果：-webkit- 火狐：-moz- IE：-ms- o：-o- 小细节：在手机端，一般来说只需要写一个-webkit-（针对国内的绝大部分手机端）
添加的位置：大部分都是直接添加到最前面，css2没有的属性都是添加在最前面的，有一些是css2就有的属性是添加在后面的（background：-webkit-linear-gradient（））

css 伪元素（::before ::after）

作用：渲染一个虚拟的标签插入到当前元素内部的前边或者后边，它并没有真实的存放在DOM里，默认是行内元素。

例：.className::before{
          content:  ''  ======>这个属性不可以省略，还可以添加别的样式
            }

常用的案例：可以代替某些标签来完成一些ICON.好处是：不开销DOM，但是伪元素是不存在的，JS获取不到它，但是我们仍然可以使用利用window.getComputedStyle方法选择到伪元素，然后利用getPropertyValue方法获取对应的属性的值。

CSS的常见规范以及CSS命名规范 [cascading style sheets]

CSS的特性

①层叠性：发生层叠的前提是标签的权重一样时，其样式发生冲突时，最后定义的样式会将前边定义的样式覆盖掉，与样式中类的调用的顺序无关。

②继承性：子元素的样式会使用父元素的样式，但是只有发生嵌套关系的时候，才会发生继承，与文字相关的属性都会被继承

③优先级： !important > 行内样式 > id选择器 > 类选择器 > 标签选择器
```
  1.继承的权重为0
  2.权重会叠加（举个小栗子： 类名+id名 > id名）
```
CSS的书写方式

  ①外联式写法 link  rel="stylesheet"  type="text/css"  href=“xxxx.css”> 
      影响的范围较广，整个网站站点，实现了结构和样式的完全分离，代码维护性高
  ②内嵌式写法 <style  type="text/css">css代码</style>
       影响的范围只有当前页面，没有实现结构与css的完全分离（当一般页面中的样式代码会很少的时候使用）
  ③行内式写法 <p  style="color:  red"></p>  【不推荐】
       只会影响当前的标签样式，完全没有实现结构和样式的分离

命名的要求（前提）

W3C CSS2.1的 4.1.3 节中提到：标识符（包括选择器中的元素名，类和ID）只能包含字符[a- zA-Z0-9]和ISO 10646字符编码U+00A1及以上，再加连字号（-）和下划线（_）；它们不能以数字，或一个连字号后跟数字为开头。它们还可以包含转义字符加任何ISO 10646字符作为一个数字编码。

类名可以使用汉字但是不推荐，不能使用纯数字或者数字开头，不能使用特殊符号开头，"_"这个除外【我的简短总结】。
区分id和class

class: 一个标签可以同时调用多个类名，多个标签可以同时调用一个类样式

id: 一个标签只能调用一个id样式，页面中的每一个标签的id名称必须唯一
CSS文件中class或id起名规则：

① 用class_name方式写类名

② 样式一般都用class而不用id，因为id不可以重复，但是class却可以被重复使用。id的优先级比class的要高，若是写了一个#link{color: red}，如果需要修改里边的样式，都必须加上#link才能越过这个优先级。

③ id选择器一般是配合JS使用，这样才符合表现与行为分离的原则。所以id可以选择驼峰式命名法。
margin和padding的缩写形式代码的量的减少也可以有利于页面的优化，对于margin，padding的使用也是大有文章。以内边距padding为例：

  padding:  10px  (表示上下左右都是10px)
  padding： 10px  20px  (表示上下是10px,左右是20px)
  padding:  10px  20px  30px (表示上是10px,左右20px,下是30px)
  padding:  10px  20px  30px  40px  (表示上是10px  右是20px  下是30px  左是40px)

语义化标签

语义化标签是个很大的话题，简单点说，语义化标签就是让css选择器的命名能够反映页面结构的功能区块，如内容区域的class类名定义为content，页脚区域的class类名定义为footer。语义化标签的一个好处是让网页结构一目了然，另外一个好处是提高网页对一些特殊浏览设备的友好性。语义化标签的一个误区是按CSS样式表现的结果命名。从深层层次分析，CSS的出现是让HTML只专注于结构，实现网页结构和样式的分离，这也是CSS能够代替表格布局而风靡的重要原因。按CSS样式表现结果命名，实际上是让HTML结构和CSS产生强耦合，是违背结构和样式分离的。因此我们命名的时候尽量要以不是经常变化的事物进行命名，比如HTML的某块区域的功能以及在页面中显示的位置。

css的基础知识sharing