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

前言

本节课的重点内容主要有：

CSS是什么
CSS是如何工作的
CSS的部分功能与对应属性
选择器优先级和继承问题
布局是什么，怎么布局
块级盒模型，行级盒模型
FlexBox和Gird的基本使用
CSS3的一些新特性

浅品CSS

一、常用语法与基本概念

1、CSS是什么

Cascading Style Sheets（层叠样式表） CSS 是一门基于规则的语言 —— 你能定义用于你的网页中特定元素样式的一组规则。让你的网页更加美观。

用来定义页面元素的样式
设置字体和颜色
设置位置和大小
添加动画效果

    h1 {
        color: red;
        font-size: 5em;
      }

就像上面的代码一样，CSS语法由选择器 (selector)+{} ，在大括号内部定义一个或多个形式为 属性 (property):值 (value); 的 声明 (declarations) 。

2、css的引入

内联样式(行内样式)

要使用内联样式，你需要在相关的标签内使用样式(style) 属性。Style 属性可以包含任何CSS属性，缺点是缺乏整体性和规划性，不利于维护，维护成本高

<!--内联-->
<p style="">example</p>

内部样式

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用<style> 标签在文档头部定义内部样式表，缺点是单个页面内的CSS代码具有统一性和规划性,便于维护，但是在多个页面之间容易混乱

<!--嵌入 -->
<style>
    li{}
    p{}
<style>

外部样式(推荐)

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用标签链接到样式表。标签在(文档的)头部

<!--外链-->
<link rel="stylesheet" href="">

其中外链（推荐)，嵌入（常常用与组件开发），内联（不推荐）就是CSS的生效地点不同而产生的不同使用方式

3、选择器

3.1、**`*`** 选择器

通配选择器 也叫全局选择器，顾名思义，全局选择器可以与任何元素匹配，优先级最低，一般做样式初始化

*{
    margin：0;
    padding: 0;
}

3.2、 `标签` 选择器

也叫元素选择器，HTML文档中的元素，p. b. div、 a. img、 body 等。它选择的是页面上所有这种类型的标签,所以经常描述”共性”，无法描述某一个元素的“个性”

h3{
  color: coral;
 }

3.3、 id选择器

在HTML中给组件绑定id，在CSS中以#开头+id名来达到选择效果，值得注意的是id值必须是唯一的，并且id不能以数字开头


 <p id="exciting">这里是id选择器代码展示</p>  
 
  #exciting{
        background: 
        border:
   }

3.4、合并选择器

可以使用 , 把不同的标签或者不同的类合并到同一个样式，可以减少代码重复；

  h1,p{
      color: red
  }

3.5、 `class` 选择器

与id选择器类似但是是以class的属性名来决定，不同的是其中class的值可以出现多次，

   <h2 class="a" >hello<h2>
   <h3 class="b  c">hello </h3>
   <style>
     .a{
        color: red;
     }
     
     /*先执行选择器b 再执行选择器c*/
      .b{
       color: blue;
      }
      .c{
        fount-size: 20px;
      }
   </style>

5.6、属性选择器

[attr]表示带有以 attr 命名的属性的元素。
[attr=value]表示带有以 attr 命名的属性，且属性值为值的元素。
[attr~=value]表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少有一个值为值。
[attr|=value]表示带有以 attr 命名的属性的元素，属性值为“value”或是以“value-”为前缀（“”为连字符，Unicode 编码为 U+002D）开头。典型的应用场景是用来匹配语言简写代码（如 zh-CN，zh-TW 可以用 zh 作为 value）。-
[attr^=value]表示带有以 attr 命名的属性，且属性值是以 *value *开头的元素。
[attr$=value]表示带有以 attr 命名的属性，且属性值是以 *value *结尾的元素。
[attr*=value]表示带有以 attr 命名的属性，且属性值至少包含一个 *value *值的元素。

/* 存在 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;
}

5.7、伪类

CSS 伪类是添加到选择器的关键字，指定要选择的元素的特殊状态。例如，：hover 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。

/* 所有用户指针悬停的按钮 */
button:hover {
  color: blue;
}

