认识 CSS

努力进化的程序猿
125 阅读55分钟

认识 CSS

CSS 的含义

  • CSS 表示层叠样式表（Cascading Style Sheet），是为网页添加样式的代码。
  • CSS 不是真正的编程语言，甚至不是标记语言。而是一门样式表语言；

CSS 作用

  • CSS 的出现是为了美化 HTML 的，并且让结构（HTML）与样式（CSS）分离；

    • 方式一：为 HTML 添加各种各样的样式，比如颜色、字体、大小、下划线等；
    • 方拾二：对 HTML 进行布局，按照某种结构显示（CSS 进行布局 - 浮动、flex、grid）；

CSS 的应用

  • CSS 提供了三种方法，可以将 CSS 样式应用到元素上：

    • 内联样式（inline style）；
    • 内部样式表（internal style sheet）、文档样式表（document style sheet）、内嵌样式表（embed style sheet）；
    • 外部样式表（external style sheet）；

内联样式（inline style）

  • 也称为行内样式；

    • 存在于 HTML 元素的 style 属性之中；

          <!-- 内联样式（inline） -->
    <div style="color: red; font-size: 30px">我是div元素</div>
    <h1 style="font-size: 100px">我是标题</h1>

  • CSS 样式之间用分号“ ；”隔开；

内部样式表（internal style sheet）

  • 内部样式表：

    • 将 CSS 放在 HTML 文件 元素里的 元素之中。 

         <head>
   <style>
      /* 选择器 */
      div {
        color: red;
        font-size: 30px;
        background-color: orange;
      }
    </style>
  </head>
  <body>
    <!-- <div style="color:red; font-size: 30px; background-color: orange;">我是div元素</div> -->
    <div>我是div元素</div>
    <p>我是段落</p>
    <h1>我是标题</h1>
  </body>

  • 在 Vue 的开发过程中，每个组件也会有一个 style 元素，和内部样式表非常相似（原理并不相同）；

外部样式表（external style sheet）

  • 可以将 CSS 编写到一个独立的文件中，并且通过 元素引入进来；

  • 使用分为两个步骤：

    • 第一步：将 CSS 样式在一个独立的 CSS 文件中编写（后缀名为“.css”）；

    • 第二步：通过 元素引入进来；

        <head>
  <!-- link元素是用来引入资源的 -->
    <link rel="stylesheet" href="./css/style.css" />
  </head>
  <body>
    <div class="title">我是01中的title</div>
  </body>

@import

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

    @import url(./style.css)
@import url(./text.css)

CSS 的注释

  • CSS 代码也可以添加注释来方便阅读：

    • CSS 的注释和 HTML 的注释是不一样的;

    • /* 注释内容 */

          <style>
      /* css的注释 */
      。box {
        /* 字体大小 */
        font-size: 30px;
        /* 前景色 */
        color: red;
      }
    </style>

link 元素

  • link 元素是外部资源链接元素，规范了文档与外部资源的关系；

    • link 元素通常是在 元素中；

  • 最常用的链接是样式表（CSS）；

    • 此外也可以用来创建站点图标（如 ”favicon“ 图标）；

  • link 元素常见的属性：

    • href：此属性指定被链接资源的 URL。URL 可以是绝对的，也可以是相对的。

    • rel：指定链接类型：

      • icon：站点图标；
      • stylesheet：CSS 样式；

CSS 颜色的表示方法

  • 在 CSS 中，夜色有以下几种表示方式：

  • 颜色关键字（color keywords）：

    • 不区分大小写的标识符，表示一个具体的颜色；

  • RGB 颜色：

    • 是一种色彩空间，通过红、绿、蓝三原色组成了不同的颜色；

      • 也就是通过调整这三个颜色的比例，可以组合成其他颜色；

    • RGB 各个原色的取值范围是 0~255;

Chrome 浏览器的开发者工具

  • 打开 Chrome 调试工具：

    • 方式一：右键 - 检查；
    • 方式二：快捷键 - F12；

  • 其他技巧：

    • 快捷键：Ctrl + 可以调整页面或者调试工具的字体大小；
    • 可以通过删除某些元素来查看网页结构；
    • 可以通过增删 css 来调试网页样式；

CSS 属性 - text-decoration

  • text-decoration 用于设置文字的装饰线

    • decoration 是装饰/装饰品的意思；

  • text-decoration 有如下常见取值：

    • none：无任何装饰线；

      • 可以去除 a 元素默认的下划线；

    • underline：下划线；

    • overline：上划线；

    • line-through：中划线（删除线）；

CSS 属性 - text-transform

  • text-transform 用于设置文字的大小写转换；

    • transform 是使变形/变换；

  • text-transform 有几个常见的值：

    • capitalize：将每个单词的首字符变为大写；
    • uppercase：将每个单词的所有字符变成大写；
    • lowercase：将每个单词的所有字符变成小写；
    • none：没有任何影响；

CSS 属性 - text-indent

  • text-indent 用于设置第一行内容的缩进；
  • text-indent：2em；刚好缩进两个文字；

CSS 属性 - text-align

  • text-align：设置块父元素内行内元素的对齐方式；

  • 常用的值：

    • left：左对齐；
    • right：右对齐；
    • center：正中间对齐；
    • justify：两端对齐；

font-size

  • 常用的设置：

    • 具体数值 + 单位

      • 如 100px；
      • 也可使用 em 单位（不推荐）：1 em 代表 100%；

    • ·百分比

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

font-family

  • font-family 用于设置文字的字体名称

    • 可以设置1个或多个字体名称；
    • 浏览器会选择列表中的第一个该计算机上有安装的字体；
    • 或者是通过 @font-face 指定的可以直接下载的字体；

font-weight

  • 用于设置文字的粗细

  • 常见的取值：

    • 100|200|300|等：每个数字表示一个重量；
    • normal：400；
    • bold：700；

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

font-style

  • 用于设置文字的常规、斜体显示

    • normal：常规显示；
    • italic（自带斜体）：用字体的斜体显示；
    • oblique（倾斜）：文本倾斜显示；

font-variant

  • 可以影响小写字母的显示形式

    • variant 是变形的意思；

  • 设置的值：

    • normal：常规显示；
    • small-caps：将小写字母替换为缩小过的大写字母；

line-height

  • 用于设置文本的行高；

    • 行高简单理解为一行文字所占据的高度；

  • 严格定义：两行文字基线（baseline）之间的间距；

  • height 和 line-height 的区别：

    • height：元素的整体高度；
    • line-height：元素中每一行文字所占据的高度；

  • 让一行文字在 div 内部居中显示：height = line-height；

font

  • font 是一个缩写属性；

    • font 属性可以用来作为各种文本属性的缩写；

  • 规则：

    • font-style、font-variant、font-weight 可以随意调换顺序，也可省略；
    • /line-height 可以省略，如果不省略，必须跟在 font-size 后面；
    • font-size、font-family 不可以调换顺序，不可以省略；

CSS 选择器（selector）

  • 按照一定的规则选出符合条件的元素，为之添加 CSS 样式；

通用选择器

  • 通用选择器（universal selector）

    • 所有的元素都会被选中；

  • 一般用来给所有元素作一些通用性的设置

    • 比如内边距，外边距；
    • 重置一些内容；

  • 效率低下，不推荐使用；

简单选择器

  • 简单选择器是开发中应用最多的选择器：

    • 元素选择器（type selectors），使用元素的名称；
    • 类选择器（class selectors），使用 . 类名；
    • id 选择器（id selectors），使用 #id；

  • 一个 HTML 文档里边的 id 值是唯一的，不能重复；

    • id 值如果又多个单词组成，可以用中划线 - 、下划线 _ 连接，也可以使用驼峰标识；
    • 最好不要用标签名作为 id 值；

属性选择器（attribute selectors）

  • 拥有某一个属性 [att];
  • 属性等于某个值 [att=val];

后代选择器

  • 后代选择器一：所有的后代（直接/间接的后代）

    • 选择器之间以空格分割；

            .home span {
        color: red;
      }
​

  • 后代选择器二：直接子代选择器（必须是直接子代）

    • 选择器之间以 > 分割；

            .home > span {
        color: green;
      }
​

