一. 邂逅CSS和常见的CSS
1.1. CSS的编写方式
1.2. 常见的CSS
font-size/color/width/height/backgroundColor
二. 文本属性
2.1. text-decoration
2.2. text-indent
2.3. text-align
三. 字体属性
3.1. font-family
3.2. font-style
3.3. font-weight
3.4. font-size
3.5. line-height
3.6. font
四. CSS常见的选择器
4.1. 基础选择器
-
统配选择器
-
元素
-
类
-
id
4.2. 属性选择器
4.3. 子代/后代选择器
4.4. 兄弟选择器
4.5. 交集/并集选择器
4.6. 伪类选择器
:hover/foucs
4.7. 伪元素使用
-
before/after
五. CSS的特性
5.1. 层叠特性
-
权重
5.2. 继承性
-
常见的记住(总结)
-
查文档
5.3. 元素的类型
-
块级元素
-
行内级元素
-
行内级非替换元素
-
行内级替换元素img/video
-
行内块级元素 inline-block
-
5.4. 元素的隐藏方式
5.5. overflow
六. 盒子模型
6.1. 内容
-
width/height
6.2. 内边距
-
padding
6.3. border
-
color/style/width
6.4. margin
-
外边距
-
折叠和传递
6.5. box-shadow/text-shadow
-
x y blur spread color
6.6. box-sizing
七. 背景
3.1. background-image
3.2. background-size
3.3. background-position
3.4. background-repeat
3.5. background-attachment
八. 结构伪类
九. 布局-定位
-
static
-
relative
-
fixed
-
absolute
-
相对最近的定位元素
-
如果没有找到定位元素, 相对的是视口
-
内容是可以滚动, 随着内容滚动
-
fixed的区别
-
-
-
sticky
十. 布局-浮动
-
浮动很多特性
-
浮动的案例
-
margin设置负值
-
额外: 脱离标准的元素
-
默认包裹内容
-
不再严格区分行内级/块级元素
-
浮动元素是行内块级元素? 没有这种说法
-
-
可以设置宽度和高度
高度塌陷
-
清浮动
十一. flex布局
3.1. flex布局中概念
-
container
-
flex item
-
主轴/交叉轴
3.2. flex container属性
-
display: flex;
-
flex-flow
-
flex-direction
-
flex-wrap
-
-
justify-content
-
align-items
-
align-content
3.3. flex item属性
-
order
-
align-self
-
flex-basis
-
flex-grow
-
flex-shrink
-
flex
十二. 形变-动画-vertical-align
transform
-
translate
-
scale
-
rotate
-
skew
transition
animation
-
keyframes
vertical-align(理解)
HTML/CSS/JS
css">.box {box-sizing/padding/border;box-shadowdisplay: flex;position: absolute;width/height;bgc;overflow;
}
.box2 {box-sizing/padding/border;box-shadowdisplay: flex;position: absolute;width/height;bgc;overflow;
}
