FE复习企划——2. CSS 基础

2.1 CSS简介

01.css是什么？

02.使用css的三种方式：外链、嵌入、内联

03.css是如何工作的？

• 当我们打开一个界面的时候，浏览器会加载HTML，并进行解析。HTML解析出来就是一个DOM树。
• 在HTML解析时，如果发现有引用到CSS，浏览器就会加载这些CSS，并进行解析。
• 浏览器将样式添加到DOM树中每个对节点，最终展示成页面

04.代码风格：每个声明写一行，两个规则空一行

2.2 基础选择器

01.标签、类、id选择器

1.1 通配选择器( * )

• 匹配页面中所有的元素

1.2标签选择器(h1…)

• 通过标签名选择元素

1.3 id选择器( # )

• id名必须唯一
• 通过id名选择元素

1.4 类选择器( . )

• class名不需要唯一
• 通过class名选择元素

02.属性选择器

2.1属性

• 通过属性选择元素（拥有disable属性的input设置背景颜色和字体颜色）

  

2.2属性值

• 通过属性值选择元素（属性值type为password的input设置颜色）

  

2.3限定开头结尾

• 通过限定属性值是以某字符开头或者结尾选择元素（herf以#开头和herf以.jpg结尾）

  

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

/* 存在href属性并且属性值匹配"https://example.org"的<a> 元素 */
a[href="https://example.org"] {
  color: green;
}

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

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

/* 存在class属性并且属性值包含以空格分隔的"logo"的<a>元素 */
a[class~="logo"] {
  padding: 2px;
}

03.伪类选择器

通过状态 （动态伪类）和所处的DOM结构（结构性伪类）选择元素

3.1动态伪类

• 通过链接状态选择元素（a:hover）

3.2结构性伪类

• 通过元素在DOM树中的结构选择元素（li: first-child）

04.组合器

4.1简单选择器组合起来

4.2选择器组

完整资料： CSS 选择器

2.3 设置字体

01.font-family

CSS 属性 font-family 允许您通过给定一个有先后顺序的，由字体名或者字体族名组成的列表来为选定的元素设置字体。

保证所有设备中都能显示

中文字体包含英文字体

02.font-size

03.font-style

04.font-weight

05.line-height

• 两行文字的基准线直接的距离

当我们用一个没有单位的数来表示行高时，实际行高就是这个数字乘以字体大小（p元素的行高是：1.6*20px = 32px）

06.简写属性font

• font: 是否斜体 字重 字号和行高 字体列表

2.4 设置文字样式

01.text-align

center行内内容居中。justify文字向两侧对齐(调整空格)，对最后一行无效。

02.spacing

• CSS 的 letter-spacing 属性用于设置文本字符的间距表现。letter-spacing
• word-spacing 用于设置单词的间距表现 word-spacing

03.text-indent

text-indent 属性能定义一个块元素首行文本内容之前的缩进量。text-indent

04.text-decoration

text-decoration 属性用于设置文本的修饰线外观的（下划线、上划线、贯穿线/删除线 或 闪烁）text-decoration

05.white-space

white-space 属性是用来设置如何处理元素中的 空白

normal：空白符合并，换行符会被当作空白符来处理。

nowrap：文本永不换行。

pre：保留html中的空格及换行。

pre-wrap：和pre类似，但当一行显示不下的时候会自动换行。

pre-line：合并空格，但保留换行。

06.text-shadow

text-shadow为文字添加阴影。每个阴影值由颜色值、元素在X和Y方向的偏移量、模糊半径组成。

2.5 盒模型基础

01.content

02.padding

当padding有

• 一个，指四个方向的内边距
• 两个，上下、左右
• 四个，上、右、下、左

03.border

3.1用border模拟三角形

（边框颜色不一样—>盒子宽度、高度为0—>其他三个边框为透明）

div{
    height: 100px;
    width: 100px; 
    border: 30px  solid;
    border-color: aqua yellow tomato rebeccapurple;   
}
div{
    height: 0px;
    width: 0px;
    border: 30px  solid;
    border-color: aqua yellow tomato rebeccapurple;   
}
div{
    height: 0px;
    width: 0px;
    border: 30px  solid;
    border-color: aqua transparent transparent transparent;   
}

04.margin

4.1使用margin：auto实现水平居中

4.2margin collapse（外边距折叠）

• 只会发生在垂直方向上
• 折叠后的大小：同号取较大的外边距的值，异号相加

4.3只有margin可以为负

05.box-sizing

CSS 中的 box-sizing 属性定义了 user agent 应该如何计算一个元素的总宽度和总高度。 a会超出容器

06.overflow

CSS属性 overflow 定义当一个元素的内容太大而无法适应 块级格式化上下文 时候该做什么。它是 overflow-xh-CN/docs/Web/CSS/overflow-y)的 简写属性 。

