这是我参与「第五届青训营」伴学笔记创作活动的第2天，今天学习的内容是前端基础三件套中的CSS。

主要内容有以下：

CSS基础
样式如何生效
CSS布局介绍

CSS基础

CSS的构成

p{
	color:blue;
	font-size:14px;
}

p是选择器selector，也就是选择要对哪些标签修改样式，这里就是修改所有p标签的样式
color和font-size都是选择器属性，后面跟属性值；这样一个键值对就是一条声明
选择器加上大括号的内容称为一条规则，css就是由这样的很多条规则组成的

💡 如何使用CSS

外链使用link标签引入样式，样式写在单独的css文件里
嵌入是在html文件里使用style标签，将样式写在标签内
内联是直接在某个标签内使用style属性添加样式，不用写选择器

<!--外链-->
<link rel="stylesheet" href="/assets/style.css">

<!--嵌入-->
<style>
	p{ color:blue; font-size:14px; }
<style>

<!--内联-->
<p style="color:blue;font-size:14px;">Hello World</p>

💡 CSS是如何工作的

解析CSS后将dom树变成一个渲染树，最后展示页面

选择器

📙 找出页面中的元素，以便给他们设置样式

选择元素的方式：

按照标签名（p,h1,…)、类名（class=””)、id（id=“”)
按照属性
按照DOM树中的位置

常见选择器

通配选择器 对所有元素都会生效

*{
	color:red;
	font-size:20px;
}

标签选择器 这里选择文字标签p

p{
	color:orange;
	font-size:14px;
}

类选择器

.top{
    font-weight: bolder;
}

id选择器 id值需唯一

#logo{
    font-size: 60px;
    font-weight: 200;
}

属性选择器

选择有某种属性，或属性为特定值的元素，且值可以使用匹配来条件筛选

[diasbled]{
    background-color: #eee;
    color: #999;
}
/* 只想选择属性为特定值的 */
input[type="password"]{
    border-color: red;
    color: red;
}

伪类（pseudo-classes）

状态伪类 link,visited,hover,active,focus

/* 状态伪类 当元素处于某种状态才会被选中 如链接默认、已访问、鼠标悬停、激活 */
a:link{
    font-weight: bold;
}
a:visited{
    color: grey;
}
a:hover{
    color: aqua;
}
a:active{
    color: red;
}
/* 聚焦状态 */
:focus{
 outline: 2px solid orange;
}

结构性伪类 first-child,last-child

/* 结构性伪类 根据元素在dom树中的位置进行选择 还有更多用法*/
li{
    border-bottom: 1px solid;
}
li:first-child{
    color:pink;
}
li:last-child{
    border-bottom: none;
    color:blueviolet;
}

选择器组合使用

多个选择器设置同一样式用”,”组合

body,h1,h2,p,a{
	color:red;
}
[type="button"],[type="password"]{
	margin:0;
}

样式如何生效

特异度（Specificity）

根据选择器的特异度决定生效优先级。id优先级最高，(伪)类，标签其次

继承

文字相关的内容比如字号颜色一般都可以继承，但盒模型的属性不可以，比如width

显示继承：

box-sizing定义如何计算一个元素的总宽度和总高度，主要设置是否需要加上内边距(padding)和边框等

/*通过inherit属性值让不可继承的属性继承给子元素*/
*{
	box-sizing:inherit;/*宽高继承自父元素*/
}
html{
	box-sizing:border-box;/*不包含margin*/
}
.some-widget{
	box-sizing:content-box;/*默认值*/
}

初始值：

CSS中每个属性都有一个初始值，可以使用关键字initial重置为初始值

CSS样式的计算流程

CSS布局

布局是确定内容和大小位置的算法

依据元素、容器、兄弟节点和内容等信息来计算

三种主要的布局方式：常规流（Normal Flow）、float、绝对定位

盒模型

box-sizing: content-box

盒模型可以看作一个盒子，一个容器。
内容content有基础的宽高，然后有内边距padding，边框border，外边距margin

📦 width

指定content box宽度
取值为长度、百分数、auto
auto由浏览器根据其他属性决定
百分数是相对于容器（当前这个元素所在的盒子）的content box宽度

📦 height

指定content box高度
取值为长度、百分数、auto
auto由浏览器根据其他属性决定
百分数是相对于容器的content box高度
容器有指定的高度时，百分数才生效

📦 padding

指定元素四个方向的内边距
百分数是相对于容器的宽度

写一个值是对四边都生效，两个值是左右和上下的值，四个值是上左下右顺时针一圈的值。

tips:当把容器content的宽高都设为0，且四条边框颜色各不相同时可以得到下图，只有边框且分界线是斜切过来的。得到了三个三角形，根据需要可以把其中几个三角形设置为透明从而得到各种各样的形状

📦 border

指定容器边框颜色、粗细、样式

📦 margin

指定元素四个方向的外边距
取值为长度、百分数、auto
百分数是相对于容器的宽度
当margin-left与margin-right均为auto的时候能达到水平居中的效果
margin在垂直方向上会有边距的合并，会取相邻两个元素中较大的边距值

box-sizing: border-box

此时的width和height是包含padding以及border在内一起计算的
实际项目中会使用border-box比较多

盒模型布局规则

🧱 块级 Block Level Box display: block

不和其他盒子并排摆放
适用所有的盒模型属性
块级元素
- 生成块级盒子
- 标签body、article、div、main、section、h1-6、p、ul、li等

〰️ 行级 Inline Level Box display：inline

和其他行级盒子放在一行或拆开成多行
盒模型中的width、height不适用
行级元素
- 生成行级盒子
- 内容分散在多个行盒(inline box)中
- 标签span、em、strong、cite、code等

display：block|inline|inline-block|none

inline-block：本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行 none：排版时完全忽略（被隐藏）

常规流（Normal Flow）

行级排版上下文

〰️ 行级排版上下文 IFC

inline Formatting Context
只包含行级盒子的容器会创建一个IFC

IFC内的排版规则

盒子在一行内水平摆放

一行放不下时，换行显示

text-align决定一行内盒子的水平对齐

vertical-align决定一个盒子在行内的垂直对齐

避开浮动(float)元素*

这里有一个超长的单词，由于有宽度限制，一行放不下的时候会超出，当将overflow-wrap改成break-word的时候长单词会自动换行；这里的图片和em标签的内容都属于是inline-box的排版方式，能够放在一行内。

块级排版上下文

🧱 块级排版上下文 BFC

Block Formatting Context
某些容器会创建一个BFC
- 根元素html
- 浮动的元素、绝对定位、inline-block
- Flex子项和Grid子项
- overflow值不是visible的块盒（overflow：hidden）
- display：flow-root；