前端学习笔记（8）CSS两种布局、SCSS预处理器

笔记【CSS 两种布局】2026年4月20日 22:21Flexbox布局一维布局模型。擅长在一个方向上水平或垂直排列元素核心概念主轴、交叉轴。主轴默认为水平从左到右。交叉轴默认为垂直从上到下给一个元素设置flex布局其变成flex容器flex container子元素变成flex子项flex itemsstyle.box{display:flex;// 开启flex布局border:2px solid #333;padding:10px;}.item{padding:20px;background-color:#409eff;color:white;margin:5px;}/styletemplatedivclassboxdivclassitemA/divdivclassitemB/divdivclassitemC/div/div/templateflex-direction: 设置主轴方向为水平或垂直// 水平轴 .container-1{display:flex;flex-direction:row;// 也是默认值}// 垂直轴 .container-2{display:flex;flex-direction:column;}// 水平轴从右到左 .container-3{display:flex;flex-direction:row-reverse;}// 垂直轴从下到上 .container-4{display:flex;flex-direction:column-reverse;}子项如何在轴上分布justify-content/align-items写在flex容器内.container{display:flex;// item在主轴上居中对齐justify-content:center;// item在交叉轴上按文字基线对齐align-items:baseline;}justify-content属性值flex-start靠起点向终点发展元素间无空隙默认flex-end靠终点向起点发展元素间无空隙center居中向两侧发展元素间无空隙space-between居中两端顶格元素间空隙均匀分布space-around居中元素间两份空隙1 2 2 ··· 2 2 1space-evenly居中元素间一份空隙1 1 1 ··· 1 1 1注意空隙不是间距margin/gap是分配margin、gap后的剩余留白分配align-items属性值stretch子项盒子拉伸高度上下填满默认flex-start子项盒子不拉伸按顶边对齐flex-end子项盒子不拉伸按底边对齐center子项盒子不拉伸按几何中心对齐baseline子项盒子不拉伸按第一行文字基线对齐flex-warp子项自动换行.container{display:flex;// 子项自动换行flex-wrap:wrap;}margin和gap的比较特性gapmargin作用对象写在父容器上写在子元素上间距方向只生成元素之间的空隙四面八方都能生效首尾多余间距绝对没有容易多出首尾也有 margin计算逻辑浏览器自动算不干扰布局手动控制容易叠加、溢出兼容性现代浏览器完美支持全浏览器通吃使用场景布局空隙首选位置微调、单独位移gap/margin尽量不要同时使用布局会乱Grid布局二维布局模型同时控制行和列grid container父元素grid item父元素的直接子元素grid track由网格线分隔的行或列grid cell每个单元格auto-fill保留剩余空间auto-fix会把剩余空间分配给元素.container{display:grid;// 两列200px 和 1frgrid-template-columns:200px 1fr;// 两行50px 和 1frgrid-template-rows:50px 1fr;}适合卡片布局对齐方式/* Grid 容器 */.grid-container{width:100%;/* height: 500px; */border:2px solid #eee;border-radius:8px;padding:10px;display:grid;/* 3列每列最小200px自动拉伸 */grid-template-columns:repeat(3,minmax(200px,1fr));/* 2行每行120px高度 */grid-template-rows:repeat(2,120px);/* 后续隐式行高度150px */grid-auto-rows:150px;/* 间距 */gap:16px;/* 整个网格在容器内的对齐 *//* 水平 */justify-content:center;/* 垂直 */align-content:center;/* 项目在单元格内的对齐 *//* 水平 */justify-items:center;/* 垂直 */align-items:center;/* 简写版上面4行可替换为这2行 *//* place-content: center; *//* place-items: center; */}repeat第一个参数auto-fill和auto-fix的区别grid和flex的比较特性FlexGrid维度一维一行或一列二维行 列思路内容优先子项决定布局容器优先网格决定布局尺寸控制子项控制宽高可以由容器接管子项宽高也可以交给子项控制容器控制子项在格子的位置换行flex-wrap: wrap自动由列数决定对齐justify-content align-items同样支持还多 justify-items align-content 更强间距gapgap row-gap / column-gap 可分别控制重叠不支持支持项目可跨行跨列适用场景导航栏、工具栏、单行/单列列表表格、卡片网格、仪表盘、复杂布局简单选择一排东西 → Flex行列矩阵 → Grid两者可以嵌套混用Grid 做大框架Flex 做格子内部笔记【SCSS 预处理器】2026年4月22日 14:31SCSS:增强的css在css基础上新增了嵌套、变量、复用、计算的功能需要编译为css使用SCSS变量 vs CSS变量特性css:运行时变量scss:编译时变量定义--color1 #FF8000$color1 #FF8000运行时浏览器运行时变量编译后变量替换为常量浏览器性能更好JS修改可以被js修改不被JS干扰计算简单calc计算,如calc(100% - 20px)丰富的计算用法作用域可以写在:root全局作用域单文件不污染全局// css:运行时变量 // 用--前缀定义必须写在一个作用域内对子项生效 .container{--color1 #FF8000;}// 写在根元素上全局使用 :root{--color2 #FF8000;}// 使用时用var()返回 .item{color:var($color1);}// scss:编译时变量 // 用$前缀定义 $color1 #FF8000 // 直接使用 .btn{color:$color1;}SCSS计算直接写计算表达式$w:20px;.box{width:$w * 2;/* 40px */height:$w 10px;/* 30px */margin:$w / 2;/* 10px */padding:5px * 3;/* 15px */}两个注意点单位必须统一除法需要加括号颜色计算$c:#ff0000;.box{color:lighten($c,20%);// 变亮color:darken($c,20%);// 变暗color:saturate($c,20%);// 更饱和}SCSS嵌套.box{width:100px;// 嵌套子元素 .title{font-size:16px;}// 嵌套孙子元素 .title span{color:red;}}代表父选择器用来和其他内容拼接的拼接与子项的选择相区分使用// 写法 .box{:hover{color:blue;}}// 编译后 .box:hover{color:blue;}// box的鼠标悬停样式不用// 写法 .box{:hover{color:blue;}}// 编译后 .box :hover{color:blue;}// box的子项的鼠标悬停样式用拼接BEM风格类名// 写法 .button{__icon{width:16px;}--primary{background:blue;}}// 编译后 .button__icon{width:16px}.button--primary{background:blue}用拼接任意字符串需要加#{…}来框住补充的字符// 写法 .button{color:red;#{1}{color:blue;}}// 编译后 .button{color:red;}.button1{color:blue;}可以在最后// 写法 .dark{.box1 {background:#222;}.box2 {background:#222;}}// 编译后 .box1 .dark{background:#222;}.box2 .dark{background:#222;}模块化导入import全局导入旧项目使用项目的style使用这个import./variables.scss;use模块化导入允许AS别名允许AS *相当于全局导入// _vars.scss $color:red;// main.scssusevars;// 默认命名空间vars .box{color:vars.$color;}// 必须加前缀usevarsas v;// 别名简写为v .box{color:v.$color;}usevarsas *;.box{color:$color;}// 变回全局容易冲突forward转发模块把多个模块的内容合并到一个模块// allStyle.scss forward./style1forward./style2forward./style3forward./style4这样其他模块只需use allStyle复用mixin定义一段宏include复用宏// 某ERP项目的用法import./variables.scss;mixincolorBtn($color){background:$color;:hover{color:$color;:before, :after{background:$color;}}}.blue-btn{includecolorBtn($blue)}.light-blue-btn{includecolorBtn($light-blue)}scss的脚本逻辑function函数定义return函数返回// px 转 remfunctionpx2rem($px){return($px / 16)* 1rem;}.text{font-size:px2rem(16);// 1rem}extend继承另一个类的样式.btn { // ... } .btn-primary { extend .btn; }判断、循环// 判断if条件1{// ...}elseif 条件2{// ...}else{// ...}// for循环for$i from 1 through 3{.item-#{$i}{width:50px * $i;}}// each 循环each$color in red,green,blue{.text-#{$color}{color:$color;}}// while循环 $i:1;while$i 3{.box-#{$i}{height:20px * $i;}$i:$i 1;// 必须自增否则死循环}导出给JS使用// 某ERP项目 // \styles\element-variables.scss $--color-primary:#1890ff;:export{theme:$--color-primary;}// \store\modules\settings.js的使用importvariablesfrom/styles/element-variables.scss// 把export的内容写入属性导入一个别名成variables的objectimportdefaultSettingsfrom/settingsconst{showSettings,tagsView,fixedHeader,sidebarLogo,supportPinyinSearch}defaultSettingsconststate{theme:variables.theme,// 需要用variables引入showSettings,tagsView,fixedHeader,sidebarLogo,supportPinyinSearch}