兄弟选择器（自身不会被选中）

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

    • 使用符号 + 连接；

            .box + .content {
        color: red;
      }
​

  • 兄弟选择器二：普遍兄弟选择器

    • 使用符号 ~ 连接；

            .box ~ div {
        color: green;
      }

选择器组

  • 交集选择器：需要同时符合两个选择器条件

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

            div.box {
        color: red;
        font-size: 30px;
      }

  • 并集选择器：符合一个选择器条件即可（两个选择器以 ，分割）

    • 在开发中通常为了给多个元素设置仙童的样式；

            body,
      p,
      h1,
      h2 {
        color: red;
        font-size: 40px;
      }

伪类选择器

  • 选择器的一种，用于选择处于特定状态的元素；

  • 常见的伪类：

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

  • 目标伪类

    • :target

  • 语言伪类

    • :lang()

  • 元素状态伪类

    • :enabled、:disable、:checked

  • 结构伪类

  • 否定伪类

    • :not()

  • 所有的伪类：developer.mozailla.org/zh-CN/docs/…

动态伪类

  • 使用举例：

    • a:link 未访问的链接；
    • a:visited 已访问的链接；
    • a:hover 鼠标挪动到链接上；
    • a:active 激活的链接（鼠标在链接上长按住未松开）；

  • 使用注意：

    • :hover 必须放在 :link 和 :visited 后面才能完全生效；
    • :active 必须放在 :hover 后面才能完全生效；
    • 建议编写顺序是 :link、:visited、:hover、:active;

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

  • :focus

    • 指当前拥有输入脚垫的元素（能接收键盘输入）

      • 文本输入框聚焦后，背景就会变为红色；

    • 因为链接 a 元素可以被键盘的 Tab 键选中聚焦，所以 :focus 也适用于 a 元素；

    • 动态伪类编写顺序建议为：

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

    • 直接给 a 元素设置 red 样式，相当于给 a 元素所有动态伪类都设置了

      • 相当于 :link、:visited、:focus、:hover、:active 的 color 属性都设置成了 red；

伪元素（行内非替换元素）

  • 常用的伪元素有：

    • :first-line、::first-line;
    • :first-letter、::first-letter;
    • :berore、::before;
    • :after、::after;

  • ::first-line - ::first-letter

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

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

      p {
    width: 100px;
}

p::first-letter {
    color: red;
    font-size:20px;
}

p::first-line {
    background-color: orange;
}

  • ::before 和 ::after

    • 用来在一个元素之前和之后插入其他内容（文字、图片）

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

CSS 的属性继承

  • CSS 的某些属性具有继承性（inherited）：

    • 如果一个属性具备继承性，那么在该元素上设置后，它的后代元素都可以继承这个属性；
    • 如果后代元素自己有设置该属性，优先使用后代元素自己的属性（不管继承过来的属性权重多高）。

  • 常见的 font-size/font-family/font-weight/line-height/color/text-align 都具有继承性；

  • 继承过来的是计算值，而不是设置值；

CSS 属性的层叠

  • CSS 的翻译是层叠样式表；

    • 对于一个元素来说，相同一个属性可以通过不同的选择器给它进行多次设置；
    • 属性会被一层层覆盖上去；
    • 但是最终只有一个生效；

  • 生效规则;

    • 规则一：选择器的权重，权重大的生效，根据权重可以判断出优先级；
    • 规则二：先后顺序，权重相同时，后面设置的生效；

选择器的权重

  • 为了方便比较 CSS 属性的优先级，可以给 CSS 属性所处的环境定义一个权值（权重）；

    • !important：10000；
    • 内两样式：1000；
    • id选择器：100；
    • 类选择器、属性选择器、伪类：10；
    • 元素选择器、伪元素：1；
    • 通配符：0；

HTML 元素的类型

  • 块级元素：独占父元素的一行；
  • 行内级元素：多个行内及元素可以在父元素的同一行显示；

通过 CSS 修改元素类型

  • 事实上元素没有本质的区别：

    • div 是块级元素，span 是行内级元素；
    • div 之所以是块级元素仅仅是因为浏览器默认设置了 display 属性而已；

CSS属性 - display

  • CSS 中有 display 属性，能修改元素的显示类型，有4个常用值：

    • block：让元素显示为块级元素；
    • inline：让元素显示为行内级元素；
    • inline-block：让元素同时具备行内级、块级元素的特征；
    • none：隐藏元素；

display 值的特性

  • block 元素（块级元素），如：h1、p、div：

    • 独占父元素的一行；
    • 可以随意设置宽高；
    • 高度默认由内容决定；

  • inline-block 元素：

    • 跟其他行内级元素在同一行显示；
    • 可以随意设置宽高；

  • inline 元素（行内级元素），如：span、a、img、strong：

    • 跟其他行内级元素在同一行显示；
    • 不可以随意设置宽高；
    • 宽高都由内容决定；

编写 HTML 元素的注意事项

  • 块级元素、行内块元素

    • 一般情况下，可以包含其他任何元素（比如块级元素、行内级元素、行内块元素）；
    • 特殊情况：p 元素不能包含其他块级元素；

  • 行内级元素（比如 a、span、strong 等）

    • 一般情况下，只能包含行内级元素；

元素隐藏方法

  • 方法一：display 设置为 none

    • 元素不显示出来，并且也不占据位置，不占据任何空间（不存在）；

  • 方法二：visibility 设置为 hidden

    • 虽然元素不可见，但是会占据元素应该占据的空间；
    • 默认为 visible，元素是可见的；

  • 方法三：rgba 设置颜色，将 a 的值设置为0

    • rgba 的 a 设置的是 alpha 值，可以设置透明度，不影响子元素；

      .box {
    color: rgba(255, 0, 0, .5);   /* 0.5 可以简写成 .5*/
}

  • 方法四：opacity 设置透明度，设置为0

    • 设置整个元素的透明度，会影响所有子元素；

CSS 属性 - overflow

  • overflow 用于控制内容溢出时的行为

    • visible：溢出的内容照样可见；

    • hidden：溢出的内容直接裁剪；

    • scroll：溢出的内容被裁减，但可以通过滚动机制查看；

      • 会一直显示滚动条区域，滚动条区域占用的空间属于 width、height；

    • auto：自动根据内容是否溢出来来决定是否提供滚动机制；

    • 单行文字溢出显示省略号

      .text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

CSS 样式不生效技巧

  • 选择器的优先级太低；

  • 选择器没选中对应的元素；

  • CSS 属性的使用形式不对；

    • 元素不支持 CSS 属性，比如 span 默认是不支持 width 和 height 的；
    • 浏览器不支持 CSS 属性；
    • 被同类型的 CSS 属性覆盖，比如 font 覆盖 font-size；

盒子模型（Box Model）

  • HTML 中的没一个元素都可以看做是一个盒子，具备4个属性：

    • 内容（content）：

      • 元素的内容 width/height;

    • 内边距（padding）：

      • 元素和内容之间的间距；

    • 边框（border）：

      • 元素自己的边框；

    • 外边距（margin）：

      • 元素和其他元素之间的间距；

盒子模型的四边

  • 因为盒子有四边，所以 margin/padding/border 都包括 top/right/bottom/left 四个边；

内容 - 宽度和高度

  • 设置内容是通过宽度和高度设置的：

    • 宽度设置：width；
    • 高度设置：height；

  • 对于行内级非替换元素来说，设置宽高是无效的；

  • 还可设置如下属性：

    • min-width：最小宽度，无论内容多少，宽度都大于或等于 min-width；
    • max-width：最大宽度，无论内容多少，宽度都小于或等于 max-width；
    • 移动端适配时，可设置最大宽度和最小宽度；

  • 不常用属性：

    • min-height：最小高度，无论内容多少，高度都大于或等于 min-height；
    • max-height：最大高度，无论内容多少，高度都小于或等于 max-height；

内边距 - padding

  • padding 属性用于设置盒子的内边距，通常用于设置边框和内容之间的间距；

  • padding 包括四个方向，所以有以下取值：

    • padding-top：上内边距；
    • padding-right：右内边距；
    • padding-bottom：下内边距；
    • padding-left：左内边距；

  • padding 单独编写是一个缩写属性：

    • padding 缩写属性是从零点钟方向开始，沿着顺时针转动的，也就是上右下左；

  • padding 并非必须是四个值，也可有其他值；

    • 三个值：10px 20px 30px，缺少 left 值，等于 right 值 20px；
    • 两个值：10px 20px，上下值是 10px, 左右值是20px；
    • 一个值：10px，上下左右全是 10px；

