CSS中一些标签的使用 box-sizing,scroll-behavior, :root,@media screen, 冒号和双冒号的区别

box sizing borderbox

box-sizing: border-box就是将border和padding数值包含在width和height之内，这样的好处就是修改border和padding数值盒子的大小不变。
box-sizing属性的取值可以为content-box或border-box，对它们的解释如下。
1.content-box：浏览器对盒模型的解释遵从W3C标准，当定义width和height时，它的参数值不包括border和padding。
2.border-box：当定义width和height时，border和padding的参数值被包含在width和height之内。

scroll-behavior: smooth；

让页面平滑滚动
html{ scroll-behavior: smooth;}

:root

:root 是一个伪类，表示文档根元素，除了 IE8 及更早的版本外，所有主流浏览器均支持。
在:root中声明相当于全局属性，只要当前页面引用了:root segment所在文件，都可以使用var()来引用。用 – 这样写法加上样式名称 例如：–background 引用：var(–background)

:root{
–red: #ea644a;
–yellow: #ffb03a;
–blue: #3498db;
–green: #27a17e;
}

var()函数可以代替元素中任何属性中的值的任何部分。var()函数不能作为属性名、选择器或者其他除了属性值之外的值。（这样做通常会产生无效的语法或者一个没有关联到变量的值。）

.btn.red{
background: #ea644a;
background: var(–red);
}

@media screen

利用@media screen可以适应不同屏幕大小，做出相应的界面调整；
在css中@media (min-width: 768px)表示最小是768也就是>=768；
@media (min-width: 768px){ //>=768的设备 }
@media (min-width: 992px){ //>=992的设备 }
@media (min-width: 1200){ //>=1200的设备 }

注意下顺序，如果你把@media (min-width: 768px)写在了下面那么很悲剧，
@media (min-width: 1200){ //>=1200的设备 }
@media (min-width: 992px){ //>=992的设备 }
@media (min-width: 768px){ //>=768的设备 }
因为如果是1440,由于1440>768那么你的1200就会失效。
所以我们用min-width时，小的放上面大的在下面，同理如果是用max-width那么就是大的在上面，小的在下面

@media (max-width: 1199){ //<=1199的设备 }
@media (max-width: 991px){ //<=991的设备 }
@media (max-width: 767px){ //<=768的设备 }

另外也支持混合写法
@media screen and (min-width: 960px) and (max-width: 1199px) { }
注意下面写了 and 关键字，and后面和左括号中间必须有一个空格，否则样式不生效。

@media screen and (max-width: 600px){
html.font-auto{ font-size: 14px }
}
@media screen and (min-width: 1921px){
html.font-auto{ font-size: 18px }
}

冒号和双冒号的区别

一个冒号是伪类，两个冒号是伪元素

伪类可以独立于文档的元素来分配样式，且可以分配给任何元素，逻辑上和功能上类类似，但是其是预定义的、不存在于文档树中且表达方式也不同，所以叫伪类。
伪元素所控制的内容和一个元素控制的内容一样，但是伪元素不存在于文档树中，不是真正的元素，所以叫伪元素。

伪类有：:first-child ，🔗，vistited，:hover:，active:focus，:lang
伪元素有：::first-line，::first-letter，::before，::after

伪类和伪元素的区别：

伪类:选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。

:link 伪类将应用于未被访问过的链接，与:visited互斥。
:hover 伪类将应用于有鼠标指针悬停于其上的元素。
:active 伪类将应用于被激活的元素，如被点击的链接、被按下的按钮等。
:visited 伪类将应用于已经被访问过的链接，与:link互斥。
:focus 伪类将应用于拥有键盘输入焦点的元素。
:first-child 伪类将应用于元素在页面中第一次出现的时候。
:lang 伪类将应用于元素带有指定lang的情况。

伪元素与伪类针对特殊状态的元素不同的是，伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。

::first-letter 伪元素的样式将应用于元素文本的第一个字（母）。
::first-line 伪元素的样式将应用于元素文本的第一行。
::before 在元素内容的最前面添加新内容。
::after 在元素内容的最后面添加新内容