css3-学习
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
helloluyiteather
luyi
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
持续时间