边框 - border

  • border 用于设置盒子的边框；

  • 边框相对于 content/padding/margin 来说特殊一些：

    • 边框具备宽度 width；
    • 边框具备样式 style；
    • 边框具备颜色 color；

设置边框的方式

  • 边框宽度：

    • border-top-width/border-right-width/border-bottom-width/border-left-width;
    • border-width 是上面四个属性的缩写；

  • 边框颜色：

    • border-top-color/border-right-color/border-bottom-color/border-left-color;
    • border-color 是上面四个属性的缩写；

  • 边框样式：

    • border-top-style/border-right-style/border-bottom-style/border-left-style;
    • border-style 是上面四个属性的缩写；

圆角 - border-radius

  • border-radius 用于设置盒子的圆角；

  • border-radius 常见的值：

    • 数值：通常用来设置小的圆角，比如 6px；
    • 百分比：通常用来设置一定的弧度或者圆形；

  • 如果一个元素是正方形，设置 border-radius 大于或等于50%时，就会变成一个圆；

外边距 - margin

  • margin 属性用于设置元素的外边距，通常用于元素和元素之间的间距设置；

  • margin 包括四个方向，有如下取值：

    • margin-top：上内边距；
    • margin-right：右内边距；
    • margin-bottom：下内边距；
    • margin-left：左内边距；

  • margin 单独编写是一个缩写属性：

    • 从零点钟方向开始，沿着顺时针转动的，也就是上右下左；

  • margin 也并非必须是四个值，也可以有其他值；

上下 margin 的传递

  • margin-top 传递

    • 如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的 margin-top 值会传递给父元素；

  • margin-bottom 传递

    • 如果块级元素的底部线和父元素的底部线重叠，并且父元素的高度是 auto，那么这个块级元素的 margin-bottom 值会传递给父元素；

  • 防止措施：

    • 给父元素设置 padding-top/padding-bottom；
    • 给父元素设置 border；
    • 触发 BFC：设置 overflow 为 auto；

  • 建议;

    • margin 一般是用来设置兄弟元素之间的间距；
    • padding 一般是用来设置父子元素之间的间距；

上下 margin 的折叠

  • 垂直方向上相邻的2个 margin 有可能会合并为1个 margin，这种现象叫做 collapse (折叠)；

  • 水平方向上的 margin 永远不会 collapse（）折叠；

  • 折叠后最终值的计算规则:

    • 两个值进行比较，取较大的值；

  • 如何防止 margin collapse：

    • 只设置其中一个元素的 margin；

外轮廓 - outline

  • 元素的外轮廓

    • 不占据空间；
    • 默认显示在 border 的外面；

  • outline 相关属性有：

    • outline-width：外轮廓的宽度；
    • outline-style：取值跟 border 的样式一样，比如 solid、dotted 等；
    • outline-color：外轮廓的颜色；
    • outline：简写属性，跟 border 用法类似；

  • 应用实例:

    • 去除 a 元素、input 元素的 focus 轮廓效果；

盒子阴影 - box-shadow

  • 可以设置一个或多个阴影

    • 每个阴影用 表示
    • 多个阴影之间用逗号隔开，从前向后叠加；
.box {
    box-shadow: 5px 5px 10px 10px orange;
}

  • 常见属性如下：

    • 第1个 ：offset-x，水平方向的偏移，正数向右偏移；
    • 第2个 ：offset-y，垂直方向的偏移，正数往下偏移；
    • 第3个 ：blur-radius，模糊半径；
    • 第4个 ：spread-radius，延伸半径；
    • ：阴影的颜色，如果没有设置，就跟随 color 属性的颜色；
    • inset：外框阴影变成内框阴影；

文字阴影 - text-shadow

  • text-shadow 用法类似于 box-shadow，用于给文字添加阴影效果；
  • 相当于 box-shadow，但它没有 spread-radius 的值；

行内非替换元素的注意事项

  • 以下元素对行内级非替换元素不起作用：

    • width、height、margin-top、margin-bottom;

  • 以下属性对行内级非替换元素的效果比较特殊：

    • padding-top、padding-bottom、上下方向的border；
    • 起作用但不占据空间；

CSS 属性 - box-sizing

  • box-sizing 用来设置盒子模型中宽高的行为；

  • content-box

    • padding、border 都布置在 width、height 外边；

  • border-box

    • padding、border 都布置在 width、height 里边；

元素的水平居中方案

  • 在一些需求中，需要元素在父元素中水平居中显示（父元素一般都是块级元素、inline-block）；

  • 行内级元素（包括 inline-block 元素）

    • 水平居中：在父元素中设置 text-align：center；

  • 块级元素

    • 水平居中：margin：0 auto ；

bcckground-image

  • 用于设置元素的背景图片

    • 会盖在（不是覆盖）background-color 的上面；

  • 如果设置了多张图片

    • 设置的第一张图片将显示在最上面，其他图片按顺序叠在下面；

  • 注意：如果设置了背景图片后，元素没有具体的宽高，背景图片是不会显示出来的；

background-repeat

  • 用于设置背景图片是否平铺；

  • 常见的设置值：

    • repeat：默认值，平铺；
    • no-repeat：不平铺；
    • repeat-x：只在水平方向平铺；
    • repeat-y：只在垂直方向平铺；

background-size

  • 用于设置背景图片的大小

    • auto：默认值，以背景图本身大小显示；
    • cover：缩放背景图，以完全覆盖铺满元素，可能背景图片部分看不见；
    • contain：缩放背景图，宽度或高度铺满元素，但是图片保持宽高比；
    • ：百分比，相对于背景区域的大小；
    • length：具体的大小，比如100px；

background-position

  • 用于设置背景图片在水平、垂直方向上的具体位置；

    • 可以设置具体的数值，比如20px 30px；
    • 水平方向可以设值：left、center、right；
    • 垂直方向可以设值: top、center、bottom；
    • 如果只设置了1个方向，另一个方向默认是 center；

  • 如果想让设置的背景图片永远展示中间位置，设置值为：center；

background-attachment

  • 决定背景图像的位置是在视口内固定，还是随着包含它的区块滚动；

  • 设置值：

    • scroll：表示背景相对于元素本身固定，而不是随着它的内容滚动；
    • local：表示背景相对于元素的内容固定，如果一个元素拥有滚动机制，背景将随着元素的内容滚动；
    • fixed：表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动；

background

  • 是一系列背景相关属性的简写属性；
  • background -size 可以省略，若不省略，必须紧跟在 background-position 的后面；
  • 其他属性都可以省略，而且顺序任意；

background-image 和 img 对比

  • 总结：

    • img，作为网页内容的重要组成部分，比如广告图片，LOGO图片、文章配图、产品图片；
    • background-image，可有可无。不影响用户获取完整的网页内容信息；

结构伪类 - :nth-child

  • :nth-child(1)

    • 是父元素中的第一个子元素；

  • nth-chlid(2n)

    • n 代表任意正整数和0；
    • 是父元素中的第偶数个子元素；
    • 跟 :nth-child(even)同义；

  • :nth-child(2n + 1)

    • n 代表任意正整数和0；
    • 是父元素中的第奇数个子元素；
    • 跟 :nteh-child(odd)同义；

  • nth-child(-n + 2)

    • 代表前2个子元素；

  • :nth-last-child()

    • 从最后一个子元素开始往前计数；
    • :nth-last-child(-n + 2)：代表最后两个子元素；

:nth-of-type

  • 计数时只计算前缀类型的元素；

边框的形状

  • border 主要是用来给盒子增加边框的，他也可以利用它的特性来时凹陷一些形状：

  • 三角形的实现：

          .box {
        width: 100px;
        height: 100px;

        border: 50px solid orange;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-left-color: transparent;

        box-sizing: border-box;

        transform-origin: center 25%;
        transform: rotate(180deg);
      }

Web Fonts 的基本使用