动态伪伪类

:link元素被定义了超链接但并未被访问过
:visited元素被定义了超链接并已被访问过
:active元素被激活
:hover鼠标悬停
:focus元素获取焦点

UI 元素状态伪类

:checked选中的复选按钮或者单选按钮表单元素
:enabled所有启用的表单元素
:disabled所有禁用的表单元素

结构伪类选择器

:fisrt-child父元素的第一个子元素
:last-child父元素的最后一个子元素的元素

5.8、关系选择器

后代选择器

定义：选择所有被E元素包含的F元素，中间用空格隔开语法：E F{}r

子代选择器

定义：选择所有作为E元素的直接子元素F，对更深一层的元素不起作用，用>表示语法： E>F{}

相邻兄弟选择器定义: 选择紧跟E元素后的F元素，用加号表示，选择相邻的第一个兄弟元素 语法： E+F{}
通用兄弟选择器定义：选择E元素之后的所有兄弟元素F，作用于多个元素，用~隔开语法： E~F{}

4、CSS如何工作

5、CSS常用属性

5.1、color（颜色属性）

rgb（0,0,0） 和十六进制 #000000 （#00红00绿00蓝） GRB以红绿蓝三原色直接组合；缺点：不直接关联所见颜色 ；
hsl（0,0%,0%） HSL通过色相，饱和度和亮度组合； hue（色相），范围：0-360 ； saturation（饱和度），范围：0-100% ； lightness（亮度），范围：0-100%
#00000000 Aloha 为颜色透明度类似纯色滤镜，范围0-1从透明到不透明；可添加在grb和hsl后变成rgba shla 而新版的浏览器可不写直接加第四位，可直接在后添加两位作为透明
opacity ：透明度，从不透明到透明 0-->1 (非color的属性值，为了分类先放着)

5.2、 fount（字体属性）

font-family字体主题（可以有多个属性值，浏览器逐级选设备上有的字体），其中存在sans-serif（通用字体）属性，还可以通过下面代码规则来自定义字体主题，但是可能会影响原有字体
```
@font-face{
    font-family："字体名字" src：url（字体所在地址）
    format（""）}
```
font-size字体大小
font-style字体样式属性值为italic时为斜体
font-weight字重 ;范围：100-900 ；其中400可以用normal替代，700可以用bold替代如果存在无法改变自重的情况时，可能是因为改字体仅有normal和bold两种属性
line-height行高 ;推荐使用无单位的数字如1.6 ，其表示为为自身字体大小的1.6倍，更明显直观 , 让行高等于高可以达到垂直居中的效果

以上属性都可浓缩为font属性，简述时其他值为默认值，还有字符间距，首行缩进等

5.3、`background`（背景属性）

background-color 设置元素的背景图像
backcground-image: url("图片地址") 设置背景图片
background-repeat ：他有如下属性来设置背景图片

值属性
repeat 默认值
repeat-x 只向水平方向平铺
repeat-y 只向垂直方向平铺
no-repeat 不平铺

值	属性
repeat	默认值
repeat-x	只向水平方向平铺
repeat-y	只向垂直方向平铺
no-repeat	不平铺

background-size 设置背景大小，他有如下值

值	说明
length	设置背景图片的宽度和高度，第一个值宽度，第二个值高度,如果只是设置-个，第二个值auto
percentage	计算相对位置区域的百分比，第一个值宽度，第二个值高度，如果只是设置-个，第二个值auto
cover	保持图片纵横比并将图片缩放成完全覆盖背景区域的最小大小
contain	保持图片纵横比并将图像缩放成适合背景定位区域的最大大小

background-position该属性设置背景图像的起始位置，其默认值是: 0% 0% | 值 | 说明 | | --- | --- | | left top | 左上角. | | left center | 左中 | | left bottom | 左下 | | ... | ... |

5.4、文本属性

text-align: 设置文本位置

