1+X | css

0
tec

注释

  • 只有一种注释：/**/

选择器

  1. 标签选择器 - div {}

  2. 类选择器 - .box{}

  3. ID选择器 - #container{}值必须是唯一的

  4. 后代选择器 - p code{}

  5. 子选择器 - p>code{}

  6. 伪类选择器 - p:first-child{},p:nth-child(2){}

  7. 通用选择器 - *{}（项目开发时不要使用）

  8. 群组选择器 - .p1,.p2{}

  9. 相邻同胞选择器 - p+code{}

  10. 属性选择器 - p[title]{},input[type=text][name]

属性

  • css

    color,background,font,border,margin,padding,width,height,position(relative\absolute\fixed\static),left,top,bottom,right,display…

  • css3新增

    box-shadow/text-shadow,transform,transition(过渡动画),animation,border-radius,box-sizing,background-position,background-s…

    • box-shadow: h-shadow v-shadow blur spread color inset;

a标签的伪类

  • a:link - 未访问的链接
  • a:visited - 已访问的链接
  • a:hover - 鼠标悬停
  • a:active - 被选择的链接

布局

权重

  • !important(10000)>style(1000)>id(100)>class(10)>标签(1)

弹性盒子（flex）教程

  • display:flex;
  • flex-direction
    • 指定了弹性子元素在父容器中的位置
    • 语法格式 - flex-direction:
      • row
      • row-reverse
      • column
      • column-reverse
      • 没有col
  • flex-wrap
    • 规定flex容器是单行或者多行
  • flex-flow
    • 是flex-direction和flex-wrap的简写方式
  • justify-content
    • 定义了项目在主轴上的对齐方式
  • align-items
    • 定义项目在交叉轴上如何对齐
  • align-content
    • 定义了多根轴线的对齐方式，如果项目只有一根轴线，该属性不起作用


519 字