这是我参与「第五届青训营」伴学笔记创作活动的第 2 天

一、重点内容

CSS基础：代码构成，使用方法，选择器，调试
选择器的特异度
继承
布局方式
CSS盒模型 - 行级与块级

二、知识点介绍和例子

CSS基础：

1. CSS (Cascading Style Sheets) 定义：

CSS用来定义页面元素的样式：设置字体，颜色，位置，大小，添加动画效果上图结构为规则集：

每个规则集（除了选择器）都应该包含在{ }里
声明（Declaration）里用：将属性与属性值分开
多个声明要用；隔开

2. CSS 工作流程：

3. 选择器 Selector:

找出页面中的元素，以便给他们设置样式
选择元素的方法：按照标签名，类名，id，属性，DOM树中的位置
通配选择器 *：匹配所有

a. 按照标签名，类名或id

b. 按照属性

[attr]: 表示带有以attr命名的元素
[attr=value]: 表示带有以 attr 命名的属性，且属性值为 value 的元素。
[attr~=value]: 表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少有一个值为 value。
[attr^=value]: 表示带有以 attr 命名的属性，且属性值是以 value开头的元素。
[attr$=value]: 表示带有以 attr 命名的属性，且属性值是以 value结尾的元素。
[attr*=value]:表示带有以 attr 命名的属性，且属性值至少包含一个value值的元素。

练习：

<ul>
    <li><a href="https://juejin.cn">掘金</a></li>
    <li><a href="https://www.baidu.com">百度</a></li>
    <li><a href="https://www.google.com/">谷歌</a></li>
    <li><a href="https://github.com" class="logo">GitHub</a></li>
</ul>

/* 存在 title 属性的<a> 元素 */
a[title] {
    color: purple;
}

/* 存在 href 属性并且属性值匹配"https://juejin.cn"的<a> 元素 */
a[href="https://juejin.cn"] {
    color: green;
    background-color: #5bc0de;
}

/* 存在 href 属性并且属性值包含"google"的<a> 元素 */
a[href*="google"] {
    font-size: 2em;
}

/* 存在 href 属性并且属性值结尾是".com"的<a> 元素 */
a[href$=".com"] {
    font-style: italic;
    background-color: #ce8483;
}

c. 伪（Psedo）类选择器

不基于标签和属性定位元素，特定状态下的特定元素（比如鼠标指针悬停）伪类分为：状态伪类，结构性伪类
常用伪类：

练习：

a:link {color:red}
a:visited {color:purple}

组合选择器（Combinators）：

练习：

<div>
    <p>div 内部段落</p>
    <p>div 内部段落</p>
</div>

<p>div 之后的第一个 P 元素</p>
<p>div 之后的第二个 P 元素</p>

div p
{
    background-color:yellow;
}
div+p
{
    background-color:red;
}
div~p
{
    color:blue;
}

选择器组

多个选择器之间用逗号隔开，eg：body,h1,p,div{...}

4. 颜色表达

a. RGB

将红绿蓝三原色各用一个字节表示，取值为0~255的正整数
表示方法：(同一颜色)

十六进制表示：#8fac87
十进制表示：rgb(143，172，135)

b. HSL

Hue 色相：色彩基本属性，取值0~360
Saturation 饱和度：颜色鲜艳程度，取值0~100%（越高越鲜艳）
Lightness 亮度：颜色明亮程度，取值0~100%（越高颜色越亮）
表示方法：hsl(351, 91%, 50%)

c. 关键字

例子：

d. alpha 透明度

取值0~1，alpha=1：颜色不透明，alpha=0：颜色透明
例子：（同一颜色和透明度）
#ff000078
rgba(255, 0, 0, 0.47)
hsla(0, 100%, 50%, 0.47)

5. 控制字体

a. 字体 font-family

规定字体系列
例子：

p { font-family:"Times New Roman",Georgia,Serif; }

通用字体族：

