CSS3

---

一、选择器：

!important ---行间---id---属性、类、伪类---标签、伪元素---*

关系选择器：

• E+F 后一个满足条件的兄弟元素结点
• E~F 后面所有的满足条件的兄弟元素节点

属性选择器：

• E[attr^="val"] 满足条件，开头是val
• E[attr$="val"] 满足条件，结尾是val
• E[attr*="val"] 满足条件，有val
• E[attr~="val"] 满足条件，并且属性值里有单独的属性val的元素
• E[attr|="val"] 满足条件，开头为val,或val-

伪类选择器：伪类选择器是选中的元素的状态

• E:not() 满足条件，并且不是括号里的
• E:root 根标签，包括html。注意：root只是等于html,它不等于*
• E:target 被选中的目标，被锚点所标记。哪个标签被标记了，哪个标签就变成了target状态。

下面5个全部考虑他的父级元素其他的孩子对他的影响

• E:first-child
• E:last-child
• E:only-child
• E:nth-child()
• E:nth-last-child()

下面5个不考虑它父级元素的其它孩子对它的影响

• E:first-of-type
• E:last-of-type
• E:only-of-type
• E:nth-of-type()
• E:nth-of-last-type()

odd奇数、even偶数

• E:empty 被选中的元素里面为空，空格不为空，注释为空
• E:checked
• E:enabled
• E:disabled
• E:read-only
• E:read-write

伪元素选择器：

• E::placeholder 给文本框设置提示文字
• E::selection 给选中的文本设置样式， 只能设置三个样式：color\background-color\text-shadow

二、border-radius

• border-radius：

  • 4个值：左上、右上、右下、左下
  • 3个值：左上、右上左下、右下
  • 2个值：左上右下、右上左下
  • 1个值：所有

• border-top-left-radious: 水平 竖直

• border-top-right-radious:

• border-bottom-right-radious:

• bordr-bottom-left-radious: 以上四个都可以填一个或两个值。

• 还有一种写法，/前面代表4个角的水平方向，/后面的值代表4个角竖直方向的值
  border-radious:10px 20px 30px 40px / 10px 20px 30px 40px

三、box-shadow

• box-shadow:[inset] 0px 0px 0px 0px #fff;

  • 默认为外阴影，设置内阴影要加inset
  • 第一个值代表水平方向的位移距离，正值往右移动，负值往左移动
  • 第二个值代表竖直方向的位移距离
  • 第三个值代表影子的模糊程度，并且模糊是从边界向两边模糊，是向两个方向的。
  • 第四个值代表影子放大的像素，注意：这里的放大是向上下左右都放大，即宽高增大了像素值的两倍

  背景颜色在影子下面，文字在影子上面。

四、border-image

• border-image: 可以合在一起填下面的五个值。
• border-image-source
• border-image-slice: 只能填数字，不能填像素。默认值为1
• border-image-repeat:stretch\round\repeat\space
• border-image-width: 设置背景图片的宽度，类似于border-width
• border-image-outset: 设置背景图片往外扩展的像素

五、background

• background-color: 默认值为transparent

• background-image:url(), url()
  可以写两个url,第二个url是防止第一个url里面的图片加载不出来 或者路径写错了。

• background-origin: 背景图片的起始位置，只可以设置三个值

  • 默认为padding-box
  • border-box padding-box content-box

• background-clip: 截取的意思，把设置的值以外的部分给截取掉，只显示值以里的部分。

  • 默认为border-box
  • border-box、padding-box、content-box
  • 还有一个值：text,需要配合其他属性使用。

    - -webkit-text-fill-color:transparent;
    - text-fill-color:transparent
    - -webkit-background-clip:text;
    - background-clip:text;
    

• background-size: 默认值为auto

  • auto图片真实大小
  • cover图片等比缩放，一边对齐，另一边大
  • contain图片等比缩放，一边对齐，另一边小

• background-position: 设置位置

• background-repeat: 是否复制

  • repeat、no-repeat、round、space
  • round和space可以组合使用，前后分别代表水平和竖直

• background-attachment: 默认值为scroll。他可以和background-position配合着使用，假设值为center center

  • scroll: 背景图片的位置center是根据元素进行定位的
  • local: 背景图片的位置center是根据内容来进行定位的。
  • fixed: 背景图片的位置center是根据视口(即屏幕)来进行定位

  liner-gradient:
  circle-gradient:

六、text

• 外加几个不是c3中但和文本相关的：font-size、font-weight、font-style、font-family、text-align、text-decoration、text-indent、text-overflow：ellipsis、letter-spacing

• text-shadow: 给字体设置阴影

  • 当设置 -webkit-background-clip:text; 这时字体就变成背景了，所以阴影就会在这个字体的上面。
  • -webkit-text-stroke:2px red; 给字体描边，只能在google浏览器里面使用。

