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

相关推荐
Zeroplucky2 分钟前
从 registerContentObserver 剖析 Android Binder 流程
前端
Yinlin1243 分钟前
深入悬浮组件实现
前端
yangzheui5 分钟前
nvue页面事件穿透到下层元素解决办法
前端
杉氧5 分钟前
从 Modifier 到 Flexbox:React Native 布局与样式设计哲学
android·前端·react native
比老马还六8 分钟前
Bipes-Blockly项目二次开发/硬件功能-LED灯条(十一)
前端·嵌入式硬件·硬件工程
商业白皮书9 分钟前
用手机怎么拍证件照?光线、机位、姿态和后期制作步骤
笔记
circuitsosk18 分钟前
智能体任务拆解与执行:基于ReAct+Plan-and-Execute框架的行业Skill构建实录
前端·javascript·python·react.js·react·llm agent·智能体编排
daols8822 分钟前
vue 表格vxe-table 实现紧凑型表格的方式
前端·javascript·vue.js
恋猫de小郭39 分钟前
Flutter 多窗口支持类型和 API 介绍
android·前端·flutter