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文本样式居右 */
###############