值描述
left 文本居左排列，默认值
right 把文本排列到右边
center 把文本排列到中间
text-decoration 规定添加到文本的修饰，下划线、上划线、删除线等

值描述
underline 定义下划线
overline 定义上划线
line-through 定义删除线
ext-indent文本块中首行文本的缩进

值	描述
left	文本居左排列，默认值
right	把文本排列到右边
center	把文本排列到中间

值	描述
underline	定义下划线
overline	定义上划线
line-through	定义删除线

p{
text-i ndent: 50px;
}

5.5、表格属性

表格边框

指定CSS表格边框,使用border属性,不过都是双边框

table，td {
  border: 1px solid black;
}

折叠边框 border-collapse属性设置表格的边框是否被折叠成一个单一的边框或隔开

table { border-collapse:collapse; }
table,td { border: 1px solid black; }

表格宽度和高度 width和height属性定义表格的宽度和高度

table { wi dth:100%; }
td { hei ght: 50px};

表格文字对齐

表格中的文本对齐和垂直对齐属性

text- align属性设置水平对齐方式，向左，右,或中心

td { text-align:right; }

垂直对齐属性设置垂直对齐 vertical-align属性设置垂直对齐方式，向上，下,或中心

td { vertical-align:bottom; }

表格填充

如果在表的内容中控制空格之间的边框，应使用td和th元素的填充属性

td { padding:15px; }

表格颜色下面的例子指定边框的颜色，和th元素的文本和背景颜色

tab1e,td,th { border:1px solid green; }
td { background-color:green; color:white; }

深入CSS

二、基础布局和盒模型

1.选择器特异度

在给HTML元素应用样式时，多个选择器指向同一个元素，会应用优先级高的选择器，而选择器优先级高低是通过权重计算得到的

权重由高到低如下（为了更直观行让内样式加入其中）：

权重向量： (0, 0, 0, 0)

行内样式 > ID选择器 > class/属性/伪类选择器 > 类型 / 伪元素

示例：

    <div id="container">
        <ul class="menu">
            <li id="item1" class="item1">项目1</li>    
            <li class="item2">项目1</li>
            <li class="item3">项目1</li>
        </ul>
    </div>

    <style>
    /*权重向量计算示例*/
        /* (0, 1, 3, 1) */
        #container .menu.menu li.item2 {
            color: #ff4757;
        }

        /* (0, 1, 2, 1) */
        #container li:nth-child(2).item2 {
            color: #7bed9f;
        }

        /* (0, 1, 1, 1) */
        #container li.item2 {
            color: #ffa502;
        }

        /* (0, 0, 1, 1) */
        li.item2 {
            color: #5352ed;
        }

        /* (0, 0, 1, 0) */
        .item2 {
            color: #ff6b81
        }
    </style>

因为权重的不同，我们可以写一些基础样式在后面的开发中通过覆盖来达到相应效果来提高复用性

2.继承

谈到了选择器优先级问题就不得不提继承

继承概念： 一般来说某些属性会自动继承其父元素的计算值，除非显式指定一个值；一般来说与文字，颜色等相关属性可以从父级继承的而盒模型相关的属性不可继承 注意： inherit关键字允许显式的声明继承性，它对继承和非继承属性都生效；若父级没有某些相关属性值，则在继承中会使用初始值（initial） ，

3.CSS求值过程

4.什么是布局

布局可以确定内容的大小和位置和算法；

三种布局方式：

常规流： 顾名思义计算有一些规则，其中有块级，行级，表格布局，FlexBox，Grid布局
浮动流： 一些元素可做成浮动，如图片的图文置换
绝对定位： 可以直接任意改变元素位置但且不会对常规流造成影响

5.盒模型

CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。盒子模型（Box Modle）可以用来对元素进行布局，包括外边距(margin) ， 边框(border) ，内边距(padding) ，和实际内容(content) 这几个部分。

6.content-box

