前端技术栈-CSS | 青训营笔记

永夜不坠
107 阅读11分钟

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

一、本堂课主要内容

  1. CSS 代码构成
  2. CSS 使用方法
  3. CSS 流程之选择器组、文本渲染
  4. 调试 CSS
  5. CSS 选择器的特异度
  6. CSS 继承
  7. CSS 求值过程解析
  8. CSS 布局方式及相关技术
  9. CSS 盒模型 - 行级
  10. CSS 盒模型 - 块级

二。知识点速览

  1. CSS是什么

    CSS全称Cascading Style Sheets（层叠样式表），主要用来定义页面的元素的样式，比如字体大小颜色，元素位置，动画效果等

  2. CSS基本结构

    image.png

  3. 使用CSS

    外链、嵌入、内联，3种使用方式

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 外链 -->
    <link rel="stylesheet" href="style.css">
    <!-- 嵌入 -->
    <style>
        h1 {
            color: red;
        }
    </style>
</head>
<body>
    <!-- 内联 -->
    <p style="color: cyan;"></p>
</body>
</html>

  4. CSS如何工作

    image.png （简单的描述，未考虑很多事情，比如js）

  5. CSS选择器

    作用：找出页面的元素，以便设置样式

    /* 通配选择器 */
* {
    box-sizing: border-box;
}
/* 标签选择器 */
h1 {
    color: red;
}
/* 类选择器，类名前加个"."，对应标签的类名，如 <button class="btn">按钮</button> */
.btn {
    background-color: #ccc;
}
/* id选择器，id名前加个"#"，对应标签的id，如 <div id="logo"></div> */
#logo {
    width: 200px;
}
/* 属性选择器，属性名外用"[]"包裹，对应标签的属性，如 <input value="" disabled /> */
[disabled] {
    background-color: #eee;
}
/* 属性选择器，带值 */
input[type="password"] {
    border-color: red;
    color: red;
}

    选择器也可以组合起来使用

    image.png

    也可以多个选择器使用同一份样式，选择器之间用逗号分隔

    h1, h2, #btn {
    color: red;
}

  6. 伪类和伪元素

    不基于标签和属性的定位的元素

    /* 链接默认样式 */
