理解CSS | 青训营笔记

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

本堂课的重点内容：

使用CSS的方法
CSS选择器
字体的使用
布局（Layout）、盒子模型、浮动、绝对定位

使用CSS

在页面中使用CSS有三种方法：

第一种方式：（内联样式，行内样式） -标签内部通过style属性设置元素的样式问题：使用内联样式，样式只能对一个标签生效在开发中尽量不要使用内联样式方法

第二种方式(内部样式表) -将样式编写到head中的style标签里通过css的选择器来选中元素并为其设置样式可以同时为多个标签设置样式，并且修改时只修改一次就可

<style>
    p{
        color: red;
        font-size: 50px;
    }
</style>

第三种方式（外部样式表）

-将css样式编写到一个外部的css文件中，通过link标签引入外部的css文件

<link rel="stylesheet" href="./style.css">

link标签引入css文件样式可以子啊不同的页面使用将样式编写到外部css文件中，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户的体验。

推荐使用外联样式表

CSS的工作方式/原理

CSS的基本语法

选择器声明块

选择器

选择器：可以选中页面中指定的元素，以便给他们设置样式。

比如：p 的作用就是选中页面中所有的p元素。

p{
    color: red;
    font-size: 40px;
}

    h1{
        color: seagreen;    
    }

可以使用多种方式选择元素：

1.按照标签名、类或id。 2.按照属性 3.按照DOM树中的位置

元素选择器

作用：根据标签名来选中指定的元素

语法：标签名{}

例子：p{} h1{} div{} id选择器 作用：根据元素的id属性值选中一个元素

语法：#id属性值{}

例子：#red{} #box{}

类选择器

作用：根据元素的class属性值选中一组元素

语法：。class属性值

class是一个标签的属性，和id类似，不同是class可以重复使用可以通过class属性来为元素分组可以同时为一个元素指定多个class属性

通配选择器

作用：选中页面所有的元素

语法： *

 *{
       color: blueviolet;
   }

其它选择器

1.交集选择器

作用选中同时符合多个条件的元素

语法：选择器1选择器2选择器n{}

注意：交际选择器中如果有元素选择器，必须使用元素选择器开头

2.选择器分组（并集选择器）

作用：同时选择多个选择器对应的元素

语法：选择器1选择器2选择器n{}

3.后代元素选择器

作用：选中指定元素内的后代元素

语法：祖先后代

选择下一个兄弟 +

语法：前一个 + 后一个

只找下一个而且紧挨着的

        p + span{

        }

选择下边所有的兄弟 ~ 语法：兄 ~ 兄弟

声明块：通过声明块来指定要为元素设置的样式，声明块是由一个一个的声明组成。声明是一个名值对结构。

一个样式名对应一个样式值，名和值之间以：连接，以；结尾

字体的使用

字体相关的样式

color 用来设置字体颜色
font-size 字体的大小
和font-size相关的单位
em 相当于当前元素的一个font-size
rem 相对于根元素的一个font-size
font-family 字体族（字体的格式）
可选值：
erif 衬线字体
sans-serif 非衬线字体
monospace 等宽字体

-指定字体的类别，浏览器会自动使用该类别下的字体

-font-family 可以同时指定多个字体，多个字体间使用，隔开字体生效时优先使用第一个，第一个无法使用则使用第二个以此类推

font-face可以将服务器中的字体直接提供给用户去使用

@font-face {
        /* 指定字体的名字 */
        font-family:'myfont' ;
        /* 服务器中字体的路径 */
        src: url('字体路径');
        }

图标字体（iconfont）

在网页中经常需要使用一些图标，可以通过图片来引入图标，但是图片大小本身比较大，并且非常不灵活。所以在使用图标时，我们还可以将图标直接设置为字体，然后通过font-size的形式来对字体进行引，这样我们就可以通过使用字体的形式来使用图标

fontawesome 使用步骤：

        1.下载 fontawesome 解压
        2.  将css、webfonts 移动到项目中
        3.将all.css引入到网页中
        4.使用图标字体
        直接通过类名来使用图标字体：
                class="fas fa-bell"
                class="fab fa-accessible-icon"

行高

行高（line height） -行高指的是文字占有的实际高度，可以通过line-height来设计行高，行高可以指定一个大小，也可以直接为行高设置一个整数，如果是整数的话，行高将会是字体的指定的倍数

行高还经常用来设置文字的行间距

行间距 = 行高 - 字体大小

可以将行高设置为和高度一样的值，使单行文字在一个元素中垂直居中

布局（Layout）

布局是确定内容的大小和位置的算法，依据元素、容器、兄弟节点等信息来计算。布局相关技术有常规流、浮动、绝对定位

盒子模型

盒模型、盒子模型、框模型（box、model）

css将页面中的所有元素都设置为了一个矩形的盒子将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆到不同的位置没一个盒子都由以下几部分组成：

            内容区（cintent）
            内边距（padding）
            边框（border）
            外边距（margin）

常规流

文档流（normal flow） 网页是多层结构，通过css可以分别为每一层来设置样式作为用户来讲只能看到最上一层这些层中，最底下的一层称为文档流我们所创建的元素默认都在文档流中进行排列 -对于我们元素主要有两个状态：在文档流和不在文档流。

元素在文档流中有什么特点：

      -块元素
      -块元素会在页面中独占一行
      -默认宽度是父元素的全部（会把父元素撑满）
      -默认高度是被内容撑开
      -行内元素
      -行内元素不会独占页面一行，只占自身大小
      -行内元素在页面中自左向右水平排列，如果一行中不能容纳下所有行内元素
      则元素会换到第二行继续自左向右排列
      -行内元素的默认宽度和高度都是被内容撑开

内容区（content）： 元素中的所有子元素和文本内容都在内容区中排列，内容区大小由 width 和 height 两个属性来设计

                    width 设置内容区的宽度
                    height 设置内容区的高度

边框(border)： 边框属于盒子边缘，边框里边属于盒子内部，出了边框都是盒子的外部。

要设置边框，需要至少设置三个样式：

                边框的宽度 border-width
                边框的颜色 border-color
                边框的样式 border-style

浮动

通过浮动可以是一个元素向其父元素的左侧或右侧移动

使用float 属性来设置子元素的浮动

可选值：

none默认值，元素不浮动

left 元素向左浮动

right 元素向右浮动

注意，元素设置浮动以后，水平布局的等式便不需要强制成立元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置所以元素下边的还在文档流中的元素会自动向上移动

浮动的特点：

1.浮动的元素完全脱离文档流，不再占据文档流中的位置

2.设置浮动以后元素会向父元素的左侧或右侧移动，

3.浮动元素默认不会从父元素中移除

4.浮动元素向左或向右移动时，不会超过他前边的其他浮动元素

5.如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移

6.浮动元素不会超过它上边的浮动的兄弟元素，最多最多就是和它一样高

简单总结：浮动目前来讲它的作用就是让页面中的元素可以水平

理解CSS基础 | 青训营笔记