这是我参与「第四届青训营 」笔记创作活动的第1天
了解CSS
1.CSS 用来定义页面元素的样式
- 设置字体或者颜色
- 设置位置或者大小
- 添加动画效果
2.在页面中使用CSS的三种方式 最常用的是第一种：外链
3.选择器
-
id选择器
唯一 -
类选择器
class同一类型可以出现多次 -
属性选择器
[] -
通配选择器
* -
伪类
-
不基于标签和属性定位元素
-
几种伪类
- 状态伪类
-
a:link{ color:black; } a:visited{ color:gray; } :focus{ outline: 2px solid orange; } - 结构伪类
-
4.组合
5.选择器组
- 通过
，将多个选择器构成一个组
6.颜色
- rgba(255,0,0,1) a:alpha透明度
7.
-
字体 font-family
- 关键字
- small、medium、large
- 长度
- px、em
- 百分数
- 相对于父元素字体大小
- 关键字
-
行距 line-height
8.调试CSS
-
右键页面 选择
检查 -
使用快捷键
- Ctrl（Cmd）+ Shift（Opt）+ I
深入CSS
1.选择器的优先级：
- 内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器
2.继承
-
某些属性会自动继承其父元素的计算值，除非显式指定一个值
-
可继承 如：font、color、line-height等
-
不可继承 如：width、height、margin等
-
显式继承
* { box-sizing : inherit; } html { box-sizing : border_box; } .some-widget { box-sizing : content-box }
3.初始值
-
CSS中，每个属性都有一个初始值
- background-color的初始值为transparent
- margin-left的初始值为0
-
可以使用
initial关键字显式重置为初始值- background-colo: initial
4.CSS求值过程
5.布局
- 确认内容的大小和位置的算法
- 依据元素、容器、兄弟节点和内容等信息来计算
-
width、height
- 取值为长度、百分数、auto
- auto由浏览器根据其他属性确定
- 百分数相对于容器的conten box宽度和高度
容器有指定高度时，百分数才生效
-
padding
-
指定元素四个方向的内边距
-
百分数相对于容器宽度
-
-
border
-
指定容器边框样式、粗细和颜色
-
三种属性
- border-width
- border-style
- border-color
-
四个方向
- border-top
- border-right
- border-bottom
- border-left
-
-
margin
- 指定元素四个方向的外边距
- 取值可以是长度、百分数、auto
- 百分数相对于容器宽度
-
行级和块级
-
display属性
block 块级盒子
inline 行级盒子
inline-block 本身是行级，可以放在行盒中；可以设置宽高；作为 一个整体不会被拆散成多行。
none 排版时完全被忽略
6.常规流 Normal Flow
- 根元素、浮动和绝对定位的元素会脱离常规流
- 其他元素都在常规流之内（in-flow）
- 常规流中的盒子，在某种排版上下文中参与布局
7.Flex Box
-
一种新的排版上下文
-
可以控制子级盒子：
- 摆放的流向（← → ↑ ↓）
- 摆放顺序
- 盒子宽度和高度
- 水平和垂直方向的对齐
- 是否允许折行
Flex
8.Grid 布局
- Flex：一维
- Grid：二维
- grid line 网格线
9.position属性 绝对定位
总结
- 通过本次课程的学习，对我以前学习的CSS的基础知识进行了补充和完善，让我发现了之前所学的都只是冰山一角，需要掌握的知识还很多，对于前端的学习不能放松。