@font-face {
    font-family: "why";
    src: url("./fonts/AaQingHuanYuanTi-2.ttf");
}

.box {
    font-family: "why";
}

字体图标的使用

  • 字体图标的使用步骤：

    • 第一步：通过 link 引入 iconfont.css 文件；
    • 第二步：使用字体图标；

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

    • 方式一：通过对应字体图标的 Unicode 来显示代码；
    • 方式二：利用已经编写好的 class，直接使用即可；
<i class="iconfont">&#xe6f6</i>
<i class="iconfont icon-music"></i>

认识精灵图 CSS Sprite

  • CSS Sprite 定义

    • 是一种图像合成技术，将各种小图片合并到一张图片上，然后利用 CSS 的背景定位来显示对应的图片部分；

  • 使用 CSS Sprite 的好处

    • 减少网页的 http 请求数量，加快网页响应速度，减轻服务器压力；
    • 减小图片总大小；
    • 解决了图片命名的困扰，只需要针对一张集合的图片命名；

精灵图的基本使用

.topbar {
    background-image: url(../images/topbar_sprite.png);
    background-repeat: no-repeat;
    display: inline-block;
}
i.hot-icon {
    background-position: -192px 0;
    width: 26px;
    height： 13px;
}

cursor

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

  • 常见设值有：

    • auto：浏览器根据上下文决定指针的显示样式；
    • default：由操作系统决定，一般就是一个小箭头；
    • pointer：一只小手，鼠标指针在链接上面的默认样式；
    • text：一条竖线，鼠标指针挪动到文本输入框上面的默认样式；
    • none：没有任何指针显示在元素上面；

标准流（Normal Flow）

  • 默认情况下，元素都是按照 normal flow 进行排布；

    • 从左到右、从上到下按顺序摆放好；
    • 默认情况下，互相之间不存在层叠现象；

margin-padding位置调整

  • 在标准流中，可以使用 margin、padding 对元素进行定位；

    • 其中 margin 还可以设置负数；

  • 缺点：

    • 设置一个元素的 margin 或 padding，通常会影响到标准流中其他元素的定位效果；
    • 不便于实现元素层叠的效果；

  • 希望一个元素可以跳出标准流，单独对某个元素进行定位；

    • 通过 position 属性来进行设置；

认识元素的定位

  • 定位允许从正常文档流布局中取出元素，使它们具有不同的行为：

    • 比如放在另一个元素的上面；
    • 始终保持在浏览器视窗内的同一位置；

认识 position 属性

  • 利用 position 可以对元素进行定位；

  • 默认值：

    • static：默认值，静态定位；

  • 使用下面的值，可以让元素变成定位元素：

    • relative：相对定位；
    • absolute：绝对定位；
    • fixed：固定定位；
    • sticky：粘性定位；

静态定位 - static

  • position 属性的默认值

    • 元素按照 normal flow 布局；
    • left、right、top、bottom 没有任何作用；

相对定位 - relative

  • 元素按照 normal flow 布局；

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

    • 参照对象是元素自己原来的位置；
    • left：相对于原来位置向右；
    • reght：相对于原来位置向左；
    • top：相对于原来位置向下；
    • bottom：相对于原来位置向上；

  • 应用场景：

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

固定定位 - fixed

  • 元素脱离 normal flow（脱离标准流、脱标）；
  • 可以通过left、right、top、bottom 进行定位；
  • 定位参照对象是视口；
  • 当画布滚动时，固定不动；

绝对定位 - absolute

  • 元素脱离 normal flow（脱离标准流、脱标）

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

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

  • 定位元素（positioned element）

    • position 值不为 static 的元素；
    • 即 position 值为 relative、absolute、fixed 的元素；

子绝父相

  • 在绝大多数情况下，子元素的绝对定位都是相对于父元素进行定位；

  • 如果希望子元素相对于父元素进行定位，又不希望父元素脱标，常用解决方案是：

    • 父元素设置 position：realtive （让父元素成为定位元素，而且父元素不脱离标准流）；
    • 子元素设置 position：absolute；
    • 简称为 “子绝父相”；

绝对定位元素（absolute/fixed）的特点

  • 可以随意设置宽高；

  • 宽高默认由内容决定；

  • 不再受标准流的约束；

    • 不再严格按照从上到下，从左到右排布；
    • 不再严格区分块级（block）、行内级（inline）、行内会计（inline-block）的很多特性都会消失；

  • 不再给父元素汇报宽高数据；

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

  • 对于绝对定位元素

    • 定位参照对象的宽度 = 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、margin：0，auto；

  • 若希望绝对定位元素在定位参照对象上下居中，可以设置以下属性：

    • top：0、bottom：0、margin：auto，0；

  • 若希望绝对定位元素在定位参照对象上下左右居中显示，可以设置以下属性：

    • left：0、right：0、top：0、bottom：0、margin：auto；
    • 另外，还得设置具体的宽高值（宽高小于定位参照对象的宽高）；

粘性定位 - sticky

  • 可以看做是相对定位和固定定位的结合体；
  • 它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点；
  • 当达到这个阈值点时，就会变成固定定位；
  • sticky 是相对于最近的滚动祖先包含滚动视口的；

CSS 属性 - z-index

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

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

  • 比较原则：

    • 如果是兄弟关系：

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

    • 如果不是兄弟关系：

      • 各自从元素自己以及祖先元素中，找出最邻近的2个定位元素进行比较；
      • 而且这2个定位元素必须有设置 z-indxex 的具体数值；

认识浮动

  • float 属性可以指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它；

  • 绝对定位、浮动都会让元素脱离标准流，以达到灵活布局的效果；

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

    • none：不浮动，默认值；
    • left：向左浮动；
    • right：向右浮动；

浮动规则

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

    • 朝着向左或向右方向移动，直到自己的边界紧贴着包含块（一般是父元素）或者其他浮动元素的边界为之；
    • 定位元素会层叠在浮动元素上面；

  • 如果元素是向左（右）浮动，浮动元素的左（右）边界不能超出包含块的左（右）边界；

  • 浮动元素之间不能层叠；

    • 如果一个元素浮动，另一个浮动元素已经占据了位置，后浮动的元素将紧贴着前一个浮动元素；
    • 如果水平方向剩余的空间不够显示浮动元素，浮动元素将向下移动，直到有充足的空间为之；

  • 浮动元素不能与行内级内容层叠，行内级内容会被浮动元素推出；

    • 比如行内级元素、inline-block 元素、块级元素的文字内容；

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

  • 当页面浮动布局时最右边盒子放不下可用下面方式：

    .box {
    margin-right: -10px;
}

    <div class="container">
    <div class="box">
        <div>
           1
        </div> 
        <div>
          2
        </div> 
         <div>
          3
        </div> 
    </div>
</div>

    在大盒子里边再包裹一个盒子，通过 margin-right：-10px 的方式让它向右延伸，大于原本大盒子的宽度，从而是它可以放的下浮动元素；

浮动的问题 - 高度塌陷

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

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

  • 解决办法为清浮动（清除浮动）；

  • 目的：

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

CSS 属性 - clear

  • 作用：

    • 可以指定一个元素是否必须移动（清除浮动后）到在它之前的浮动元素下面；

  • 常见取值：

    • left：要求元素的顶部低于之前生成的所有左浮动元素的底部；
    • right：要求元素的顶部低于之前生成的所有右浮动元素的底部；
    • both：要求元素的顶部低于之前生成的所有浮动元素的底部；
    • none：默认值，无特殊要求；

清除浮动的方法

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

    • 拓展性不好；

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

    • 会增加很多无意义的空标签；
    • 违反了结构与样式分离的原则；

  • 方法三：给父元素增加 ::after 伪元素；

    • 纯 CSS 样式解决，结构与样式分离；