• text-family:simsun; 这是一个很特殊的字体，可以将字体一层层的描边，而且是往里描。

  @font-face{     //加载字体包
          text-family:"abc"  //可以给加载的这个字体包中的字体取名字，名字叫abc
          src:url("")  //字体包的下载地址
  }
  

• white-space: 空白处理是问你是否换行

  • nowrap: 不换行
  • pre: 当设置这个属性时，标签里面的文本有多少空格就是多少，有换行就是换行，保留文本原来的格式

• word-break:段词规则是问你在什么位置换行，而不是问你换不换行

  • normal/keep-all/break-all/break-word
  • keep-all: 和nowrap差不多，不要换行
  • break-all: 换行，但是一个单词它也会拆封开来换行，不会让单词保留完整性
  • break-word: 换行，但是尽量保持单词的完整性，当一行剩下的部分不够一个单词长度时，就会另起一行，如果完整的一行也不够，那就只能换行。

• word-wrap: break-word
  这个和word-break里面的break-word一样。

• text-align-last: 和text-align差不多，但是实现的是最后一行

• vertival-align:

七、column

• columns: 写两个值（每一列的宽度，列数）
  • 不适合做瀑布流，适合做翻页功能
• column-width: 每一列的宽度，但是非常不准，他会随着父级宽度的变化，而每一列的宽度也会变化。
  • 用column-width的时候，可以加一个父级，将父级的宽度先固定，这样在给子元素设置column-width值的时候，就不会变化了。
• column-count: 列数
• column-gap: 每列之间的距离
• column-rule: 给每列之间加一个竖线，和border一样，也是复合属性（column-rule-width\style\color）
• column-span: 值为1到all
  • 贯穿每一个列，可以设置标题，比如一个大标题下面有几个列
• -webkit-column-break-before: always 在相应内容的前面另起一列
• -webkit-column-break-after: 在相应内容的后面另起一列 这两个属性不常用

八、盒模型、overflow、resize

盒模型

• box-sizing:
  • content-box: 默认值
  • border-box: width=2 * border-width + 2 * padding + content;

overflow

• overflow: 默认值为visible
  • visible
  • hidden
  • scroll: 溢出部分加滚动条，设置了之后不溢出也有滚动条区域
  • auto: 当不溢出的时候不加滚动条，溢出的时候再加滚动条
• overflow-x:
• overflow-y: 当这两个值当中只有一个设置了值，且不是默认值，则另一个值就会自动变为auto。

resize

• resize: 可以拖拽来改变容器的大小。并且这个属性不能单独使用，要想用必须给容器设置overflow属性，随便设置哪个值。
  • none
  • both
  • horizontal: 水平方向
  • vertical: 竖直方向

九、弹性盒子：

添加在父级元素上的属性：

• display
  • flex: 后面不能加元素
  • inline-flex: 后面可以加元素
• flex-direction: 设置主轴方向
  • row: 从左向右
  • row-reverse: 从右向左
  • column: 从上到下
  • column-reverse: 从下到上
• flex-wrap: 设置换行
  • wrap: 换行
  • nowrap: 不换行
  • wrap-reverse: 从下到上换行
• flex-flow: 复合属性
  • 第一个值设置flex-direction 第二个值设置flex-wrap
• justify-content: 设置主轴的对齐方式
  • flex-start\flex-end\center\space-between\space-around
• align-items: 设置交叉轴对齐方式，针对 单行元素 来处理对齐方式
  • flex-start
  • flex-end
  • center
  • baseline
  • stretch: 在交叉轴方向上没有设置长度的话，那就把它拉伸到容器的长度。
• align-content: 设置交叉轴对齐方式，针对 多行元素 来处理对齐方式
  • 注意这里对于单行来说不起任何效果
  • flex-start
  • flex-end
  • center
  • space-between
  • space-around
  • stretch

添加在子元素上的属性：

• order: 默认值0，设置元素的排列顺序
  • 值越小越排在前面
• align-self: 设置交叉轴方向的对齐方式
  • 如果父级设置了align-items，那么听自己align-self的，如果父级设置了align-content,那么听align-content的。
  • auto
  • flex-start
  • flex-end
  • center
  • baseline
  • stretch
• flex: 复合值 flex-grow flex-shrink flex-basis
• flex-grow: 默认值0，0代表不拉长
  • 给每一个子项设置一个值，然后把主轴方向上剩余的部分按照比例瓜分给子项
• flex-shrink: 默认值1，如果为0，就不参与压缩
  • 压缩的是内容区，被撑开的容器，就不参与压缩了。
  • 公式：（真实内容区大小 * shrink值 ）/ 超过的总长度 == 要压缩的内容区大小
• flex-basis: 默认值auto
  • auto：即没有特定的宽度，宽度取决于其他的属性值。
  • 只写flex-basis或者flex-basis的值>width，代表元素的最小宽度
  • 同时设置了basis和width,并且basis<width，那么basis代表最小宽度，width代表最大宽度

十、过渡

• transition: 监听哪个属性, 过渡时间, 运动状态函数, 等待时间

