less 笔记

1 margin-left 之后有 margin: 0 导致margin-left 无效 --> 不能重复定义

复制代码
.btn-group {
  margin-left: calc(100% - 350px);
  display: inline-block;
  margin: 0; // 重复定义 导致上面 没有效果
  padding: 0;
}

2 一定要F12检查元素 看各个div的宽度是否太长 导致靠左靠右 计算不对

3 margin-left 是指距离左边框 或者左边的div距离,左边有div就是距离div的距离

4 @media (max-width: 1050px) 是小屏幕最大值1050px

复制代码
@media (max-width: 1050px) 使用@media就不能用绝对位置absolute

5 设置div水平居中

复制代码
margin-left: calc((100% - 320px - 80px) / 2);
  // 1 父元素不能设置这个 justify-content: center; 
  // 2 总宽度的1/2 - 自生宽度1/2 - aside宽度1/2

6 两个div水平定位margin-left: calc() 计算位置

复制代码
第一个div 居中就是, 
1 父元素不能设置这个 justify-content: center; 

父元素的总宽度的1/2 - 自生宽度1/2 - aside宽度1/2

第二个div 靠右
就是 依靠 第一个元素的最左边位置 计算:
50% - 第一个元素的宽度 / 2  - 自身宽度 = 剩余的可用宽度 
--> 就是要靠左边的距离

7 calc((100% - 400px - 80px) / 2); 中 - 号 前后要有空格!!

相关推荐
阿乐去买菜4 分钟前
2025 年末 TypeScript 趋势洞察:AI Agent 与 TS 7.0 的原生化革命
前端
stars-he8 分钟前
FPGA学习笔记(8)以太网UDP数据报文发送电路设计(二)
网络·笔记·学习·fpga开发
海绵宝龙10 分钟前
Vue 中的 Diff 算法
前端·vue.js·算法
卡布叻_星星17 分钟前
部署笔记之部署不同Java版本项目以及多项目内存崩溃问题
笔记
浩泽学编程20 分钟前
内网开发?系统环境变量无权限配置?快速解决使用其他版本node.js
前端·vue.js·vscode·node.js·js
狗哥哥22 分钟前
Vue 3 插件系统重构实战:从过度设计到精简高效
前端·vue.js·架构
巾帼前端23 分钟前
前端对用户因果链的优化
前端·状态模式
麻雀无能为力26 分钟前
Diffusion Model(DDPM)学习笔记
笔记·学习
Chloeis Syntax26 分钟前
MySQL初阶学习日记(7)--- 事务
java·数据库·笔记·学习·mysql
不想秃头的程序员26 分钟前
Vue3 中 Lottie 动画库的使用指南
前端