.clear_fix::after {
    content: "";
    display: block;
    clear: both;
    
    /* 浏览器兼容性设置*/
    visibility: hidden;
    height: 0;

CSS Flex 布局

  • Flexbox（弹性盒子）：

    • 弹性盒子是一种用于按行或按列布局元素的一维布局方法；
    • 元素可以膨胀以填充额外的空间，收缩以适应更小的空间；
    • 通常我们使用 Flexbox 来进行布局的方案称之为 flex 布局（flex layout）；

  • flex 布局是目前 web 开发中使用最多的布局方案：

    • flex 布局（Flexible 布局，弹性布局）；
    • 目前特别在移动端基本已完全普及；

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-direction

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

    • flex-direction 决定了 main axis 的方向，有四个取值；
    • row （默认值）、row-reverse、column、column-reverse；

flex-wrap

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

    • nowrap（默认）：单行；
    • wrap：多行；
    • wrap-reverse：多行翻转（主轴方向并未发生改变）；

flex-flow

  • flex-flow 属性是 flex-direction 和 flex-wrap 的简写；

    • 顺序任意，并且都可以省略；
      .container {
        width: 500px;
        height: 500px;
        background-color: orange;

        display: flex;

        /* 修改主轴的方向 */
        /* flex-direction: row;
          
        flex-wrap: wrap-reverse; */
        /* 简写 */
        flex-flow: column wrap;
      }

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 与 mian start、main end 之间的距离是 flex items 之间距离的一半；

    • space-evenly：

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

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

  • 决定了多行 flex items 在 crossaxis 上的对齐方式：

    • 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-item 属性 - order

  • order 决定了 flex items 的排布顺序；

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

flex-item 属性 - align-self

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

    • auto（默认值）：遵从 flex container 的 align-items 设置；
    • stretch、flex-start、flex-end、center、baseline，效果跟 align-items 一致；

flex-item 属性 - flex-grow

  • 决定了 flex items 如何扩展（拉伸/是成长）：

    • 可以设置任意非负数字，默认值是 0；
    • 当 flex container 在 main axis 方向上有剩余 size 时，flex-grow 属性才会有效；

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

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

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

flex-item 属性 - flex-shrink

  • 决定了 flex items 如何收缩（缩小）：

    • 可以设置任意非负数字，默认值是 0；
    • 当 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/minheight;

flex-item 属性 - flex-basis

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

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

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

    • max-width/max-height/min-width/min-height；
    • flex-basis；
    • width/height；
    • 内容本身的 size；

flex-item 属性 - flex

  • flex 是 flex-grow || flex-shrink || flex-basis 的简写；

CSS 属性 - transform

  • 允许对某一元素进行某些形变，包括旋转，缩放，倾斜或平移等；
  • 并非所有盒子都可以进行 transform 的转换（通常行内级元素不能进行形变）；

transform 的用法

  • 常见的函数 transform function 有;

    • 平移：translate（x，y）；
    • 缩放：scale（x，y）；
    • 旋转：rotate（deg）；
    • 倾斜：skew（deg，deg）；

位移 - translate

  • 平移：translate（x，y）

    • 这个 CSS 函数用于移动元素在平面上的位置；

  • 值个数：

    • 一个值：设置 x 轴上的位移；
    • 两个值：设置 x 轴和 y 轴上的位移；

  • 值类型：

    • 数字：100px；
    • 百分比：参照元素本身；

元素水平居中定位的方法小结

  • 水平居中：

    • 行内级元素：

      • 设置父元素的 text-align：center；

    • 块级元素：

      • 设置当前块级元素（宽度）margin：0 auto；

    • 绝对定位：

      • 元素有宽度情况下，left 0 / right 0 / margin：0 auto；

    • flex：

      • justify-content：center；

  • 垂直居中：

    • 绝对定位：

      • 元素有高度情况下，top 0 / bottom 0 / margin：auto 0；

    • flex：

      • align-items：center；

    • top / translate；

      .box {
    position: relative;\
    top: 50%;
    transform: translate(0, -50%)
}

缩放 - scale

  • 缩放：scale（x，y）

    • scale() CSS 函数可改变元素的大小；

  • 值个数：

    • 一个：设置 x 轴上的缩放；
    • 两个：设置 x 轴和 y 轴上的缩放；

  • 值类型：

    • 数字：

      • 1：保持不变；
      • 2：放大一倍；
      • 0.5：缩小一半；

    • 百分比：不常用；

旋转 - rotate

  • 旋转：rotate；

  • 值个数：

    • 一个：表示旋转的角度；

  • 值类型：

    • 常用单位：deg (角度)；
    • 正数为顺时针；
    • 负数为逆时针；

transform-origin

  • 决定形变的原点：

    • 在进行 scale 缩放或 rotate 旋转时，都会有一个原点；

  • 一个值：

    • 设置 x 轴的原点；

  • 两个值：

    • 设置 x 轴和 y 轴的原点；

  • 设置值：

    • left、center、right、top、bottom 等关键字；
    • length：从左上角开始计算；
    • 百分比：参考元素本身大小；

倾斜 - skew

  • skew(x, y)

    • 函数定义了一个元素在二维平面上的倾斜转换；

  • 值个数：

    • 一个：表示 x 轴上的倾斜；
    • 两个：表示 x 轴和 y 轴上的倾斜；

  • 值类型：

    • deg：倾斜的角度；
    • 正数为顺指针；
    • 负数为逆时针；

  • 倾斜原点也受 transform-origin 的影响；

transform 设置多个值

  • 多个值之间使用空格进行分隔；

    .box {
    width: 200px;
    height: 200px;
    background-color: #red;
    
    transform: translate:(100px) scale(1.2) rotate(45deg);
}

认识 transition 动画

  • 含义：

    • CSS transitions 提供了一种在更改 CSS 属性时控制动画速度的方法；
    • 可以让 CSS 属性变化成为一个持续一段时间的过程，而不是立即生效的；
    • 比如将一个元素从一个位置移动到另一个位置，默认在修改完 CSS 属性后会立即生效；
    • 但是我们可以通过 CSS transition，让这个过程加上一定的动画效果，包括一定的曲线速率变化；

  • 通过将两个状态之间的过渡称为隐式过渡，因为开始与结束之间的状态由浏览器决定；

  • CSS transitions 可以决定：

    • 哪些属性发生动画效果（设置 property）；
    • 持续多久（设置 duration）；
    • 如何动画（定义 timing function）；
    • 延时多久（设置 delay）；

过渡动画 - transition

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

    • all：所有属性都执行动画；
    • none：所有属性都不执行动画；
    • CSS 属性名称：要执行动画的 CSS 属性名称，比如 width、left、transform 等；

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

    • 单位可以是秒或者毫秒；

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

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

认识 CSS Animation

  • transition 过渡动画有如下缺点：

    • 只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态；
    • 不能重复执行，除非一再触发动画；
    • 需要在特定状态下会触发才能执行，比如某个属性被修改了；

  • CSS Animation 的使用分成两个步骤：

    • 步骤一：使用 keyframes 定义动画序列（每一帧动画如何执行）；
    • 步骤二：配置动画执行的名称、持续时间、动画曲线、延迟、执行次数、方向等等；

@keyframes 规则

  • 可以使用 @keyframes 来定义多个变化状态，并且使用 animation-name 来声明匹配：

    • 关键帧使用 percentage 来指定动画发生的时间点；
    • 0% 表示动画的第一时刻，100% 表示动画的最终时刻；
    • 因为这两个时间点特殊，也可用别名：from 和 to；

  • 可以使用 from 和 to 关键字：

    • from 相当于 0%；
    • to 相当于 100%；

animation 属性

  • animation-name：指定执行哪一个关键帧动画；

  • animation-duration：指定动画的持续时间；

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

  • animation-delay：指定延迟执行的时间；

  • animation-iteration-count：指定动画执行的次数，执行 infinite 表示无限动画；

  • animation-direction：指定方向，常用值 normal 和 reverse；

  • animation-fill-mode：执行动画最后保留哪一个值：

    • none：回到没有执行动画的位置；
    • forwards：动画最后一帧的位置；
    • backwards：动画第一帧的位置；

  • animation-play-state：指定动画运行或者暂停；

CSS 属性 - vertical-align

  • line boxes

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

  • baseline

    • 行盒内行内级元素默认是 baseline 对齐；

  • 行内级元素的 baseline：

    • 文本的 baseline 是字母 x 的下方；
    • inline-block 默认的 baseline 是 margin-bottom 的底部（盒子的底部）；
    • inline-block 有文本时，baseline 是最后一行文本的 x 的下方；

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

    • 方法一：设置成 top/middle/bottom;
    • 方法二：将图片设置成 block 元素；

CSS 属性 - white-space

  • 用于设置空白处理和换行规则；

    • normal：合并所有连续的空白，允许单词超屏时自动换行；
    • nowrap：合并所有连续的空白，不允许单词超屏时自动换行；
    • pre：阻止合并所有连续的空白，不允许单词超屏时自动换行；
    • pre-wrap：阻止合并所有连续的空白，允许单词超屏时自动换行；
    • pre-line：合并所有连续的空白（保留换行），允许单词超屏时自动换行；

CS S属性 - text-overflow

  • 通常用来设置文字溢出时的行为：

    • clip：溢出的内容直接裁剪掉（字符可能会显示不完整）；
    • ellipsis：溢出那行的结尾用省略号表示；

  • text-overflow 生效的前提是 overflow 不为 visible；

CSS 中的函数

  • 已经学习过的 CSS 函数：

    • 比如 rgb/rgba/translate(位移)/rotate(旋转)/scale(缩放)；
    • CSS 函数通常可以帮助我们更加灵活的来编写样式的值；

  • 新增 CSS 函数：

    • var：使用 CSS 定义的变量；
    • calc：计算 CSS 值，通常用于计算元素的大小或位置；
    • blur：毛玻璃（高斯模糊）效果；
    • gradient：颜色渐变函数；

CSS 函数 - var

  • CSS 中可以自定义属性：

    • 属性名需要以两个减号（--）开始；
    • 属性值则可以是任何有效的 CSS 值；
html {
    --main-color：red;
}
  • 可以通过 var 函数来使用：
.box {
    color: var(--main-color);
}

  • 规则集定义的选择器，是自定义属性的可见作用域（只在选择器内部有效）；

    • 推荐将自定义属性定义在 html 中，也可用 :root 选择器；

CSS 函数 - calc

  • calc() 函数允许在声明 CSS 属性值时执行一些计算；

    • 计算支持加减乘除的运算；

      • + 和 - 运算符的两边必须要有空白字符；

    • 通常用来设置一些元素的尺寸或者位置；

.box .container {
    display: inline-block;
    width: calc(100% - 60%);
    height: 100px;
    background-color: red;
}

CSS 函数 - blur

  • blur() 函数将高斯模糊应用于输出图片或者元素；

    • blur(radius);
    • radius,模糊的半径，用于定义高斯函数的偏差值，偏差值越大，图片越模糊；

  • 通常会和两个属性一起使用：

    • filter：将模糊或颜色偏移等图形效果应用于元素；
    • backdrop-filter：为元素后面的区域添加模糊或其他效果；

CSS 函数 - gradient

  • 是一种 CSS 数据类型的子类型，用于表现两种或多种颜色的过渡转变；、

    • CSS 的 数据类型描述的是 2D 图形；
    • 比如 background-image、list-style-image、border-image、content 等；
    • 常见的方式是通过 url 来引入一个图片资源；
    • 它也可以通过 CSS 的 函数来设置颜色的渐变；

  • 常见的函数实现有下面几种：

    • linear-gradient()：创建一个表示两种或多种颜色线性渐变的图片；
    • radial-gradient()：创建一个图像，该图像是由从原点发出的两种或者多种颜色之间的逐步过渡组成；

gradient 的使用

  • linear-gradient：创建一个表示两种或多种颜色线性渐变的图片：

    background-image: linear-gradient(blue, red);

background-image: linear-gradient(to right, blue, red); 

background-image: linear-gradient(to right bottom, blue, red);

background-image: linear-gradient(45deg, blue, red);

background-image: linear-gradient(to right, blue, red 10%, purple 40px, orange);

  • radial-gradient：创建一个图像，该图像是由从原点发出的两种或者多种颜色之间的逐步过渡组成：

    background-image: radial-gradient(blue, red);

background-image: radial-gradient(at 0% 50%, red, yellow)

FC - Formatting Content

  • 块级元素的布局属于 Block Formatting Context（BFC)

    • 也就是 block level box 都是在 BFC 中布局的；

  • 行内级元素的布局属于 Inline Formatting Context（IFC)

    • 而 inline level box 都是在 IFC 中布局中；