• transition-property: all 监听哪一个属性的改变

  • 这里可以填多个属性，属性之间用逗号隔开

• transition-duration: 1s 设置过渡的时间

• transition-timing-function: linear 运动状态函数

• transition-delay: 默认为0 设置等多长时间在执行这个过渡。

• cubic-bezier: 三次-贝塞尔曲线：

  • x轴只能在0和1之间，y轴随便

十一、动画

• 先设置关键帧

@keyframes 关键帧名{
        0%{}    //0%可以换为from
        50%{}
        100%{}  //100%可以换为to
}

当动画执行结束时，元素会回到未执行动画之前的原始位置。

• animation: 复合值，后面可以写多个关键帧，要用逗号隔开。
• animation-name
• animation-duration
• animation-timing-function: 这里定义的运动状态是动画每一段的运动状态，而不是整个动画的运动状态。
  • steps(num, end|start): 直接跳到下一个状态，没有过度效果
    • num: 不是1是n的话，他就会从一个状态变为下一个状态时，在中间分为n段来执行。
    • end: 保留当前帧状态，直到这段动画时间结束
    • start: 保留下一帧状态，直到这段动画时间结束
  • step-end: === steps(1, end)
  • step-start: === steps(1, start)
• animation-delay
• animation-iteration-count: 默认值为1, 值为infinite,动画就会无限循环
• animation-direction: reverse\alternate
  • reverse:倒着执行动画
  • alternate:先正着执行一次，然后再倒着执行一次。animation-iteration-count的值应该为2
• animation-play-state:
  • running
  • paused
• animate-fill-mode: 默认值为none
  • forwards: 设置动画结束时保持最后一帧的状态
  • backwards: 设置动画结束时保持最后一帧的状态
  • both: 开始和结束

十二、transform 变换：

• transform-origin: 变换中心，默认值为50% 50%，即center center
  • 设置元素以某个原点进行变换
  • 将整个坐标进行移动，设置的值是坐标原点的位置
  • 设置两个值，就是原点在平面上。
  • 设置三个值，就是空间上的一点。
• transform: transform有多个属性值

1. 旋转

• 注意在平面上旋转的时候是以原点作为旋转点旋转的（通过transform-origin调整原点的位置）,而在空间旋转的时候是以某一条直线作为旋转轴旋转的
• rotate(90deg): 这个是二维的平面旋转，以原点作为旋转点旋转
• rotateX(): 在空间中以x轴旋转
• rotateY(): 在空间中以y轴旋转
• rotateZ(): 注意在三维坐标系中，这里的Z轴是往屏幕外的。
• rotate3d(x,y,z,90deg): x,y,z是矢量，元素会以这个矢量方向所在的的直线作为旋转轴旋转。

2. 伸缩

• scale(x,y): x轴方向上和y轴方向上的伸缩，伸缩的是此元素的变化坐标轴的刻度
• scalex(): x轴方向上伸缩
• scaley(): y轴方向上伸缩
• scalez(): z轴方向上伸缩
• scale3d()：这里的3d就不是矢量值了，仅仅是三个值写在一起而已
• scale可同时设置多个，取他们的叠加值：transform: scale(.5, .5) scale(3, 3) === transform: scale(1.5, 1.5)
• scale()他会保留影响，即元素旋转了，但是原来方向上设置的scale还会影响元素的该方向。

3. 倾斜：倾斜的是坐标轴

• 它没有skewz()和skew3d()这两种用法，他只是一个2d变化。
• 这里的坐标轴倾斜了，同时也被拉伸了。若倾斜y轴，元素的高是不变的。
• skew(x, y): 默认skew(0deg, 0deg)，==第一个值倾斜的是y轴，第二个值倾斜的是x轴==
• skewx()
• skewy()

4. 平移

• translate(x,y): 里面要是写百分数，那计算的就是自己的长度的百分比，参照的是自身
• translateX()
• translateY()
• translateZ()
• translate3d()

下面几个是设置在父级上的属性：

• perspective: 800px; 景深，即我们的眼睛距离屏幕的距离

  • 默认值为none, 景深是可以叠加的
  • 当translateZ越大那我们看的就越大
  • 注意：我们看到的所有的元素都是元素在屏幕上的投影
  • perspective也可以作为transform的属性：transform: perspective(800px); 如果这样写的话，那最好把perspective作为transform的第一个属性，但是这样就不能用perspective-origin了

• perspective-origin：默认为center,center; 指定透视点的位置,即设置眼睛的位置

• transform-style: preserve-3d/flat, 默认值为flat;

  • 我们现在做的3d效果，其实还是浏览器通过平面给我们渲染的，不是真正的3d。要想实现实现真正的3d渲染，需要在父级上加一个属性transform-style: preserve-3d; 要在直接的父级上加这个属性，不能再祖父级上加，否则就没有效果了。

  一旦一个元素上设置了perspective或transform-style, 那么它的子元素就会相对它进行定位。