css笔记

来源：coderwhy、gpt

CSS

css引入

可以在style元素或者CSS文件中使用@import导入其他的CSS文件

@import url(./other.css)
.box{
    width:100px;    
}

文本

• text-align: 直接翻译过来设置文本的对齐方式;

• MDN: 定义行内内容（例如文字）如何相对它的块父元素对齐

  • 常用的值

  • left：左对齐

  • right：右对齐

  • center：正中间显示

  • justify：两端对齐

字体

font-size

• font-size决定文字的大小

• 常用的设置

  • 具体数值+单位

    • 比如100px

    • 也可以使用em单位(不推荐)：1em代表100%，2em代表200%，0.5em代表50%

  • 百分比

    • 基于父元素的font-size计算，比如50%表示等于父元素font-size的一半

font-weight

font-weight用于设置文字的粗细（重量）

• 常见的取值:

  • 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 ：每一个数字表示一个重量

  • normal：等于400

  • bold：等于700

  • strong、b、h1~h6等标签的font-weight默认就是bold

font

• font是一个缩写属性

  • font 属性可以用来作为 font-style, font-variant, font-weight, font-size, line-height 和 font-family 属性的简写;

  • font-style font-variant font-weight font-size/line-height font-family

• 规则:

  • font-style、font-variant、font-weight可以随意调换顺序，也可以省略

  • /line-height可以省略，如果不省略，必须跟在font-size后面

  • font-size、font-family不可以调换顺序，不可以省略

选择器

• 属性选择器

• 组合

• 伪类

• 伪元素

属性选择器

[title] {
    color:blue;
}
[title=box]{
    color:red
}

后代选择器

• 后代选择器一: 所有的后代(直接/间接的后代)

  • 选择器之间以空格分割

    <div class="box">
        <div>
            <span>css笔记整理我来</span>
        </div>
    </div>
    <div class="box">
        <span>我又来了整理了什么时候才能整理完呢</span>
    </div>
    <style>
        .box span{
            color: red;
        }
    </style>

• 后代选择器二: 直接子代选择器(必须是直接自带)

  • 选择器之间以 > 分割;

    .box > span {
        color:red;
    }

兄弟选择器

• 兄弟选择器一:相邻兄弟选择器

  • 使用符号 + 连接

• 兄弟选择器二: 普遍兄弟选择器 ~

  • 使用符号 ~ 连接

<div class="one">0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<style>
    /* 1变红 */
    .one + div{
        color:red;
    }
    /* 123都变红 */
    .one ~ div{
        color:red;
    }
</style>

交集选择器

并集选择器···

交集选择器

• 交集选择器: 需要同时符合两个选择器条件(两个选择器紧密连接)

• 在开发中通常为了精准的选择某一个元素;

  <div class="one">div的one</div>
  <p class="one">p的one</p>
  <style>
      /* div的one变红 */
      div.one{
          color:red;
  	}
  </style>

伪类

• 什么是伪类呢?

  • Pseudo-classes: 翻译过来是伪类;

  • 伪类是选择器的一种，它用于选择处于特定状态的元素;

• 常见的伪类有

• 1.动态伪类（dynamic pseudo-classes）

  • :link、:visited、:hover、:active、:focus

• 2.目标伪类（target pseudo-classes）

  • :target

• 3.语言伪类（language pseudo-classes）

  • :lang( )

• 4.元素状态伪类（UI element states pseudo-classes）

  • :enabled、:disabled、:checked

• 5.结构伪类（structural pseudo-classes）

  • :nth-child( )、:nth-last-child( )、:nth-of-type( )、:nth-lastof-type( )

  • :first-child、:last-child、:first-of-type、:last-of-type

  • :root、:only-child、:only-of-type、:empty

• 6.否定伪类（negation pseudo-classes）

  • :not()

• 所有的伪类: https://developer.mozilla.org/zhCN/docs/Web/CSS/Pseudo-classes

动态伪类

• 使用举例

  • a:link 未访问的链接

  • a:visited 已访问的链接

  • a:hover 鼠标挪动到链接上(重要)

  • a:active 激活的链接（鼠标在链接上长按住未松开）