BFC - Block Formatting Context 的作用

  • 新的 BFC 形成：

    • 令其 overflow 属性值不为 visible 即可；

  • 概括：

    • 在 BFC 中，box 会在垂直方向上一个挨着一个排布；
    • 垂直方向的间距由 margin 属性决定；
    • 在 同一个 BFC 中，相邻两个 box 之间的 margin 会折叠（collapse）；
    • 在BFC 中，每个元素的左边缘是紧挨着包含块的左边缘的；

  • 作用：

    • 解决 margin 的折叠问题；

      /*形成一个新的BFC用来包裹box1*/
.container {
    overflow: auto;
}

.box1 {
   height: 200px;
   width: 400px;
   background-color: orange;
    
   margin-bottom: 30px;
}

.box2 {
    height: 150px;
    background-color: purple;
    
    margin-top: 50px;
}
/* 由于box1被container所包裹，与box2不属于同一个BFC,所以它们之间不存在margin的折叠问题*/

    • 解决浮动高度塌陷问题；

      • 需要满足两个条件：

        • 浮动元素的父元素触发 BFC，形成独立的块级格式化上下文；
        • 浮动元素的父元素的高度是 auto 的；

      • BFC 的高度是 auto 的情况下，是如下方法计算高度的：

        • 如果只有 inline-level，是行高的顶部和底部的距离；
        • 如果有 block-level，是由最底层的块上边缘和最底层块盒子的下边缘之间的距离；
        • 如果有绝对定位元素，将被忽略；
        • 如果有浮动元素，那么会增加高度以包括这些浮动元素的下边缘；
      .container {
    background-color: orange;
    height: auto; /* 默认值 */
    
    overflow: auto; /* 令父盒子形成新的BFC */
}

.item {
    width: 400px;
    height: 200px;
    float: left;
    background-color: red;
}

媒体查询

  • 媒体查询是一种提供给开发者针对不同设备需求进行定制化开发的借口；

  • 可以根据设备的类型（比如屏幕设备、打印机设备）或者特定的特性（比如屏幕的宽度）来修改页面；

  • 使用方式：

    • 方式一：通过 @import 使用不同的 CSS 规则（常用）；

      @import url(.css/miniScreen.css) (max-width: 800px);

    • 方式二：通过 link 元素内置属性使用；

      <link rel="stylesheet" media="(max-width: 800px)" href="./css/miniScreen.css">

    • 方式三：使用 @media 使用不同的 CSS规则（最常用）；

      @media (max-width: 800px) {
    body {
        background-color: orange;
    }
}

媒体查询 - 媒体类型（Media types）

  • 在使用媒体查询时，必须指定要使用的媒体类型；

    • 媒体类型是可选的，并且会（隐式地）应用 all 类型；

  • 常见类型值：

    • all：适用于所有设备；
    • print：适用于在打印预览模式下载屏幕上查看的分页材料和文档；
    • screen：主要用于屏幕；
    • speech：主要用于语音合成器；

媒体查询 - 媒体特性（Media features）

  • 媒体特性描述了浏览器、输出设备、或是预览环境的具体特征；

    • 通常会将媒体特性描述为一个表达式；
    • 每条媒体特性表达式都必须用括号括起来；

媒体查询 - 逻辑操作符（logical operators）

  • 媒体查询的表达式最终会获得一个 Boolean 值，也就是真（true）或者假（false）；

    • 如果结果为真（true），生效；
    • 如果结果为假（false），不生效；

  • 如果有多个条件，可以通过逻辑操作符联合复杂的媒体查询：

    • and：and 操作符用于将多个媒体查询规则组合成单条媒体查询；
    • not：not 运算符用于否定媒体查询，如果不满足这个条件则返回 true，否则返回 false；
    • only：only 运算符仅在整个查询匹配时才用于应用样式；
    • 逗号：用于将多个媒体查询合并为一个规则；

  • 如：屏幕宽度大于500，小于700时，body 背景颜色为红色；

    @media screen and (min-width: 500px) and (max-width: 700px) {
    body {
        background-color: red;
    }
}

移动端适配案例练习

