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

相关推荐
何时梦醒3 分钟前
🚀 从零上手 Milvus 向量数据库:打造一个 AI 智能日记本
前端·人工智能
blns_yxl5 分钟前
拖拽排序列表(HTML+JS)
前端·javascript·html
Data6 分钟前
把 React 前端做成「插件市场」:前后端联动的行业包可插拔架构
前端
光影少年8 分钟前
RN Bridge 原理
前端·react native·react.js
daols8816 分钟前
vue vxe-context-menu 通用右键菜单组件使用
前端·javascript·vue.js·vxeui
程序员黑豆16 分钟前
鸿蒙应用开发实战:轻松实现列表上拉加载更多
前端·华为·harmonyos
pluviophile_s18 分钟前
数据结构:第6讲:树与二叉树
数据结构·笔记
爱莉希雅&&&32 分钟前
Rocky Linux 10.1 + K8s 1.36.3 离线集群部署笔记(Kubernetes)
linux·笔记·docker·kubernetes·calico
hamber35 分钟前
GoGBA 上架半年记
前端
星恒随风35 分钟前
C++ 多态底层原理:静态绑定、动态绑定、虚函数表与工程实践
开发语言·c++·笔记·学习