• 使用注意

  • :hover必须放在:link和:visited后面才能完全生效

  • :active必须放在:hover后面才能完全生效

  • 所以建议的编写顺序是 :link、:visited、:hover、:active

• 除了a元素，:hover、:active也能用在其他元素上

结构伪类

• :nth-child(1)

  • 是父元素中的第1个子元素

• :nth-child(2n)

  • n代表任意正整数和0

  • 是父元素中的第偶数个子元素（第2、4、6、8……个）

  • 跟:nth-child(even)同义

• :nth-child(2n + 1)

  • n代表任意正整数和0

  • 是父元素中的第奇数个子元素（第1、3、5、7……个）

  • 跟:nth-child(odd)同义

• nth-child(-n + 2)

  • 代表前2个子元素

• :nth-last-child()的语法跟:nth-child()类似，不同点是:nth-last-child()从最后一个子元素开始往前计数

  • :nth-last-child(1)，代表倒数第一个子元素

  • :nth-last-child(-n + 2)，代表最后2个子元素

• :nth-of-type()用法跟:nth-child()类似

  • 不同点是:nth-of-type()计数时只计算同种类型的元素

  • :nth-last-of-type()用法跟:nth-of-type()类似

  • 不同点是:nth-last-of-type()从最后一个这种类型的子元素开始往前计数

• 其他常见的伪类(了解):

  • :first-child，等同于:nth-child(1)

  • :last-child，等同于:nth-last-child(1)

  • :first-of-type，等同于:nth-of-type(1)

  • :last-of-type，等同于:nth-last-of-type(1)

  • :only-child，是父元素中唯一的子元素

  • :only-of-type，是父元素中唯一的这种类型的子元素

• 下面的伪类偶尔会使用:

  • :root，根元素，就是HTML元素

  • :empty代表里面完全空白的元素

否定伪类

• :not()的格式是:not(x)

  • x是一个简单选择器

  • 元素选择器、通用选择器、属性选择器、类选择器、id选择器、伪类（除否定伪类）

• :not(x)表示除x以外的元素

应用场景