/* 由于css样式具备层叠性，当多个条件同时满足时，后面的属性设置会覆盖掉上面的属性设置 */
@media (min-width: 320px) {
    .box {font-size: 15px};
}

@media (min-width: 375px) {
    .box {font-size: 18px};
}

@media (min-width: 414px) {
    .box {font-size: 21px};
}

@media (min-width: 480px) {
    .box {font-size: 24px};
}

CSS 中的单位

  • 在 CSS 中，常使用 px 来表示一个长度（大小）；

  • px 是一个长度（length）单位，事实上 CSS 中还有非常多的长度单位；

  • 整体可以分成两类：

    • 绝对长度单位（Absolute length units）；
    • 相对长度单位（Relative length units）；

CSS 中的绝对单位（Absolute length units)

  • 绝对单位：

    • 与其他任何东西都没有关系，通常被认为总是相同的大小；
    • 大多数用于打印时比用于屏幕输出时更有用；
    • 如：px（像素）；

CSS 中的相对单位（Relative length units）

  • 相对长度单位：

    • 相对长度单位相对于其他一些东西；
    • 如父元素的字体大小，或者视图端口的大小；
    • 使用相对单位的好处是，经过一些仔细的规划，可以使文本或其他元素的大小与页面上的其他内容相对应；

  • em：

    • 在 font-size 中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小，如 width；

  • rem：

    • 根元素的字体大小：html 的 font-size；

  • vw：视窗宽度的 1%；

  • vh：视窗高度的 1%；

物理像素和逻辑像素

  • 设备像素，也叫物理像素；

    • 指的是显示器上的真实像素，每个像素的大小是屏幕固有的属性；
    • 如 iphone X 的分辨率是 1125*2436，指的就是设备像素；

  • 设备独立像素，也叫逻辑像素；

    • 使用设备像素显示一个 100px 的宽度，在不同屏幕上显示效果会是不同的；
    • 针对不同屏幕很难进行较好的适配，编写程序必须了解用户的分辨率来进行开发；
    • 在设备像素之上，操作系统为开发者进行抽象，提供了逻辑像素的概念；
    • 如在操作系统上是以 19201080设置的显示分辨率，无论是2k、4k的显示器，对于开发者来说，都是19201080的大小；

  • CSS 像素：

    • CSS 中我们经常使用的单位也是 pixel，它在默认情况下等同于设备独立像素（逻辑像素）；

  • 可以通过 JavaScript 中的 screen.width 和 screen.height 获取到电脑的逻辑分辨率；

DPR、PPI

  • DPR：device pixel ratio

    • Retina 屏幕翻译为视网膜显示屏；
    • 在 Retina 屏幕中，一个逻辑像素在长度上对应两个物理像素，这个比例称之为设备像素比（device pixel ratio）；

  • PPI：每英寸像素；

    • 通常用来表示一个打印图像或者显示器上像素的密度；

常见的 CSS 预处理器

  • Sass/Scss：

    • 2007年诞生，最早最成熟的 CSS 预处理器，拥有 ruby 社区的支持，属于 Haml（一种模板系统）的一部分；
    • 目前受 Less 影响，已进化到全面兼容 CSS 的 Scss;

  • Less：

    • 2009年出现，受 Sass 影响较大，但又使用 CSS 的语法；
    • 比起 Sass ，可编程功能不够，优点是使用方式简单、便捷，兼容 CSS；

  • Stylus：

    • 2010年产生，来自 Node.js 社区，主要用来给 Node 项目进行 CSS 预处理支持；

认识 Less

  • 官方介绍：

    • 加了一些东西的 CSS;

  • Less 是一门 CSS 拓展语言，并且兼容 CSS；

    • Less 增加了很多相比于 CSS 更好用的特性；
    • 比如定义变量、混入、嵌套、计算等等；
    • Less 最终需要被编译成 CSS 运行于浏览器中（包括部署到服务器中）；

Less 代码的编译

  • 方式一：现在 Node 环境，通过 npm 包管理下载 less 工具，使用 less 工具对代码进行编译；

    • webpack 可以自动完成这些操作；

  • 方式二：通过 VSCode 插件编译成 CSS 或在线编译；

  • 方式三：引入 CDN 的 less 编译代码，对 less 进行实时的处理；

    <link rel="stylesheet/less" href="./less/01_less的基本使用.less" />
<script src="https://cdn.jsdelivr.net/npm/less@4"></script>

  • 方式四：将 less 编译的 js 代码下载到本地，执行 js 代码对 less 进行编译；

Less 语法一：Less 兼容 CSS

  • Less 语法一：Less 是兼容 CSS 的；

    • 可以在 Less 文件中编写所有的 CSS 代码；
    • 只是将 css 的拓展名改成了 .less 结尾而已；

Less 语法二 - 变量

  • 在一个大型的网页项目中，CSS 使用到的某几种属性值往往是特定的；

    • 比如使用到的主题颜色值；
    • 若需要改变颜色，不使用变量的话，工程量太大；

  • 在 Less 中使用如下的格式来定义变量：

    @mainColor: #f3c258;

@smallFontSize: 12px;
@normalFontSize: 14px;
@bigFontSize: 18px;

Less 语法三 - 嵌套

  • 在之前的项目中，当我们需要找到一个内层的元素时，往往需要嵌套很多层的选择器；

      .box h1 .keyword {
  color: @mainColor;
  font-size: @bigFontSize;
  }

  • Less 提供了选择器的嵌套

    .box {
  .pel {
    color: @mainColor;
    font-size: @normalFontSize;
  }

  h1 {
    .keyword {
      color: @mainColor;
      font-size: @bigFontSize;
    }
  }

  p {
    a.link {
    }
  }
}

  • 特殊符号：& 表示当前选择器的父级

Less 语法四 - 运算

  • 在 Less 中，算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算；

    • 算术运算符在加、减或比较之前会进行单位换算，计算的结果以最左侧操作数的单位类型为准；
    • 如果单位换算无效或失去意义，则忽略单位；
.box {
    height: 100px + 10%;
    background-color: #ff0000 + #00ff00;
}

Less 语法五 - 混入

  • 在原来的 CSS 编写过程中，多个选择器中可能会有大量重复的代码；

    • 可以将这些代码进行抽取到一个独立的地方，任何选择器都可以进行复用；
    • 在 less 中提供了混入来帮助完成这种操作；

  • 混入是一种将一组属性从一个规则集混入到另一个规则集的方法；

.nowrap_ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.box1 {
  width: .box_size() [width];
  background-color: #f00;

  .nowrap_ellipsis();
}

  • 混入也可以传入变量

    .box_border(@borderWidth: 5px, @borderColor: purple) {
  border: @borderWidth solid @borderColor;
}

  • Less 语法六：映射

    .box_size {
  width: 100px;
  height: 100px;
}
.box1 {
  width: .box_size() [width];
  background-color: #f00;

  .nowrap_ellipsis();
  .box_border();
}

  • 混入和映射结合：混入也可以当做一个自定义函数来使用

    .pxToRem(@px) {
    result: (@px / @htmlFontSize) * 1rem;
}

.box {
    width: .pxtToRem(100)[result];
    font-size: .pxToRem(18)[result];
}

Less 其他语法补充

  • Less 语法七：extend 继承；

    • 和 mixins 作用类似，用于复用代码；
    • 和 mixins 相比，继承代码最终会转化成并集选择器；
.bordered {
    border-bottom: 10px solid #000;
}

.box {
    &:extend(.bordered);
}

.border,
.box {
    border-bottom: 10px solid #000;
}

  • Less 语法八：Less 内置函数

    • Less 内置了多种函数用于转换颜色、处理字符串、算术运算等；
.box {
    color: color(red); // 将red转成RGB的值
    width: convert(100px, "in"); // 单位的转换
    font-size: ceil(18.5px); // 数字函数
}

  • Less 语法九：作用域

    • 在查找一个变量时，首先在本地查找变量和混入；

    • 若找不到，则从“父”级作用域继承；

      .box {
    .inner {
        font-size: @fontSize; // 使用15px
    }
    @fontSize: 15px;
}

  • Less 语法十：注释

    • 在 Less 中，块注释和行注释都可以使用；

  • Less 语法十一：导入

    • 导入的方式和 CSS 的用法是一致的；
    • 导入一个 .less 文件，此文件中的所有变量就可以全部使用了；
    • 如果导入的文件是 .less 扩展名，则可以将扩展名省略掉；

