bootstrap5源码解读

########################

 

001：规定字符集和自定义全局属性

• （1）@charset  "UTF-8"：声明该css文件的编码为UTF-8：
• （2）:root {}：在根元素html中声明自定义属性，这样其他任何元素都可使用这些自定义属性：

 

002：全局配置元素高度和宽度的计算标准

• （1）box-sizing: content-box|border-box|initial|inherit。当box-sizing为border-box时，表示对元素指定宽度和高度包括了 padding 和 border，这样更方便；当box-sizing为content-box时，表示对元素指定宽度和高度不包括 padding 和 border，这是默认值；
• （2）* 表示了页面所有元素，但不包含*::before和*::after所表示的，因此这里还加上了*::before和*::after插入的内容，这样就覆盖完了

 

003：给根元素html开启平滑过渡

 

• （1）scroll-behavior: smooth; 该属性指定当用户单击可滚动框中的链接时，可平滑地设置滚动位置动画，效果更好；而不是默认值为auto所表示的直线跳跃，显得直棒棒地，过于简陋了，因此设置为smooth最佳，而不是默认值auto
• （2）@media媒体查询中的prefers-reduced-motion: no-preference，表示用户的系统没有开启动画减弱功能的情况下；当prefers-reduced-motion为​​reduce时，​​表示用户修改了系统设置，将动画效果最小化，极少有人这么去干，因此大部分情况下就是全局开启平滑过渡。

 

 

 

 

004：配置body元素的外边距、字体、背景颜色、文本颜色

• （1）外边距为0，那就是没得外边距；
• （2）行高为1.5rem，即为页面字体的1.5倍的行间距；
• （3）字体设置：字体的名称（较多）和大小（1rem），文本的粗细、颜色rgb(33, 37, 41)、对齐方式（左对齐）；
• （4）背景颜色，就是纯白色rgb(255, 255, 255)；

注意：但是这里定义文本对齐方式却是不必要，因为这个--bs-body-text-align自定义属性没有给定具体值，那就是默认值了，即左对齐方式。对齐方式有左中右两边：text-align: left|right|center|justify|initial|inherit;  官方issue在这里：​​https://github.com/twbs/bootstrap/issues/35338​​

005：

 

 006：水平线元素：

 

 

 

/*选中非段落元素*/
:not(p)
{
}

 

/*选中div里面非首个、非最后一个的中间p元素*/
div p:not(:first-child):not(:last-child){
}

 

table tbody tr:not(:first-child):not(:last-child) td
{
     text-align: right;
}

/* 以上代码可以选择table表格中tbody部分非首个、非最后一个的tr，并设置其子元素td文本样式居右 */