默认情况下，盒子的 宽度（width） 和 高度（height） 由 容量（content） 决定，如上图。其中宽度为content box 宽度，取值有长度、百分数、auto；百分数是相对于conten box的宽度，auto是由浏览器根据其他属性确定，高度类似，auto是由内容高度计算得来，值得注意的是：只有当容器取固定值的时候，高度百分比才生效

内边距（Padding）概念

页边距相当于容器宽度；对于固定值，当其只有一个值时对应每个边；当其有2个值时值对应上下+左右；有4个值时是顺时针对应由padding-top ---> padding-left ；对于百分数，其取值是相对于容器宽度

边框（border） 一般有三种 none不显示、 solid实线、dashed虚线；可以通过border-方向-宽度/颜色 来组合可以调节粗细颜色等

例如：

    border ： 1px solid #ccc
    
    border—left ：1 px solid #ccc;
    border—right ：2px dotted red;
    
    border—width ： lpx 2px 3px 4PX';
    border—style ： solid;
    border—color ： green blue ;
    
    border—left—width : 3px;
    border—top—color :  #f00;

外边距(margin) margin-auto 相同块级的margin-left和margin-right都为auto时可实现水平居中 ; margin collapse 不同块级的margin-top和margin-button为相同值的时候，会使两个块级冲突；实际效果是在垂直方向上有折叠，会取两者中间的较大者，而不是简单加在一块。

7.border-box

提示不同的box可通过 box-sizing：border-box；设置，两者区别在于宽和高取值不同 从两图中可以清楚的看到取值区别

对于border-box如果指定了宽和高，可能会导致内容的溢出，可以使用overflow去控制溢出内容，其有的属性值：visible展示、 hidden隐藏、 scroll滚动，等

8.块级盒子（Block box）和行级盒子（Inline box）

在 CSS 中我们广泛地使用两种“盒子” —— 块级盒子 (block box) 和 行级盒子 (inline box) 。这两种盒子会在页面流（page flow）和元素之间的关系方面表现出不同的行为

哪那些是块级盒子那些是内联盒子呢？ 除非特殊指定，诸如标题 (<h1>等) 和段落 (<p>) 默认情况下都是块级的盒子。

而比如 <a> 元素、 <span>、 <em> 以及 <strong> 和<cite> 、 <code>都是默认处于 inline 状态的。

我们通过对盒子display属性的设置，比如 inline 或者 block 、inline-block、none（忽略）来控制盒子的外部显示类型。

区别： 块级盒子摆放、属性的适用性、和HTML的关系 --> 元素生成盒子等存在不同。

三、常规流

1、行级排版上下文

在只包含行级盒子的时候会创建行级IFC（lnline Formatting Context） 排版规则

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

2、块级排版上下文

某些容器会创建一个BFC (Block Formatting Context) 比如：根元素，浮动、绝对定位、inline-block ，Flex子项和Grid子项，overflow值不是visible的块盒， display:flow-root；

排版规则

盒子从到下摆放
垂直 margin 合并
BFC 内盒子的 margin 不会与外面的合并
BFC 不会和浮动元素重叠

3、Flex Box

Flex Box被设计为一维布局模型，并作为一种可以在界面中的项目之间提供空间分布和强大对齐功能的方法，

可使用display:flex开启flex布局，使用时flex box可以按行或按列排列，按行排列时分为水平方向的主轴和竖直方向的交叉轴，同理按列排列时与按行排列反之

主轴（main axis） 是沿着 flex 元素放置的方向延伸的轴（比如页面上的横向的行、纵向的列）。该轴的开始和结束被称为 main start 和 main end。
交叉轴（cross axis） 是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 和 cross end。

改变主轴方向的布局可用jastify-content: flex-start / flex-end / center / space-between / space-around / space-evenly /如下图：

改变交叉轴方向的布局可用align-items: flex-strat / flex-end / center /stretch / baseline，相似的改变对应布局只是方向不同，如下图

也可改变主轴与交叉轴位置，flex-direction: column 即主轴变成了交叉轴，交叉轴变成了主轴，其他设置项不变。

