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); 中 - 号 前后要有空格!!

相关推荐
镜宇秋霖丶5 小时前
2026.5.6@霖宇博客制作中遇见的问题
前端·javascript·vue.js
U盘失踪了5 小时前
【笔记】Flask 用 session 对象存储用户状态
笔记
小李子呢02116 小时前
前端八股Vue---Vue-router路由管理器
前端·javascript·vue.js
Brilliantwxx6 小时前
【C++】 vector(代码实现+坑点讲解)
开发语言·c++·笔记·算法
洛_尘8 小时前
Python 5:使用库
java·前端·python
Bigger8 小时前
Bun 能上生产吗?我的实战结论
前端·node.js·bun
kyriewen9 小时前
你的前端滤镜慢得像PPT?用Rust+WebAssembly,一秒处理4K图
前端·rust·webassembly
kyriewen119 小时前
你等的Babel编译,够喝三杯咖啡了——用Rust重写的SWC,只需眨个眼
开发语言·前端·javascript·后端·性能优化·rust·前端框架
IT_陈寒10 小时前
SpringBoot自动配置坑了我,原来要这样绕过去
前端·人工智能·后端
东方小月10 小时前
Claude Code 完整上手指南:MCP、Skills、第三方模型配置一次搞定
前端·人工智能·后端