走进前端技术栈----CSS

这是我参与 $\color{#8bdaff}{「第五届青训营」}$ 伴学笔记创作活动的第2天。

一、CSS是什么？

CSS即 $\color{#1e80ff}{Cascading Style Sheets}$ 层叠样式表,用于定义页面元素的样式，设置字体颜色和样式，设置位置和大小，添加动画效果。

h1 {
    color: red;
    font-size: 20px;
}

使用CSS的三种方式

<!-- 内联方式-->
<p style="color:blue;font-size:20px;">内联方式</p>

<!-- 嵌入方式-->
   <style>
       p {
           color:blue;
           font-size:20px;
       }
   </style>

<!-- 外链方式-->
<link rel="stylesheet" href="/assets/style.css">

CSS工作过程

选择器

MDN上对于选择器的定义：CSS选择器是CSS规则的第一部分。它是元素和其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式。选择器所选择的元素，叫做“选择器的对象”。
CSS选择器通过多种方式选择元素，按照标签名、类名或者id，可以按照属性和DOM树中的位置来选择元素。
$\color{#1e80ff}{选择器种类}$
（1）类型、类和id选择器
id选择器前缀为"#", 类选择器前缀为".", 类型选择器无前缀

h1 {
    color: red;
}

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

#container {
    color: green;
}

（2）标签属性选择器

a[title] { 
    color: green;
}

a[href="https://example.com"] {
    color: green;
}

（3）通配选择器

* {
  margin: 0;
  padding:0;
}

（4）后代、子代选择器

//后代选择器
article p {
    font-size: 40px;
}
//子代选择器
article > p {
    font-size: 40px;
}

（5）通用兄弟、相邻兄弟选择器

//通用兄弟选择器
h1 ~ p {
    color: red;
}
//相邻兄弟选择器
h1 + p {
    color: green;
}

（6）伪类、伪元素选择器

伪元素相当于伪造了一个元素，例如before,after,达到的效果就是伪造了一个元素，然后添加了其相应的效果；伪类没有伪造元素，例如first-child只是给子元素添加样式。 $\color{#1e80ff}{伪类用":"表示，而伪元素则用"::"表示。}$

//伪类选择器
p:first-child {
    font-size: 10px;
}
//伪元素选择器
p::before {
    font-size: 10px;
}

选择器组：多个使用相同样式的CSS选择器通过“ ，”组成选择器组或选择器列表。

h1,p {
    color: red;
}

二、深入CSS(上)

选择器的特异度（优先级，权重）
$\color{#1e80ff}{css选择器优先级最高到最低顺序为：}$
1.id选择器（#id）
2.类选择器（.classname）
3.标签选择器（div,h1,p）
4.子选择器（ul < li）
5.后代选择器（li a）
6.伪类选择（a:hover,li:nth-child）

!important的优先级是最高的，但出现冲突时则需比较”四位数“;
优先级相同时，则采用就近原则，选择最后出现的样式;
继承得来的属性，其优先级最低。

继承某些属性会自动继承其父元素的计算值，除非显式指定一个值。
$\color{#1e80ff}{CSS 为控制继承提供了五个特殊的通用属性值。每个 CSS 属性都接收这些值。}$
（1） $\color{#1e80ff}{inherit}$ 设置该属性会使子元素属性和父元素相同。实际上，就是“开启继承”。
（2） $\color{#1e80ff}{initial}$ 将应用于选定元素的属性值设置为该属性的初始值。
（3） $\color{#1e80ff}{revert}$ 将应用于选定元素的属性值重置为浏览器的默认样式，而不是应用于该属性的默认值。在许多情况下，此值的作用类似于 $\color{#1e80ff}{unset}$ 。
（4） $\color{#1e80ff}{revert-layer}$ 将应用于选定元素的属性值重置为在上一个层叠层中建立的值。
（5） $\color{#1e80ff}{unset}$ 将属性重置为自然值，也就是如果属性是自然继承那么就是inherit,否则和initial一样。
布局
布局是确定内容位置和大小的算法，依据元素、容器、兄弟节点和内容等相关信息计算。

$\color{#fd7741}{相关元素属性值注意：}$
（1）width 取百分数时参考对象是相当于容器的宽度
（2）height 取百分数时只有容器有指定高度才有效
（3）padding 指定元素四个方向的内边距，百分数相对于容器宽度
（4）margin 指定元素四个方向的外边距，百分数相对于容器宽度

三、深入CSS（下）

CSS盒模型 —— 块级、行级 块级不和其他盒子并列摆放，适用所有盒模型属性；行级可以和其他行级盒子放在一行或者拆开成多行，盒模型中的width和heigth属性不适用。

常见块级元素：body,div,main,section,article,h1-6,li,ul,p等
display: block;

常见行级元素：a,span,em,strong,select,img,label,input等
display: line;

display: inline-block;
本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行;

display: none;
导致该元素及其所有后代元素不再通过屏幕阅读器技术展示,排版时完全被忽略。

$\color{#fd7741}{行级排版上下文(IFC)：}$ 只包含行级盒子的容器会创建一个IFC 。

IFC内的排版规则：
（1）盒子在一行内水平摆放。
（2）一行放不下时换行显示。
（3）text-align决定一行内盒子的水平对齐。
（4）vertical-align决定一个盒子在行内的垂直对齐。
（5）避开浮动（float）元素。

$\color{#fd7741}{块级排版上下文(BFC)：}$ 某些容器会创建一个BFC。
某些容器：根元素、浮动、绝对定位、inline-block、Flex子项、Grid子项、overflow值不是visible的块盒、display：foot-root;

BFC内的排版规则：（1）盒子从上到下摆放。
（2）垂直方向margin合并，水平方向margin不合并。
（3）BFC内盒子的margin不会与外面的合并。
（4）BFC不会和浮动元素重叠。

$\color{#fd7741}{Flex Box：弹性盒子}$ ，一种新的排版上下文。

控制子盒子的（1）摆放流向 ↑ ↓ ← →
$~~~~$ $~~~~$ $~~~~$ $~~~~$ $~$ （2）摆放方向
$~~~~$ $~~~~$ $~~~~$ $~~~~$ $~$ （3）摆放顺序
$~~~~$ $~~~~$ $~~~~$ $~~~~$ $~$ （4）盒子宽度和高度
$~~~~$ $~~~~$ $~~~~$ $~~~~$ $~$ （5）水平和垂直方向的对齐
$~~~~$ $~~~~$ $~~~~$ $~~~~$ $~$ （6）是否允许折行
flexibility：可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩。

flex-grow有剩余空间时的伸展能力
flex-shrink容器空间不足时收缩的能力
flex-basis没有伸展或收缩时的基础长度

$\color{#fd7741}{注意}$

$\color{#fd7741}{Grid 布局}$

display:grid；使元素生成一个块级的Grid容器
使用grid-template相关属性将容器划分为网格
设置每一个子项占哪些行列

$\color{#fd7741}{float 浮动}$ (子绝父相)

position

static $~~~~$ $~~~~$ 默认值，非定位元素
relative $~~~~$ $~$ 相对自身原本位置偏移，不脱离文档流;
$~~~~$ $~~~~~~~~~~~~~$ 使用top、left、bottom、right设置偏移长度流内其它元素当它没有偏移一样布 $~~~~~~~~~~~~~~~~~~$ 局
absolute $~~~$ $~$ 绝对定位，相对非static祖先元素定位; 脱离常规流,相对于最近的非static祖先定 $~~~~~~~~~~~~~~~~~~$ 位,不会对流内元素布局造成影响
fixed $~~~~$ $~~~~~$ 相对于视口绝对定位

深入理解CSS | 青训营笔记

走进前端技术栈----CSS

一、CSS是什么？

二、深入CSS(上)

三、深入CSS（下）