这是我参与「第五届青训营 」伴学笔记创作活动的第2天
一、本堂课重点内容：
- CSS 代码构成
- CSS 使用方法
- CSS 流程之选择器组、文本渲染
- 调试 CSS
- CSS 选择器的特异度
- CSS 继承
- CSS 求值过程解析
- CSS 布局方式及相关技术
- CSS 盒模型 - 行级
- CSS 盒模型 - 块级
二、详细知识点介绍：
CSS介绍
1.CSS是什么？
- Cascading Style Sheets层叠样式表
- 用来定义页面元素的样式
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果
2.CSS代码语法
3.页面中使用CSS
- 外链
- 嵌入
- 内联
4.CSS是如何工作的
CSS选择器
1.选择器Selecter
- 找出页面中的元以便给他们设置样式素
- 使用多种方式选择元素
- 按照标签名、类名或id
- 按照属性
- 按照DOM树中的位置
2.通配选择器*
3.标签选择器
4.id选择器#
5.i类选择器.
6.属性选择器
属性的值匹配某一种条件下进行选择
7.伪类选择器（不基于标签和属性定位元素）
- 状态伪类
<a href="http://example.com">
example.com
</a>
<label>
用户名：
<input type="text">
</label>
<style>
a:link {
color: black;
}
a:visited {
color: gray;
}
a:hover {
color: orange;
}
a:active {
color: red;
}
:focus {
outline: 2px solid orange;
}
</style>
- 结构性伪类：根据节点在DOM树中出现的位置
<ol>
<li>阿凡达</li>
<li>泰坦尼克号</li>
<li>星球大战：原力觉醒</li>
<li>复仇者联盟 3</li>
<li>侏罗纪世界</li>
</ol>
<style>
li {
list-style-position: inside;
border-bottom: 1px solid;
padding: 0.5em
}
li:first-child {
color: coral
}
li:last-child {
border-bottom: none;
}
</style>
8.组合
颜色
字体font-family
- 通用字体族
- 字体列表最后写上通用字体族
- 英文字体放在中文字体前面
- 使用Web Fonts Web 字体是一种 CSS 特性，允许您指定在访问时随您的网站一起下载的字体文件，这意味着任何支持 Web 字体的浏览器都可以使用您指定的字体。
<h1>Web fonts are awesome!</h1>
<style>
@font-face {
font-family: "Megrim";
src: url(https://fonts.gstatic.com/s/megrim/v11/46kulbz5WjvLqJZVam_hVUdI1w.woff2) format('woff2');
}
h1 {
font-family: Megrim, Cursive;
}
</style>
字体大小font-size
- 关键字：small、medium、large
- 长度：px、em
- 百分数：相对于父元素字体大小
字体风格font-style
默认normal，斜体：italic
字重font-weight
行高line-height
文字对齐text-align
文字间距spacing
- letter-spacing
- word-spacing
首行文本缩进text-indent
文字修饰text-decoration
- none
- underline下划线
- line-through中划线
- overline上划线
处理空白符white-space
- normal
- nowrap强制不换行
- pre保留所有空格和换行
- pre-wrap一行显示不下自动换行
- pre-line合并空格，保留换行
调试CSS
选择器的特异度
继承
某些属性会自动继承其父元素的计算值，除非显式指定一个值
显式继承inherit
通过一个容器改变容器内所有元素
*{
box-sizing:inherit; /*box-sizing本身不可继承，通过通配选择器使所有box-sizing变成可继承的*/
}
html{
box-sizing:border-box; /*将html所有box-sizing默认元素设置为border-box*/
/*宽度包含padding和border在内*/
}
.some-weight{
box-sizing:content-box; /*.some-weight内所有box-sizing设置为content-box*/
}
初始值
- CSS中，每个属性都有一个初始值
- background-color的初始值为transparent
- margin-left的初始值为0
- 可以使用initial关键字显式重置为初始值
- background-color：initial
CSS求值过程
CodePen - 青训营/CSS/取值过程 (cdpn.io)
布局
1. 布局是什么？
2. 布局相关技术
3. 盒子模型
width
- 指定content box宽度
- 取值为长度、百分数、auto
- auto由浏览器根据其他属性确定
- 百分数相对于容器的content box宽度
height
- 指定content box宽度
- 取值为长度、百分数、auto
- auto取值由内容计算得来
- 百分数相对于容器的content box宽度
- 容器有指定的高度时，百分数才生效
padding
- 指定元素四个方向的内边框
- 百分数相对于容器宽度
border
- 指定容器边框样式、粗细和颜色
- 三种属性
- border-width
- border-style
- border-color
- 四个方向
- border-top
- border-right
- border-bottom
- border-left
案例
当四条边框颜色不同时 CodePen - 青训营/CSS/三角形 (cdpn.io)
margin
-
指定元素四个方向的外边框
-
取值为长度、百分数、auto
-
百分数相对于容器宽度
-
margin：auto水平居中
-
margin collapse在垂直方向上有边距的合并，折叠
content-box：
padding和border不被包含在定义的width和height之内。 盒子的实际宽度=设置的width+padding+border
border-box：
padding和border被包含在定义的width和height之内。 盒子的实际宽度=设置的width（padding和border不会影响实际宽度）
overflow控制溢出内容的展示
- visible默认
- hidden截掉超出部分
- scroll滚动条
4.块级vs.行级
常规流Normal Flow
行级排版上下文
块级排版上下文
BFC内的排版规则
5.Flex Box
Flex Box
justify-content控制水平方向对齐关系
align-items控制垂直方向对齐关系
align-self
order
Flexibility
flex-grow设置 flex 项 [主尺寸] 的 flex 增长系数。
flex-shrink
5.Grid布局
display：grid
- display：grid使元素生成一个块级的Grid容器
- 使用grid-template相关属性将容器划分为网格
- 设置每一个子项占哪些行/列
划分网格
colums行 rows列 CodePen - 青训营/CSS/grid-template (cdpn.io)
grid line网格线
CodePen - 青训营/CSS/grid-area (cdpn.io)
