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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/37729.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

[SSM]Spring6基础

目录 一、Spring启示录 1.1OCP开闭原则 1.2DIP依赖倒置原则 1.3IoC控制反转 1.4DI依赖注入 二、Spring概述 2.1Spring简介 2.2Spring八大模块 2.3Spring特点 三、Spring的入门程序 3.1Spring的文件 3.2第一个Spring程序 3.3第一个Spring程序详细剖析 3.4Spring6启…

Vue绑定class样式

效果&#xff1a;指定变换成某种颜色 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><style>.basic{width: 400px;height: 100px;border: 1px solid black;}.happy{backg…

谈谈——互联网生活中的隐私保护

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…

打包apk时出现Execution failed for task ‘:app:lintVitalRelease

程序可以正常运行&#xff0c;但是打包apk的时候报Execution failed for task ‘:app:lintVitalRelease导致打包失败&#xff0c;原因是执行lintVitalRelease失败了&#xff0c;存在错误。解决办法&#xff1a;在app模块的build.gradle的Android里面添加如下代码&#xff1a; l…

Nacos服务注册和配置中心(Config,Eureka,Bus)2

Nacos数据模型 Nacos领域模型,Namespace命名空间、Group分组、集群这些都是为了进行归类管理&#xff0c;把服务和配置文件进行归类&#xff0c;归类之后就可以实现一定的效果&#xff0c;比如隔离。对于服务来说&#xff0c;不同命名空间中的服务不能够互相访问调用 N…

Spring Boot 中的熔断器:原理和使用

Spring Boot 中的熔断器&#xff1a;原理和使用 什么是熔断器&#xff1f; 熔断器是一种用于处理分布式系统中故障的设计模式。它可以防止出现故障的服务对整个系统造成连锁反应。熔断器通过监控故障服务的调用情况&#xff0c;当故障服务出现问题时&#xff0c;熔断器会迅速…

MacOS使用USB接口与IPhone进行Socket通信

演示效果如下: 开源地址: GitHub - rsms/peertalk: iOS and Mac Cocoa library for communicating over USB 克隆源码: git clone https://github.com/rsms/peertalk.git 克隆后打开peertalk然后启动xcode工程 先启动MacOS服务端工程,再启动iOS客户端工程 客户端 服务端

MySQl数据库第八课-------SQL命令查询-------主要命脉

作者前言 欢迎小可爱们前来借鉴我的gtiee秦老大大 (qin-laoda) - Gitee.com —————————————————————————————— 目录 查询数据 条件 逻辑运算符 模糊查询 范围查询 in 判断空 UNION 排序 聚合 分组&#xff1a;group by —————————…

C++中随机数的使用总结

随机数 rand() 随机数发生器 #include <stdio.h> #include <unistd.h> #include <iostream> #include <string>using namespace std;int main(int argc, char *argv[]) {cout << "this is main()" << endl;cout << rand…

弹性盒子布局

在弹性盒子布局&#xff08;flexbox&#xff09;中&#xff0c;存在两个关键概念&#xff1a;主轴&#xff08;main axis&#xff09;和交叉轴&#xff08;cross axis&#xff09;。 主轴是弹性盒子布局中的一个方向&#xff0c;它定义了弹性盒子的主要方向。在默认情况下&…

[MySQL]MySQL表中数据的增删查改(CRUD)

[MySQL]MySQL表中数据的增删查改(CRUD) 文章目录 [MySQL]MySQL表中数据的增删查改(CRUD)1. 新增数据1.1 单列插入1.2 多列插入1.3 插入否则更新1.4 替换 2. 基本查询数据2.1 全列查询2.2 指定列查询2.3 查询字段为表达式2.4 为查询结果指定别名2.5 结果去重2.6 where子句2.7 or…

flutter开发实战-多语言flutter intl

flutter开发实战-多语言flutter intl 之前做的应用中有用到多语言&#xff0c;一直没有整理&#xff0c;这里整理一下多语言设置流程。 使用的是Android studio 一、flutter_intl 插件 使用Android studio安装flutter_intl 插件&#xff0c;更新或者安装flutter_intl 插件后…

Django_自定义文件存储类并将图片上传到FastDFS

目录 将图片到FastDFS和浏览的流程图 使用自定义文件存储类 1、定义存储类 2、创建FastDFS的配置文件 3、修改settings.py配置 4、上传图片进行验证 4.1 定义一个包含ImageField字段的模型类 4.2 登录django的admin后台 4.3 上传图片 4.4 查看图片 源码等资料获取方…

webrtc源码阅读之视频RTP接收JitterBuffer

在音视频通信中&#xff0c;网络抖动和延迟是常见的问题&#xff0c;会导致音视频质量下降和用户体验不佳。为了解决这些问题&#xff0c;WebRTC引入了Jitter Buffer&#xff08;抖动缓冲区&#xff09;这一重要组件。Jitter Buffer是一个缓冲区&#xff0c;用于接收和处理网络…

树与图的(深度 + 广度)优先遍历

目录 一、树与图的存储1.树的特性2.图的分类3.有向图的储存结构 二、树与图的深度优先遍历的运用树的重心题意分析代码实现 三、树与图的广度优先遍历的运用图中点的层次题意分析代码实现 一、树与图的存储 1.树的特性 树是一种特殊的图,具有以下两个重要特性: 无环 树是一个…

7.Java 运算符

运算符分成以下几组 算术运算符关系运算符位运算符逻辑运算符赋值运算符其他运算符 1.算术运算符 public class Test {public static void main(String[] args) {int a 10;int b 20;int c 25;int d 25;System.out.println("a b " (a b) );System.out.print…

奥威BI-金蝶云星空SaaS版一站式平台:对接数据、做分析

金蝶云星空和BI大数据分析平台都在企业数字化转型中扮演了重要的角色&#xff0c;为企业提供了全面的数字化解决方案和数据分析功能&#xff0c;两者强强联合不仅能提高部署效率&#xff0c;更能增强数据分析、数据可视化效果&#xff0c;帮助企业更好地适应市场变化和用户需求…

基于SSM的新生报到系统的设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…

Interactive Image Segmentation

Focused and Collaborative Feedback Integration for Interactive Image Segmentation CVPR 2023 清华 Interactive image segmentation aims at obtaining a segmentation mask for an image using simple user annotations. During each round of interaction, the segment…

科技资讯|苹果Vision Pro预计2024年末全球发售

据彭博社记者古尔曼消息&#xff0c;苹果首款头显Vision Pro计划于2024年初在美国市场指定店铺进行开售&#xff0c;这些商店将会有专属区域用于产品演示&#xff0c;配备座位、配件和测量尺寸的工具等。知情人士透露&#xff0c;将有270家美国的苹果商店会销售Vision Pro&…
最新文章