css3-学习

css 特性

选择器

基础选择器

标签选择器

ID 选择器

类选择器

CSS 的优先级是什么？

!important > 内联样式(style="") > ID 选择器 > 类选择器 = 属性选择器 = 伪类 > 标签选择器 = 伪元素选择器。

层级选择器

• foo bar 后代选择器，元素的后代元素
• foo > bar 子代选择器，元素的子代元素
• foo + bar 相邻同胞选择器
• foo ~ bar 通用同胞选择器
• foo, bar 并集选择器
• foo.class 交集选择器

条件选择器

:lang 具体语言标记的元素

:dir() 指定编写方向的元素

:has 包括指定元素的元素

:is 指定条件的元素

:not 非指定条件的元素

:where 指定条件的元素

状态选择器

:active

:hover

:link

:visited

:focus

表单

:valid

:invalid

:checked switch

结构选择器

:root 文档的根元素

:empty 无子元素的元素

:nth-child(n) 元素中指定顺序索引的元素。odd/even

:nth-last-child(n) 倒序索引

:first-child 元素中为首的元素

:last-child 元素中为尾的元素

:only-child 仅有该元素的元素

属性选择器

[attr] 指定属性的元素

[attr=val] 属性等于指定值的元素

[attr*=val] 包括指定元素的元素

[attr^=val] 包括开头

[attr$=val] 包括结尾

伪元素

::before 在元素前加入

::after 在元素后面加入

::first-letter

::first-line

::backdrop 全屏模式的元素 （Document.fullscreen）

::placeholder

<div class="t1">
    <span>hello</span>luyi<span>teather</span>
</div>
<div class="t2">luyi</div>
<style>
    .t2::before {
        content:'hello'
    }
    .t2::after {
        content:'teacher'
    }
</style>

flex 布局

flex -- flexible box 弹性布局。

display: flex

容器属性

• flex-direction 主轴的方向
  • row -- default
  • column
• flex-wrap 如果一个轴线排不下，如何换行
  • nowrap -- default
  • wrap
  • wrap-reverse
• flex-flow 是以上两者的简写
• justify-content
  • flex-start
  • flex-end
  • center
  • space-between
  • space-around
  • space-evenly
• align-items
  • flex-start
  • flex-end
  • center
  • baseline 项目的第一行文字的基线对齐
  • stretch 占满高度

项目属性

• order

  • 属性定义项目的排列顺序，数值越小，排列越靠前，默认为0.

• flex-grow

  • 放大比例，剩余空间。默认为0；

• flex-shrink

  • 缩小比例，剩余空间，默认为1；

• flex-basis

  • 定义在分配多余空间之前，项目占据的空间。

• flex

  • flex: 1 是什么意思
    • 如果直接赋值数字，flex:1 -- flex: 1 1 0%
    • 如果给 auto, flex: auto -- flex: 1 1 auto
    • flex:none flex: 0 0 none

动画和变换

tranform, transition, animation

transfrom

变换，2d 变换、3d 变化

• transfrom
  • flat
  • preserve-3d

translate 平移

translate(x, y)

translate3d(x, y, z) -- translateZ(0)

scale 缩放

scale(x,y)

scale3d(x, y, z)

skew 扭曲

rotate 旋转

rotate()

rotate(x, y, z, a)

transition

transition-property

• all
• none
• string

transition-duration

持续时间

transition-timimg-function

transition-delay

animation

name

有一个动画的名称

duration

持续时间

timimg-function

delay

播放次数