注意：使用某种特定的字体取决于用户机器上该字体系列是否可用；这个属性没有指示任何字体下载。如果浏览器不支持第一个字体，则会尝试下一个。因此，需要使用一个通用字体族名作为后路。

b. 字体大小 font-size

规定字体尺寸
· 关键字：small，medium，large
· 长度：px，em
· 百分数：相对于父元素字体大小

c. 字重 font-weight

规定字体粗细
· 关键字：normal，bold
· 数字：400（=normal）,700(=bold)

d. 行高 line-height

规定两行文字的基准线(baseline)之间的距离
· normal：默认
· 数字：此数字会与当前的字体尺寸相乘来设置行间距
· 长度：设置固定的行间距
· 百分比：基于当前字体尺寸的百分比行间距
· inherit：规定应该从父元素继承 line-height 属性的值
例子：

p {line-height:90%}

HTML中的空格/回车/Tab

HTML不支持多个空格，回车，Tab，都会被解析成一个空白字符

可通过white-space属性：
· normal：默认（合并多个空格，etc）
· nowrap：强制不换行
· pre: 保留所有
· pre-wrap：保留空格，自动换行
· pre-line：合并空格，保留换行

6. 调试CSS

方法：
· 右键点击页面选择“检查”
· 使用快捷键：Ctrl+Shift+I (Windows); Cmd+Opt+I (Mac)

深入CSS

1. 特异度 Specificity

每种选择器都有自己的权重：行内样式>ID选择器>类/属性/伪类>元素/伪元素选择器；如果有多个属性或者选择器同时指向同一元素的CSS冲突，优先选择权重较高的样式规则

2. 继承

某些属性会自动继承父元素的计算值，除非显示指定的一个值
例子：没有设置<strong>的属性，它的属性继承自它的上一级<p>

<body>
<p>This is a <em>test</em> of <strong> inherit</strong></p>
</body>

body{
    font-size: 20px;
}
p{
    color: blue;
}
em{

a. 显式继承

inherit关键字允许显式的声明继承性，对继承和飞继承属性都生效

3. 初始值

· CSS中每个属性都有一个初始值 · 可以使用initial关键词显式重置为初始值

4. CSS求值过程

5. 页面布局

a. 常规流 Normal Flow

包括：行级，块级，表格布局，FlexBox，Grid布局

i) 盒模型：

Width:

指定content box宽度
取值为长度，百分数，auto
auto由浏览器根据其他属性确定
百分数相对于容器的content box宽度 Height:
指定content box高度
取值为长度，百分数，auto
auto取值由内容计算得来
百分数相对于容器的content box高度
容器有指定高度时，百分数才生效 Padding和Margin：
指定元素四个方向的内边距
百分数相对于容器宽度 Border：指定容器边框样式，粗细和颜色
属性：border-width/border-style-color
方向：border-top/border-right/border-bottom/border-left

ii) 块级和行级

行级排版上下文：

Inline Formatting Context (IFC)
只包括含行级盒子的容器会创建一个IFC
IFC内的排版规则： · 盒子在一行内水平摆放 · 一行放不下时，换行显示 · text-align决定一行内盒子的水平对齐 · vertical-align决定一个盒子在行内的垂直对齐 · 避开浮动（float）元素 块级排版上下文：
Block Formatting Context (BFC)
某些容器会创建一个BFC： · 根元素 · 浮动，绝对定位，inline-block · overflow值不是visible的块盒 · display:flow-root;
BFC内的排版规则： · 盒子从上到下摆放 · 垂直margin合并 · BFC内盒子的margin不会与外面的合并 · BFC不会和浮动元素重叠

position属性：

static：默认
relative: 相对自身原本位置偏移，不脱离文档流
absolute: 绝对定位，相对于非static祖先元素定位
fixed: 相对于视口绝对定位

b. 浮动 Float

元素 CSS 属性 position 必须为 static 或 relative，然后 float 不为 none

c. 绝对定位 Absolute Position

如果元素的属性 position 不是 static 或 relative，那它就是绝对定位元素。

三、引用参考

MDN - CSS

CSS ｜ 青训营笔记