1+X | css
注释
- 只有一种注释:/**/
选择器
-
标签选择器 -
div {}
-
类选择器 -
.box{}
-
ID选择器 -
#container{}
值必须是唯一的 -
后代选择器 -
p code{}
-
子选择器 -
p>code{}
-
伪类选择器 -
p:first-child{}
,p:nth-child(2){}
-
通用选择器 -
*{}
(项目开发时不要使用) -
群组选择器 -
.p1,.p2{}
-
相邻同胞选择器 -
p+code{}
-
属性选择器 -
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
- 定义了多根轴线的对齐方式,如果项目只有一根轴线,该属性不起作用