非固定尺寸的子元素可以同过调整Flex：的属性调整空间的占比

4、Grid

grid是一个二维布局模型，通过划分格子（水平线+垂直线）来实现布局，可以同时控制行和列的部局方式

要开启grid布局只需要给外层容器设置display：grid即可；可以用 grid-template-columns/rows：（行/列） 指定宽度（fr为grid布局专用单位）或者使用gap属性统一设置

也可以用drid-template-area：进行设置，比如要使一个页面如下：头部和底部宽度占全屏，侧边占1/3，内容占2/3

<div class="layout">
    <header> 头 {ß</header>
    <aside> 侧边栏 </aside>
    <main> 内容 </main>
    <footer> 底部 </footer>
</diV>

我们可以指定区域

grid—template—areas ：
    "header header header"
    "sidebar content content"
    "footer footer footer"

header { grid-area : header;
 }
aside {  grid-area : sideber;
 }
main {  grid-area : content; 
 }
footer {
grid—area ：footer;
 }

和flex box 类似有水平方向的行轴有竖直方向的块轴可使用align-items: center / end 等（格式同flex），在对应的格子内实现对齐，

如果行轨道和列轨道小于容器还可以使用align-content: center /等（格式同flex），对轨道进行对齐

四、文档流

文档流是文档中可显示对象在排列时所占用的位置/空间，例如:块元素自上而下摆放，内联元素，从左到右摆放

标准流里面的限制非常多，导致很多页面效果无法实现

高矮不齐，底边对齐
空白折叠现象
无论多少个空格、换行、tab, 都会折叠为一个空格
如果我们想让img标签之间没有空隙，必须紧密连接

怎么解决呢？

五、浮动流（float）

主要实现字图环绕，更多的用常规布局替代，可使用float: left/right开启，会脱离文档流，出现覆盖的情况；通俗点说就是浮动流都在新的一层，可以用来左对齐，或者右对齐

六、绝对定位

position 属性

static 默认值，非定位元素，参与常规流的布局
relative也会产生占用空间，相对自身原本位置偏移，不脱离文档流
absolute 完全脱离，不占空间，绝对定位，相对非 static 祖先元素定位
fixed相对于视囗绝对定位

温馨提示

设置定位之后，相对定位和绝对定位他是相对于具有定位的父级元素进行位置调整，如果父级元素不存在定位，则继续向上逐级寻找，直到顶层文档

说人话就是：如果含有position属性的大盒子里面有一个也含有position属性的小盒子，那么小盒子会跟着大盒子一起移动

那么就引出了一个小知识：

Z-index

zindex属性设置元素的堆叠顺序，属性值为number（1、2、3...）。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面，那么谁上谁下就不一定了（doge）

七、CSS3新特性

1、圆角效果

使用border-radius属性即可，属性值可以调节圆角度数

四个值:第一个值为左上角，第二个值为右上角,第三个值为右下角，第四个值为左下角（左上------>左下，顺时针）
三个值:第一个值为左上角,第二个值为右上角和左下角,第三个值为右下角（不建议使用）
两个值:第一个值为左上角与右下角，第二个值为右上角与左下角（对角）
一个值:四个圆角值相同

2、阴影

box-shadow向框添加一个或多个阴影。

box-shadow: h-shadow v-shadow b1ur color;

值	说明
h-shadow	必选，水平阴影的位置
v-shadow	必选，垂直阴影的位置
blur	可选，模糊距离
color	可选，阴影的颜色

3、`@keyframes`创建动画

动画是使元素从一种样式逐渐变化为另一种样式的效果

可以改变任意多的样式任意多的次数，用百分比来规定变化发生的时间，或用关键词"from"和"to"，等同于0%（开始）和100%（完成）

使用@keyframes规则,你可以创建动画

@keyframes name {

from |0%{
  css样式
}
percent{
  css样式
}
to|100%{
  css样式
}

name:动画名称,开发人员自己命名;

percent:为百分比值,可以添加多个百分比值;

4、`animation`执行动画

animation: name duration timi ng-function delay iteration-count di recti on;

值	描述
name	设置动画的名称
duration	设置动画的持续时间
timing-function	设置动画效果的速率
delay	设置动画的开始时间(延时执行)
iteration-count	设置动画循环的次数，infinite为无限次数的循环
direction	设置动画播放的方向： normal（正向）和 alternate（反向）
animation-play-state	控制动画的播放状态: running代表播放，而paused代表停止播放

timing-function的值为：

ease 逐渐变慢(默认)
linear 匀速
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速

例子：

<div class="animation"></div>

.animation {
	width: 300px;
	height: 300px;
	background-coor: red;
	animation: anima 5s linear 5s infinite;
}
.animation: hover {
	animation-play- state: paused;
}

@keyframes anima {
0% {
background-color: red;
}
50% {
background-color: green;
}
100% {
background-color: b1ueviolet;
}

5、媒体查询

媒体查询能使页面在不同在终端设备下达到不同的效果
媒体查询会根据设备的大小自动识别加载不同的样式

设置meta标签

使用设备的宽度作为视图宽度并禁止初始的缩放。在<head>标签里加入这个meta标签。

<meta name="viewport"
      content="width=device-width， initial-scale=1, maxi mum-
scale=1，user-scalab1e=no">

语法 max-width最大宽度 min-width最小宽度

.box {
    width: 300px;
    height: 300px;
    }
 /* 可视为手机端 */   
 @media screen and (max-width: 768px){
    .box{
      background-color: aqua;
    }
}
/* 可视为iPad端*/
@media screen and (min-width:768px) and (max -width :996px) {
    .box {
       background-color: chartreuse;
    }
}
/*可视为电脑端*/
@media screen and (min-width:996px) {
    .box {
       background-color: red;
    }
}

以上只是控制背景颜色，还可以更改标签是否显示等

6、雪碧图

CSS Sprite也叫CSS精灵图、CSS雪碧图，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去

最常见于表情，比如：

优点

减少图片的字节
减少网页的http请求,从而大大的提高页面的性能

原理

通过background-image引入背景图片
通过background-position把背景图片移动到自己需要的位置

示例：

<i class="icon1"></i>
<i class="icon2"></i>

.icon1 {
   // 改变 i 标签为块级元素 
    display: b1ock;
    //引入有很多标签的大图片
    background- image: ur1(1. png);
    //调整大图片的位置，直到得到完整的所需表情
    background-position: -20px 0;
    // i 组件的宽高
    width: 45px;
    height: 70px;
.icon2{
    display: b1ock;
    background-image: ur1(1. png);
    background-position: -93px -84px;
    width: 45px;
    height: 70px;

7、字体图标

我们会经常用到一些图标。但是我们在使用这些图标时，往往会遇到失真的情况,而且图片数量很多的话，页面加载就越慢。所以,我们可以使用字体图标的方式来显示图标，既解决了失真的问题，也解决了图片占用资源的问题

优点

轻量性:加载速度快,减少http请求
灵活性:可以利用CSS设置大小颜色等
兼容性:网页字体支持所有现代浏览器，包括IE低版本

使用字体图标

进入阿里巴巴矢量图标库注册账号并登录
选取图标或搜索图标
添加购物车
下载代码
添加到项目里
选择font-class引用

<link rel="stylesheet" href="./font/iconfont.css">

7.挑选相应图标并获取类名，应用于页面:

<span class="iconfont icon-xxx(地址) xxx(使用时大小默认) "></span>

总结

CSS目前已经大致更新完善了，但是还是会更新以后遇到的新知识，里面包含了我在字节跳动青训营的学习总结，也有在b站学习知识，感谢您的阅读和赞赏~!

本文如有错误欢迎纠正指正! 😊

补充：

选择器——知识充电

CSS属性——知识充电

CSS如何工作——知识充电

CSS文档——知识充电

一篇6.5k字的CSS总结|青训营笔记

前言