overflow: visible;/* 默认值。内容不会被修剪，会呈现在元素框之外 */

overflow: hidden;/* 内容会被修剪，并且其余内容不可见 */ 

overflow: scroll;/* 内容会被修剪，浏览器会显示滚动条以便查看其余内容 */ 

07.min-width 、max-width

08.min-height、max-height

2.6 CSS中的盒子

01.块级盒子、行级盒子

• 行级盒子的宽度是由内容和容器来决定的，内容少的时候就是内容的宽度，内容超过一行的时候就会被拆成多行。

• 行级盒子的高度是由字体、行高计算得到的。

02.块级元素、行级元素

03.display

当我们调整容器的宽度是，无论怎么换行，inline-block作为一个整体不会被拆散成两行

2.7 盒子的效果

01.border-radius

CSS 属性 border-radius 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。border-radius

02.background

https://developer.mozilla.org/zh-CN/docs/Web/CSS/background

2.1color image repeat

• background-color 设置元素的背景色, 默认值为’'transparent"

• background-image 属性用于为一个元素设置一个或者多个背景图像。

• background-repeat 定义背景图像的重复方式。背景图像可以不重复, 两个轴重复, 沿着水平轴，垂直轴。

  

2.2background-size

background-size 设置背景图片大小。

• auto:以背景图片的比例缩放背景图片。
• cover:缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。
• contain:缩放背景图片以完全装入背景区，可能背景区部分空白。

2.3background-clip

background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。

2.4简写属性

2.5雪碧图

CSS雪碧图，即CSS Sprite，也有人叫它CSS精灵图，是一种图像拼合技术。该方法是将多个小图标和背景图像合并到一张图片上，然后利用CSS的背景定位来显示需要显示的图片部分。减少Http请求数量，加速内容显示。因为每请求一次，就会和服务器建立一次链接，而建立链接是需要额外的时间的。

03.box-shadow

box-shadow 属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。该属性可设置的值包括阴影的X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色。

阴影不占据空间

2.8 行高和垂直对齐

01.行级元素在行盒内如何摆放？

中线和基线之间的距离就是字母x的高度，但是有些字母会上下超出这个范围。

设置了行高后，行级元素会在行盒内垂直居中。对于里面只包含文字的行级盒子来说，我们设置的垂直方向的padding和border不会影响高度计算，其高度只和行高有关


02.vertical-align

[vertical-align]用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。

默认值：baseline 基线对齐（文字：基线；图片：底边；inline-block：最后一行文字的基线）

2.9 CSS继承

01.选择器的优先级


02.继承

css中一般字体相关属性都可继承，但盒模型相关属性不可继承

p继承body的20px；strong继承p的蓝色，em覆盖p的蓝色

03.css求值过程

2.10 CSS中的值和单位

01.长度

02.颜色

2.1RGB

2.2HSL

2.3 keyword

2.4 透明度

03.时间

05211008253" style=“zoom:50%;” />

2.3 keyword

2.4 透明度

03.时间

2.11 高级选择器