1. **:nth-child( )**：选择父元素的第N个子元素。应用场景包括给列表的奇数或偶数项设置不同的样式，或者为表格的某些行定制样式。

   tr:nth-child(even) { background-color: #f2f2f2; }

2. **:nth-last-child( )**：与:nth-child()类似，但计数是从最后一个子元素开始。应用场景可以是突出显示最后几个列表项或表格行。

   p:nth-last-child(2) { font-weight: bold; }

3. :nth-of-type( ) 和 **:nth-last-of-type( )**：分别选择某类型的第N个和倒数第N个子元素。应用场景包括为特定类型的子元素设定样式。

   div:nth-of-type(2n) { background-color: #ff0; }

4. :first-child 和 :last-child：选择所有父元素的第一个和最后一个子元素。应用场景包括为列表的第一项和最后一项设定特殊样式。

   li:first-child { font-size: 18px; }

5. :first-of-type 和 :last-of-type：选择父元素中第一个和最后一个特定类型的元素。这在某个容器中有多种类型元素时特别有用。

   article > p:first-of-type { font-weight: bold; }

6. :root：选择文档的根元素，在HTML中通常是元素。应用场景包括设置全局CSS变量或整体样式。

   :root { --main-color: #333; }

7. :only-child 和 :only-of-type：分别选择没有兄弟元素的元素，以及没有相同类型兄弟元素的元素。这对于只想为这些特定的元素设置样式时很有用。

   p:only-of-type { font-style: italic; }

8. :empty：选择没有任何子节点(包括文本节点)的元素。这可用于隐藏或为没有内容的元素设置特殊样式。

   div:empty { display: none; }

否定伪类（Negation pseudo-class）

1. **:not()**：选择不符合括号内条件的元素。这个伪类在排除某些元素时非常有用，尤其是当你想应用一个通用规则但排除一些元素时。

   p:not(.special) { color: black; }
   li:not(:first-child) { margin-top: 10px; }

在使用这些伪类时，需要考虑到它们的特定行为和浏览器兼容性。由于CSS选择器具有特定的权重和优先级，所以当多个规则同时应用于同一个元素时，需要理解如何正确地结合使用这些伪类。

——gpt

伪元素

• 常用的伪元素有

  • :first-line、::first-line

  • :first-letter、::first-letter

  • :before、::before

  • :after、::after

• 为了区分伪元素和伪类，建议伪元素使用2个冒号，比如::first-line

• ::first-line可以针对首行文本设置属性

• ::first-letter可以针对首字母设置属性

  p {
      width:100px;
  }
  p::first-letter {
      color:red;
      font-size:20px;
  }
  p::after {
      content: "321";
      color:blue;
  }

• ::before和::after用来在一个元素的内容之前或之后插入其他内容（可以是文字、图片)

• 常通过 content 属性来为一个元素添加修饰性的内容。

.box::before {
    content: "123";
    color:red;
}

伪类用于选择元素的状态或位置，而伪元素用于选择元素的虚拟部分或生成的内容。

定位

标准流

• 默认情况下，元素都是按照normal flow（标准流、常规流、正常流、文档流【document flow】）进行排布

  • 从左到右、从上到下按顺序摆放好

  • 默认情况下，互相之间不存在层叠现象

static

默认值，静态定位

relative相对定位

• 定位规则

  • 元素按照标准流布局

  • 可以通过left、right、top、bottom进行定位

  • 定位参照对象是元素自己原来的位置

  • left、right、top、bottom用来设置元素的具体位置，对元素的作用如下图所示

    

• 相对定位的应用场景

  • 在不影响其他元素位置的前提下，对当前元素位置进行微调

fixed固定定位

• 元素脱标

• 可以通过left、right、top、bottom进行定位

• 定位参照对象是视口

• 当画布滚动时，固定不动

画布和视口

• 视口（Viewport）(红框)

  • 文档的可视区域

• 画布（Canvas）(黑框)

  • 用于渲染文档的区域

  • 文档内容超出视口范围，可以通过滚动查看

• 宽高对比

  • 画布 >= 视口

absolute绝对定位

• 元素脱标

• 可以通过left、right、top、bottom进行定位

• 定位参照对象是最邻近的==定位==祖先元素，如果找不到这样的祖先元素，参照对象是视口

absolute/fixed(绝对定位元素)的特点

• 可以随意设置宽高

• 没有宽高默认由内容决定

• 不再受标准流的约束

• 不再给父元素汇报宽高数据(即使你是我爹，我脱标了你也包不住我)

• 脱标元素内部默认还是按照标准流布局

常用的对绝对定位元素的操作

• 对于绝对定位元素来说

  • 定位参照对象的宽度 = left + right + margin-left + margin-right + 绝对定位元素的实际占用宽度

  • 定位参照对象的高度 = top + bottom + margin-top + margin-bottom + 绝对定位元素的实际占用高度

• 如果希望绝对定位元素的宽高和定位参照对象一样，可以给绝对定位元素设置以下属性

  • left: 0、right: 0、top: 0、bottom: 0、margin:0

• 如果希望绝对定位元素在定位参照对象中居中显示，可以给绝对定位元素设置以下属性

  • left: 0、right: 0、top: 0、bottom: 0、margin: auto

  • 另外，还得设置具体的宽高值（宽高小于定位参照对象的宽高）

sticky粘性定位

• 可以看做是相对定位和固定定位的结合体;

• 它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点;

• 当达到这个阈值点时, 就会变成固定(绝对)定位;

• sticky是相对于最近的==滚动祖先==包含滚动视口的

z-index属性

• 作用

  • z-index属性用来设置定位元素的层叠顺序（仅对定位元素有效）

  • 取值可以是正整数、负整数、0

• 比较原则

  • 如果是兄弟关系，z-index越大，层叠在越上面

    • z-index相等，写在后面的那个元素层叠在上面

  • 如果不是兄弟关系

    • 各自从元素自己以及祖先元素中，找出最邻近的2个定位元素进行比较

    • 而且这2个定位元素必须有设置z-index的具体数值

浮动

• 可以通过float属性让元素产生浮动效果，float的常用取值

  • none：不浮动，默认值

  • left：向左浮动

  • right：向右浮动

• 元素一旦浮动后, 脱离标准流

  • 朝着向左或向右方向移动，直到自己的边界紧贴着包含块（一般是父元素）或者其他浮动元素的边界为止，如果水平方向剩余的空间不够显示浮动元素，浮动元素将向下移动，直到有充足的空间为止

• float 属性最初只用于在一段文本内浮动图像, 实现文字环绕的效果。float属性可以指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。行内级内容将会被浮动元素推出。

• 定位元素会层叠在浮动元素上面

• 行内级元素、inline-block元素浮动后，其顶部将与所在行的顶部对齐**

浮动塌陷

• 由于浮动元素脱离了标准流，变成了脱标元素，所以不再向父元素汇报高度

• 父元素计算总高度时，就不会计算浮动子元素的高度，导致了高度坍塌的问题

• 解决父元素高度坍塌问题的过程，一般叫做清浮动（清理浮动、清除浮动）

• 清浮动的目的是

  • 让父元素计算总高度的时候，把浮动子元素的高度算进去

  • 如何清除浮动呢? 使用clear属性

• clear属性是做什么的呢?

• clear 属性可以指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面;

• clear的常用取值

  • left：要求元素的顶部低于之前生成的所有左浮动元素的底部

  • right：要求元素的顶部低于之前生成的所有右浮动元素的底部

  • both：要求元素的顶部低于之前生成的所有浮动元素的底部

  • none：默认值，无特殊要求

• 那么我们可以利用这个特性来清除浮动.

解决浮动的方法

• 事实上我们有很多方法可以清除浮动

• 方法一: 给父元素设置固定高度

  • 扩展性不好（不推荐）

• 方法二: 在父元素最后增加一个空的块级子元素，并且让它设置clear: both

  • 会增加很多无意义的空标签，维护麻烦

  • 违反了结构与样式分离的原则（不推荐）

• 方法三: 给父元素添加一个伪元素

  • 推荐;

  • 编写好后可以轻松实现清除浮动;

  • 纯css样式解决，结构与样式分离

.clear-fix::after{
    content:"";
    display: block;
    clear:both;
    
    visibility: hidden;/*浏览器兼容性*/
    height: 0;/*浏览器兼容性*/
}

flex布局

• 两个重要的概念：

  • 开启了 flex 布局的元素叫 flex container

  • flex container 里面的直接子元素叫做 flex item

• 当flex container中的子元素变成了flex item时, 具备一下特点:

  • flex item的布局将受flex container属性的设置来进行控制和布局;

  • flex item不再严格区分块级元素和行内级元素;

  • flex item默认情况下是包裹内容的, 但是可以设置宽度和高度;

• 设置 display 属性为 flex 或者 inline-flex 可以成为 flex container

  • flex： flex container 以 block-level 形式存在

  • (不常用)inline-flex： flex container 以 inline-level 形式存在

flex布局的模型

flex container的属性

flex-direction

• flex items 默认都是沿着 main axis（主轴）从 main start 开始往 main end 方向排布

• flex-direction 决定了 main axis 的方向，有 4 个取值

• row（默认值）、row-reverse、column、column-reverse

  

flex-wrap

• flex-wrap 决定了 flex container 是单行还是多行

• nowrap（默认）：单行

• wrap：多行

• wrap-reverse：多行（对比 wrap，cross start 与 cross end 相反）

flex-flow

• flex-flow 属性是 flex-direction 和 flex-wrap 的简写。
• 顺序任何, 并且都可以省略
• | |

justify-content

• justify-content 决定了 flex items 在 main axis 上的对齐方式

• flex-start（默认值）：与 main start 对齐

  

• flex-end：与 main end 对齐

  

• center：居中对齐

  

• space-between：

  • flex items 之间的距离相等

  • 与 main start、main end两端对齐

    

• space-around：

  • flex items 之间的距离相等

  • flex items 与 main start、main end 之间的距离是 flex items 之间距离的一半

    

• space-evenly：

  • flex items 之间的距离相等

  • flex items 与 main start、main end 之间的距离 等于 flex items 之间的距离

    

align-item

• align-items 决定了 flex items 在 cross axis 上的对齐方式

• normal：在弹性布局中，效果和stretch一样

• stretch：当 flex items 在 cross axis 方向的 size 为 auto 、或者不设置时，会自动拉伸至填充 flex container

  

• flex-start：与 cross start 对齐

  

• flex-end：与 cross end 对齐

  

• center：居中对齐

  

• baseline：与基准线对齐

  

align-content

align-content 决定了多行 flex items 在 cross axis 上的对齐方式，用法与 justify-content 类似

• stretch（默认值）：与 align-items 的 stretch 类似

  

• flex-start：与 cross start 对齐

  

• flex-end：与 cross end 对齐

  

• center：居中对齐

  

• space-between：

  • flex items 之间的距离相等
  • 与 cross start、cross end两端对齐

  

• space-around：

  • flex items 之间的距离相等

  • flex items 与 cross start、cross end 之间的距离是 flex items 之间距离的一半

    

• space-evenly：

  • flex items 之间的距离相等

  • flex items 与 cross start、cross end 之间的距离 等于 flex items 之间的距离

flex items的属性

order

• 可以设置任意整数（正整数、负整数、0），值越小就越排在前面

• 默认值是 0

flex items

• flex items 可以通过 align-self 覆盖 flex container 设置的 align-items

  • auto（默认值）：遵从 flex container 的 align-items 设置

  • stretch、flex-start、flex-end、center、baseline，效果跟 align-items 一致

    

flex-grow

• flex-grow 决定了 flex items 如何扩展(拉伸/成长)

  • 可以设置任意非负数字（正小数、正整数、0），默认值是 0

  • 当 flex container 在 main axis 方向上有剩余 size 时，flex-grow 属性才会有效

• 如果所有 flex items 的 flex-grow 总和 sum 超过 1，每个 flex item 扩展的 size 为

  • flex container 的剩余 size * flex-grow / sum

• flex items 扩展后的最终 size 不能超过 max-width\max-height

flex-shrink

• flex-shrink 决定了 flex items 如何收缩(缩小)

  • 可以设置任意非负数字（正小数、正整数、0），默认值是 1

  • 当 flex items 在 main axis 方向上超过了 flex container 的 size，flex-shrink 属性才会有效

• 如果所有 flex items 的 flex-shrink 总和超过 1，每个 flex item 收缩的 size为

  • flex items 超出 flex container 的 size * 收缩比例 / 所有 flex items 的收缩比例之和

• flex items 收缩后的最终 size 不能小于 min-width\min-height

flex-basis

• flex-basis 用来设置 flex items 在 main axis 方向上的 base size

  • auto（默认值）、具体的宽度数值（100px）

• 决定 flex items 最终 base size 的因素，从优先级高到低

  • max-width\max-height\min-width\min-height

  • flex-basis

  • width\height

  • 内容本身的 size

flex

• flex 是 flex-grow || flex-shrink || flex-basis 的简写,flex 属性可以指定1个，2个或3个值。

  none | | |

• 单值语法: 值必须为以下其中之一:

  • 一个无单位数(): 它会被当作的值。

  • 一个有效的宽度(width)值: 它会被当作 的值。

  • 关键字none，auto或initial.

• 双值语法: 第一个值必须为一个无单位数，并且它会被当作 的值。

  • 第二个值必须为以下之一：

    • 一个无单位数：它会被当作 的值。

    • 一个有效的宽度值: 它会被当作 的值。

• 三值语法:

  • 第一个值必须为一个无单位数，并且它会被当作 的值。

  • 第二个值必须为一个无单位数，并且它会被当作 的值。

  • 第三个值必须为一个有效的宽度值， 并且它会被当作 的值。

居中方案总结

• 水平居中

  • 行内级元素：设置父元素的text-align:center
  • 块级元素：设置当前块元素宽度 margin:0 auto;
  • 绝对定位：元素有宽度情况下，left0/right0/margin:0 auto
  • flex:justify-content:center

• 垂直居中：

  • 绝对定位：元素有高度，top0/bottom0/margin:auto 0【弊端：元素必须有高度，必须设置定位，需要脱标】

  • flex布局：父元素设置flex布局，align-items:center【弊端：子元素都会被垂直居中】

  • 垂直位移父元素高度一半，再向上位移自己的一半

  //margin-top:50% 错误：margin-top的百分比是相对于父元素宽度的
  position: relative;
  top:50%
  transform:translate(0,-50%)
      

transform

• CSS transform属性允许你旋转，缩放，倾斜或平移给定元素。

• Transform是形变的意思，transformer就是变形金刚

translate

• 平移：translate(x, y)

• 值个数

  • 一个值时，设置x轴上的位移

  • 二个值时，设置x轴和y轴上的位移

• 值类型：

  • 数字：100px

  • 百分比：参照元素本身（ refer to the size of bounding box ）

scale

• 缩放：scale(x, y)

• 值个数

  • 一个值时，设置x轴上的缩放

  • 二个值时，设置x轴和y轴上的缩放

• 值类型：

  • 数字/百分比：

  • 1：保持不变

  • 2：放大一倍

  • 0.5：缩小一半

rotate

• 旋转：rotate(deg)

• 值个数

  • 一个值时，表示旋转的角度

• 值类型：

  • deg：旋转的角度
  • 正数为顺时针
  • 负数为逆时针

• 注意：旋转的原点受transform-origin的影响

属性 transform-origin

• 默认值：transform-origin:center center

• 一个值：

  • 设置x轴的原点

• 两个值：

  • 设置x轴和y轴的原点

• 必须是，，或 left, center, right, top, bottom关键字中的一个

  • left, center, right, top, bottom关键字

  • length：从左上角开始计算

  • 百分比：参考元素本身大小

skew(x, y)

• 值个数

  • 一个值时，表示x轴上的倾斜
  • 二个值时，表示x轴和y轴上的倾斜

• 值类型：

  • deg：旋转的角度

  • 正数为顺时针

  • 负数为逆时针

• 注意：旋转的原点受transform-origin的影响

transition

• transition CSS 属性是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的*一个简写属性。

  • transition-property：指定应用过渡属性的名称

  • 可以写all表示所有可动画的属性

  • 属性是否支持动画查看文档

• transition-duration：指定过渡动画所需的时间

  • 单位可以是秒（s）或毫秒（ms）

• transition-timing-function：指定动画的变化曲线

  • https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition-timing-function

• transition-delay：指定过渡动画执行之前的等待时间

cursor

• cursor可以设置鼠标指针（光标）在元素上面时的显示样式

• cursor常见的设值有

  • auto：浏览器根据上下文决定指针的显示样式，比如根据文本和非文本切换指针样式

  • default：由操作系统决定，一般就是一个小箭头

  • pointer：一只小手，鼠标指针挪动到链接上面默认就是这个样式

  • text：一条竖线，鼠标指针挪动到文本输入框上面默认就是这个样式

  • none：没有任何指针显示在元素上面

精灵图

• 什么是CSS Sprite

  • 是一种CSS图像合成技术，将各种小图片合并到一张图片上，然后利用CSS的背景定位来显示对应的图片部分
  • 有人翻译为：CSS雪碧、CSS精灵

• 使用CSS Sprite的好处

  • 减少网页的http请求数量，加快网页响应速度，减轻服务器压力

  • 减小图片总大小

  • 解决了图片命名的困扰，只需要针对一张集合的图片命名

• Sprite图片制作（雪碧图、精灵图）

  • 方法1：Photoshop, 设计人员提供

  • 方法2：https://www.toptal.com/developers/css/sprite-generator

• 精灵图如何使用呢?

  • 精灵图的原理是通过只显示图片的很小一部分来展示的;

• 通常使用背景:

  • 1.设置对应元素的宽度和高度
  • 2.设置精灵图作为背景图片
  • 3.调整背景图片的位置来展示

• 如何获取精灵图的位置

  • http://www.spritecow.com/

字体图标

• 字体图标的好处：

  • 放大不会失真

  • 可以任意切换颜色

  • 用到很多个图标时，文件相对图片较小

• 字体图标的使用：

  • 登录阿里icons（https://www.iconfont.cn/）

  • 下载代码，并且拷贝到项目中

  • 将字体文件和默认的css文件导入到项目中

• 字体图标的使用步骤:

  • 第一步: 通过link引入iconfont.css文件

  • 第二步: 使用字体图标

• 使用字体图标常见的有两种方式:

  • 方式一: 通过对应字体图标的Unicode来显示代码;

  • 方式二: 利用已经编写好的class, 直接使用即可;

webfonts

• webfonts的显示原理

  • 浏览器一个网页时, 因为代码中有引入字体文件, 字体文件会被一起下载下来;

  • 浏览器会根据使用的字体在下载的字体文件中查找、解析、使用对应的字体；

  • 在浏览器中使用对应的字体显示内容；

• webfonts兼容性

• • 我们刚才使用的字体文件是 .ttf, 它是****TrueType字体.

  • 在开发中某些浏览器可能不支持该字体, 所以为了浏览器的兼容性问题, 我们需要有对应其他格式的字体;

  • TrueType字体：拓展名是 .ttf

  • OpenType/TrueType字体：拓展名是 .ttf、.otf，

  建立在TrueType字体之上

  • Embedded OpenType字体：拓展名是 .eot，OpenType字体的压缩版

  • SVG字体：拓展名是 .svg、 .svgz

  • WOFF表示Web Open Font Format web开放字体：

  拓展名是 .woff，建立在TrueType字体之上

  • 这里我们提供一个网站来生产对应的字体文件:

  • https://font.qqe2.com/# 暂时可用

实操：

字体天下网：https://www.fonts.net.cn/fonts-zh-1.html

1.下载

2.导入

3.引入

4.成果

• 我们刚才使用的字体文件是 .ttf, 它是TrueType字体.

• 在开发中某些浏览器可能不支持该字体, 所以为了浏览器的兼容性问题, 我们需要有对应其他格式的字体;

  • TrueType字体：拓展名是 .ttf

  • OpenType/TrueType字体：拓展名是 .ttf、.otf，建立在TrueType字体之上

  • Embedded OpenType字体：拓展名是 .eot，OpenType字体的压缩版

  • SVG字体：拓展名是 .svg、 .svgz

  • WOFF表示Web Open Font Format web开放字体：拓展名是 .woff，建立在TrueType字体之上

• **这里我们提供一个网站来生产对应的字体文件:**https://font.qqe2.com/# 暂时可用

css画图形

https://css-tricks.com/the-shapes-of-css/#top-of-site

常用：circle:border-radius: 50%

vertical-align

vertical-align会影响 行内块级元素 在一个 行盒 中垂直方向的位置

• vertical-align的属性值

  • baseline(默认值)：基线对齐（你得先明白什么是基线）

  • top：把行内级盒子的顶部跟line boxes顶部对齐

  • middle：行内级盒子的中心点与父盒基线加上x-height一半的线对齐

  • bottom：把行内级盒子的底部跟line box底部对齐

  • ：把行内级盒子提升或者下降一段距离（距离相对于line-height计算\元素高度）， 0%意味着同baseline一样

  • ：把行内级盒子提升或者下降一段距离，0cm意味着同baseline一样

• 解决图片下边缘的间隙方法:

  • 方法一: 设置成top/middle/bottom

  • 方法二: 将图片设置为block元素

• baseline是谁

  • 文本的baseline是字母x的下方
  • Inline-block默认的baseline是margin-bottom的底部（没有，就是盒子的底部）
  • Inline-block有文本时，baseline是最后一行文本的x的下方
  • 有图片，有文字时，line-boxes
    • 
  • 有图片，有文字，有line-boxes
    • 
  • 有图片，有文字，有inline-block（比图片要大）而且设置了margin-bottom，
    • 
  • 有图片、文字、inline-block（比图片要大）而且设置了margin-bottom并且有文字
    •