布局视口和视觉视口

  • 布局视口：

    • 默认情况下，一个在 PC 端的网页在移动端的显示：

      • 第一，它会按照宽度为 980px 来布局一个页面的盒子和内容；
      • 第二，为了显示可以完整的显示在页面中，对整个页面进行缩小；

    • 相对于 980px 布局的这个视口，称之为布局视口；

      • 默认宽度为 980px；

  • 视觉视口：

    • 默认情况下，按照 980px 显示内容，那么右侧有一部分区域就无法显示，所以手机端浏览器起会默认对页面进行缩放以显示到用户的可见区域中；
    • 显示在可见区域的视口即视觉视口；

理想视口

  • 如果所有的网页都按照 980px 在移动端布局，那么最终页面都会被缩放显示；

    • 这种方式不利于进行移动开发；
    • 通过设置理想视口来解决；

  • 理想视口：

    • 可以对默认情况下的布局视口进行宽度和缩放的设置，以满足正常在一个移动端窗口的布局；

    • 可以设置 meta 中的 viewport；

      • 取值：

        • width：一个正整数，或者字符串 device-width，定义 viewport 的宽度；
        • height：一个正整数，或者字符串 device-height，定义 viewport 的高度；
        • initial-scale：一个 0.0-10.0 之间的正数，定义设备宽度与 viewport 大小之间的缩放比例；
        • maximum-scale：一个 0.0-10.0 之间的正数，定义缩放的最大值，必须大于等于 minimum-scale；
        • minimum-scale：一个 0.0-10.0 之间的正数，定义缩放的最小值，必须小于等于 maximum-scale；
        • user-scalable：yes 或 no，默认为 yes，若设置为 no，将无法缩放当前页面；

移动端适配方案

  • 移动端的屏幕尺寸通常非常繁多，我们希望在不同的屏幕尺寸上显示不同的大小；

    • 如设置一个 100 * 100 的盒子；

      • 在 375px 的屏幕上显示是 100 * 100;
      • 在 320px 的屏幕上显示是 90+ * 90+；
      • 在 414px 的屏幕上显示是 100+ * 100+；

  • 处理方案：

    • 方案一：百分比设置；

      • 因为不同属性的百分比值，相对的可能是不同参照物，所以百分比往往很难统一；
      • 所以百分比在移动端适配中使用是非常少的；

    • 方案二：rem 单位 + 动态 html 的 font-size；

    • 方案三：vw 单位；

    • 方案四：flex 的弹性布局；

适配方案 - rem+动态 html 的 font-size

  • rem 单位是相对于 html 元素的 font-size 来设置的，若我们需要在不同屏幕下有不同尺寸，可以动态修改 html 的 font-size 尺寸；

  • 在开发中，只需要考虑两个问题：

    • 问题一：针对不同的屏幕，设置 html 不同的 font-size；
    • 问题二：将原来要设置的尺寸，转化为 rem 单位；

rem 的 font-size 尺寸

  • 方案一：媒体查询

    • 可以通过媒体查询来设置不同尺寸范围内的屏幕 html 的 font-size 尺寸；

    • 缺点：

      • 1.需要针对不同的屏幕编写大量的媒体查询；
      • 2.如果动态改变尺寸，不会实时进行更新；
      @media screen and (min-width: 320px) {
        html {
          font-size: 20px;
        }
      }

      @media screen and (min-width: 375px) {
        html {
          font-size: 24px;
        }
      }
      @media screen and (min-width: 414px) {
        html {
          font-size: 28px;
        }
      }
      @media screen and (min-width: 480px) {
        html {
          font-size: 32px;
        }
      }
      .box {
        width: 5rem;
        height: 5rem;
        background-color: orange;
      }

  • 方案二：编写 js 代码

    • 如果希望实时改变屏幕尺寸时，font-size 也可以实时更改，可以通过 js 代码；

    • 方法：

      • 1.根据 html 宽度计算出 font-size 的大小，并且设置到 html 上；
      • 2.监听页面的实时改变，并且重新设置 font-size 的大小到 html 上；
// 1.获取html的元素
const htmlEl = document.documentElement;

function setRemUnit() {
  // 2.获取html的宽度(视口的宽度)
  const htmlWidth = htmlEl.clientWidth;
  // 3.根据宽度计算一个html的font-size的大小
  const htmlFontSize = htmlWidth / 10;
  // 4.将font-size设置到html上
  htmlEl.style.fontSize = htmlFontSize + "px";
}
// 保证第一次进来时，可以设置一次font-size
setRemUnit();

// 当屏幕尺寸发生变化时，实时来修改html的font-size
window.addEventListener("resize", setRemUnit);
// 当页面发生跳转操作时，自动执行一次上述代码
window.addEventListener("pageshow", function(e) {
    if (e.persisted) {
        setRemUnit();
    }
})

  • 方案三：lib-flexible 库

    • 事实上，lib-flexible 库与方案二相同，可以直接引用；

rem 的单位换算

  • 方案一：手动换算

    • 如有一个 375px 的屏幕，100px 宽高的盒子；
    • 需要将 100px 转成对应的 rem 值；
    • 100 / 37.5 = 2.6667，其他也是相同的方法计算即可；

  • 方案二：less / scss 函数

    .pxToRem(@px) {
  result: 1rem * (@px / 37.5);
}

.box {
  width: .pxToRem(100) [result];
  height: .pxToRem(100) [result];
  background-color: orange;
}

p {
  font-size: .pxToRem(14) [result];
}

  • 方案三：postcss-pxtorem

    • 借助于 webpack 的工具完成自动的转化；

  • 方案四：VSCode 插件

    • px to rem 的插件，在编写时自动转化；

vw 和 rem 的对比

  • rem 事实上是作为一种过渡的方案，利用的是 vw 的思想。

    • 不管是自己编写的 js，还是 flexible 的源码；
    • 都是将 1rem 等同于设计稿的 1 / 10，再利用 1rem 计算相对于整个屏幕的尺寸大小；

  • vw 相比于 rem 的优势：

    • 优势一：不需要计算 html 的 font-size 大小，也不需要给 html 设置；
    • 优势二：不会因为设置 html 的 font-size 大小，而必须给 body 再设置一个 font-size，防止继承；
    • 优势三：因为不依赖 font-size 的尺寸，不用担心某些原因 html 的 font-size 尺寸被篡改，页面尺寸混乱；
    • 优势四：vw 相比于 rem 更加语义化，1vw 刚好是 1 / 100 的 viewport 的大小；
    • 优势五：可以具备 rem 之前的所有优点；

  • vw 只需要将尺寸换算成 vw 单位即可；

vw 的单位换算

  • 方案一：手动换算

    • 如有一个 375px 的屏幕，100px 宽高的盒子；
    • 需要将 100px 转成对应的 vw 值；
    • 100 / 3.75 = 26.667，其他使用相同方法计算即可；

  • 方案二：less / scss 函数

    @vwUnit: 3.75;

.pxToVw(@px) {
    result: 1vw * (@px / @vwUnit);
}

.box {
    width: .pxToVw(100)[result];
    height: .pxToVw(100)[result];
}

  • 方案三：postcss-px-to-viewport-8-plugin

    • 和 rem 一样，在前端的工程化开发中，可以借助于 webpack 的工具来完成自动的转化；

  • 方案四：VSCode 插件

    • px to vw 的插件，在编写时自动转化；

Grid 布局重要概念

  • Grid Container

    • 元素设置 display 为 grid 的盒子；

  • Grid Item，单元格称之为 grid cell

    • grid container 的直接子项（必须是直接子代）；

  • Grid Line

    • 构成网格结构的分割线；
    • 可以是垂直的（“列网格线”）或水平的（“行网格线”）；

  • Grid Track

    • 两条相邻网格线之间的空间；
    • 可以看成是网格的行或列；

  • Grid Area

    • 由四条网格线包围的总空间；
    • 一个网格线区域可以由任意数量的网格单元组成；
avatar
文章
阅读
粉丝