a:link {
    color: black;
}
/* 访问后的样式 */
a:visited {
    color: gray;
}
/* 鼠标悬浮于链接上的样式 */
a:hover {
    color: orange;
}
/* 链接激活的样式，被点击时 */
a:active {
    color: red;
}
/* 聚焦时的样式，常用于输入框 */
:focus {
    outline: 2px solid orange;
}

    更多伪类

    伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。常用的有 ::before 和 ::after

  7. 颜色，RGB和HSL

    RGB就是红绿蓝3种颜色叠加（演示案例）

    2种使用方式#ff0000和rgb(255, 0, 0)，前者有6个颜色的位置，用的是16进制，每2位代表一个颜色，后者括号内每个位置代表一个颜色，10进制，对应的就是0-255的范围。这个值的大小是控制颜色的深度的，越小越接近黑，越大越接近自身的颜色，3个255就是纯的红绿蓝了，叠加在一块就是白色。

    HSL（演示地址）

    image.png

    透明度，RGB和HSL的颜色是不透明的，透明的使用：

    #ff000080，rgba(255, 0, 0, 0.5)，hsla(0, 100%, 50%, 0.5)

  8. 字体

    font-family字体族，使用格式如font-family: Optima, Georgia, serif;，后面跟着一到多种字体，当前一种字体不存在或者不支持样式所修饰的文字时，就会使用后面一种。

    也可以不使用本地字体，通过@font-face使用web字体：

    @font-face {
    font-family: "Megrim";
    src: url(https://fonts.gstatic.com/s/megrim/v11/46kulbz5WjvLqJZVam_hVUdI1w.woff2) format('woff2');
}

h1 {
    font-family: Megrim, Cursive;
}

    其他的一些样式：

    • font-size，控制字体的大小，值为：关键字small、medium、large，或者百分数（相对于父元素字体的大小）120%，或者长度1px，2px（px表示像素点），2em（em和百分数类似），
    • line-height，控制行高，值：直接数字表示行高为多少倍，带px单位的表示行高具体为多少
    • text-align，文字对齐效果，比如文字居中、靠左、靠右等，演示案例
    • letter-spacing，字母间隔，word-spacing，单词间隔
    • text-indent，内容缩进，演示案例
    • text-decoration，文字装饰，如下划线、删除线等
    • white-space，指定怎么处理元素内的空白，默认情况下，浏览器会将多个空白和换行合并为1个空格。值为：
      • normal，默认
      • nowrap，合并空白不换行，正常情况下一行内容展示不下时浏览器会自动换行
      • pre，保留所有空白和换行，不自动换行
      • pre-wrap，保留空白和换行且会自动换行
      • pre-line，合并空白保留换行

  9. 调试CSS

    使用方法：右键 -> 检查；Ctrl + Shift + I（Windows）；Cmd + Opt + I（Mac）；F12

    上半部分为html元素，选中一个元素，下半部分为对应的样式，即可调试

  10. 选择器生效优先级（特异度）

    特异度越高选择器优先级越高

    内联式 > id选择器 > 类选择器 > 标签选择器

    不存在上述压制时，多个选择器特异度比单个的高，比如：.btn.primary大于.btn，input.error > .error

    此外还可以使用!important来提升优先级

    !important 与优先级无关，但它与最终的结果直接相关，使用一个 !important 规则时，此声明将覆盖任何其他声明。

    不过要尽量避免使用!important，因为这会破坏了优先级规则，使得CSS调试更困难

  11. 继承

    一些属性会自动继承父元素的值，除非显示的指定一个值，如font-size，color

    当然也有不会自动继承的，如box-sizing，如果非要继承的话，可以显示继承：box-sizing: inherit

  12. CSS求值过程

    CSS中每个属性都有一个初始值，如：background-color的初始为transparent，所以这并不意味着你没给一个div background-color，它就不会有这个样式

    求值过程

  13. overflow，指定内容超出区域该怎么处理，值为visible、hidden、scroll，分别为直接展示出来、超出部分隐藏、区域设置滚动条然后可以滚动查看内容。演示案例

  14. 布局

    布局就是确定内容的大小和位置，3种布局：常规流（包括行级、块级、表格、flex、grid）、浮动和绝对定位

三、重难点、混淆点

1. 盒模型

从内到外分别为content，padding，border，margin

  • content指盒子的主体内容区域，盒子内元素存放位置，可以指定宽高

    • width：指定宽度，取值为长度、百分比、auto，auto由浏览器根据其他属性决定，百分比为相对盒子所在容器的宽度
    • height：指定高度，取值与上面一样，auto由内容高度决定，容器要有指定高度时，百分比才生效，不能容器依赖盒子的高度，盒子又依赖于容器的高度

  • padding指定元素4个方向的内边距，百分数的值时为相对容器的宽度

    值的顺序：padding: 1px 2px 3px 4px为上、右、下、左的顺序，即上边距为1px，左边距为4px，padding: 1px 2px 3px为上、左右、下的顺序，即左右内边距都是2px，padding: 1px 2px则为上下、左右，padding: 1px则为上下左右都是1px

    image.png

  • border，指定边框的样式粗细颜色

    三个属性border-width，border-style，border-color，四个方向border-top，border-left，border-bottom，border-right，也可以组合起来，比如border-left-width

    简写就一个border，比如border: 1px solid #ccc，分别表示粗细、样式、颜色，不分顺序，反正不会搞混。

    制作一个三角形，宽高设为0，设置边框，如下

    此时将三个边框或者2个相邻的边框颜色设为透明，即可得到三角形

  • margin为元素四个方向的外边距，即元素和其他元素在四个方向上至少保持多少距离，取值可以为长度、百分数、auto。auto为自适应，即浏览器自动计算。margin为简写，全部的有margin-left，margin-right，margin-top，margin-bottm四个。

    然后就是值的顺序，与padding一样

    margin: auto水平居中，浏览器自动计算，所以元素左右分配的外边距一样

    image.png

    注意：一般盒子的上下外边距会合并的，即上面的盒子下边距设为100px，下面的盒子上边距设为50px，就会合并边距，最终为100px。一个简单的案例

上面所说的盒子为content-box，还有一种是border-box，结构如下：

即height和width指的是整个盒子除外边距的高度，这个就更符合认知了，设置的height、width为多少，看到的盒子就多高多宽

2. 行级 & 块级

  • 行级盒子，块级盒子

    块级盒子不和其他盒子并列摆放，即一行只有一个盒子，适用于所有的盒模型属性

    行级盒子会和其他的盒子放成一行，超出时拆成多行，且盒模型中的width、height不适用

  • 生成行级盒子/块级盒子

    块级元素会生成块级盒子，body、article、div、main、section、h1-h6、p、ul、li等都为块级盒子，此外display: block也会生成块级盒子

    display: block，块级盒子

    display: inline，行级盒子

    display: inline-block，行级，可以放在行级盒子中，有宽高、作为一个整体不会被拆分成多行

  • 行/块级排版上下文

    块级排版上下文：Block Formatting Context（BFC），以下部分会生成块级盒子：根元素、浮动、绝对定位、inline-block、flex子项和grid子项、overflow值不为visible的块盒、display: flow-root。排版规则：

    • 盒子从上到下摆放
    • 垂直方向margin合并，但2个BFC之间的margin不合并
    • 不与浮动元素重叠

    行级排版上下文：Inline Formatting Context（IFC），只包含行级盒子的容器会创建IFC。排版规则：

    • 盒子在一行内水平摆放，一行摆不下时换行
    • text-align决定一行内盒子的水平对齐，vertical-align决定盒子行内的垂直对齐
    • 避开浮动元素

3. flex布局

flex box是一种新的排版上下文，可以控制子级盒子的摆放方向、对齐、换行、高宽等

  • flex-direction，控制盒子的摆放方向，方向为主轴，与主轴相交的轴为侧轴

    image.png

  • justify-content，控制主轴方向上的对齐

  • align-items，控制主轴上的元素在侧轴方向上的对齐

  • align-self，在每子元素身上设置，控制该元素侧轴方向上的对齐

flexibility

设置子项的弹性，即有剩余空间时伸展，空间不够时收缩

  • flex-grow: 有剩余空间时的伸展能力，比如容器宽为900px，其中3个子元素width设置为200px，伸展能力分别为2、1、0，那么最终3个元素宽为400px、300px、200px。因为减掉200 * 3，容器还剩300px，这部分就按照2：1：0分给3个子元素
  • flex-shrink：无空间时的收缩能力，与上面类似，设置为0是则该子元素不会收缩
  • flex-basis：无伸展无收缩时基础长度，基本不用，因为基本都width、height已经定义好了

简写为flex: grow shrink basis，顺序不能变，可少些，但flex：1 100px不表示没设置grow，而是没设置shrink

4. grid布局

网格布局，相对于flex的1维，这个是2维的

image.png

  • grid-template划分网格

    /* 分成多少列 */
/* 分成3份，分别为100px、100px、200px */
grid-template-columns: 100px 100px 200px;
/* 分成3份，分别为容器的30%，容器的30%，剩下的自动分配，即40% */
grid-template-columns: 30% 30% auto;
/* 分成多少行 */
/* 分成5份，分别为100px、200px，剩下的按照1：1：2分配 */
grid-template-rows: 100px 200px 1fr 1fr 2fr;
/* 分成3份，1：1：1 */
grid-template-columns: repeat(3, 1fr);

  • 网格线和网格区域

    网格线：

    网格区域：

    [演示案例](https://cdpn.io/webzhao/debug/mdBQBqj)

5. position：absolute、relative等

position的值：

  • static：默认值，正常布局，top, right, bottom, left 和 z-index 属性无效

  • relative：相对原本位置的偏移，top, right, bottom, left控制偏移量，top: 10px，相对原来往下偏移10px，bottom: -10px，相对原来往下偏移10px

  • absolute：元素移出正常文档流，即文档不会为该元素预留空间，相对最近的非static祖先元素定位，top, right, bottom, left控制绝对位置，即假设祖先元素为A，则默认会靠在A的左上角，top: 10px，则会距离A顶端10px，bottom: 10px，则会距离A底部10px

  • fixed：移出正常文档流，位置为相对屏幕视口的位置，注意是屏幕视口，不是页面内容。但是当元素祖先的 transform、perspective、filter 或 backdrop-filter 属性非 none 时，容器由视口改为该祖先。

  • sticky：粘性布局，相对最近的可滚动的祖先或者块级祖先偏移，元素会随页面正常滚动，但滚动到某一位置时就会固定，除非再滚回去。

    注意，一个 sticky 元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的 overflow 是 hidden、scroll、auto 或 overlay 时），即便这个祖先不是最近的真实可滚动祖先。

    下面这个例子，可以试试overflow: auto注释前后的效果

    <!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            .qwe {
                overflow: auto;
            }
            .div {
                position: sticky;
                top: 100px;
                background-color: red;
                width: 100px;
                height: 100px;
            }
        </style>
    </head>
    <body>
        <div class="qwe">
            xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>
            xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>
            <div class="div"></div>
            xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>
            xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>
            xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>
            xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>
        </div>
    </body>
</html>

三、个人总结

内容还是有不少的，后面盒模型和flex布局还是用的比较多的，要多多了解。

position部分不是很难，但掌握的不熟时一旦踩坑了也难以发现，要仔细了解生效场景。

avatar
文章
阅读
粉丝