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.mzph.cn/news/3542.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据库锁机制

锁机制 1. 概述2. 并发事务的不同场景2.1 读-读情况2.2 写-写情况2.3 读-写或写-读情况2.3.1 方案一:读事务使用MVCC(多版本并发控制),写事务加锁2.3.2 方案二:读、写事务均加锁 3. 锁分类3.1 从数据操作类型&#xff…

MySQL学习笔记

文章目录 1、登录2、查看数据库3、连接数据库4、查看表5、退出6、创建/删除数据库7、创建表8、数据类型9、查看表中的内容10、向表中插入数据11、约束主键:主键(PRIMARY KEY)作为数据表中一行数据的唯一标识符,在一张表中通过主键…

e2e测试框架之Cypress

谈起web自动化测试,大家首先想到的是Selenium!随着近几年前端技术的发展,出现了不少前端测试框架,这些测试框架大多并不依赖于Selenium,这一点跟后端测试框架有很大不同,如Robot Framework做Web自动化测试本…

CVE-2013-4547

CVE-2013-4547 一、环境搭建二、漏洞原理三、漏洞复现 一、环境搭建 如下介绍kali搭建的教程 cd ~/vulhub/nginx/CVE-2013-4547 // 进入指定环境 docker-compose build // 进行环境编译 docker-compose up -d // 启动环境docker-compose ps使用这条命令查看当前正在运…

Redis学习(三)持久化机制、分布式缓存、多级缓存、Redis实战经验

文章目录 分布式缓存Redis持久化RDB持久化AOF持久化 Redis主从Redis数据同步原理全量同步增量同步 Redis哨兵哨兵的作用和原理sentinel(哨兵)的三个作用是什么?sentinel如何判断一个Redis实例是否健康?master出现故障后&#xff0…

AI 智能对话 - 基于 ChatGLM2-6B 训练对话知识库

前情提要 怎么将 AI 应用到工作中呢?比如让 AI 帮忙写代码,自己通过工程上的思维将代码整合排版,我挺烦什么代码逻辑严谨性的问题,但是我又不得不承认这样的好处,我们要开始将角色转换出来,不应该是一个工…

Ceph部署

目录 1、存储基础 单机存储设备 单机存储的问题 分布式存储(软件定义的存储 SDS) 分布式存储的类型 2、Ceph 简介 3、Ceph 优势 4、Ceph 架构 5、Ceph 核心组件 Pool中数据保存方式支持两种类型: Pool、PG 和 OSD 的关系&#xff…

功能丰富的 Markdown 笔记工具:FSNotes Mac中文版图文安装教程

FSNotes Mac版是Mac平台上一款纯文本笔记本管理器,FSNotes for mac中文版支持Markdown、RTF等格式,轻松查看和编辑数据,还可以将数据存储在文件系统中,同时具备iCloud同步功能,使用非常便捷。 FSNotes for mac官方介绍…

自动化测试转型挑战及其解决方案

目录 前言: 自动化测试挑战 选择合适的自动化测试方法 选择正确的自动化工具 整理数据 何时开始和停止 如何克服挑战 前言: 自动化测试的转型是许多组织在提高测试效率和质量方面的重要举措。然而,这个转型过程中可能会面临一些挑战。…

Java 装箱拆箱原理 包装类型缓存池

JAVA中的基本数据类型 byteshortintlongfloatdoublebooleanchar 为了让上述基本数据类型可以转为对象,Java在1.5推出了一系列包装类,基本类和包装类互相转换的过程,称为装箱和拆箱 缓存池 缓存池也叫常量池。它是事先存储一些常量数据用以…

优化营商环境:构建智能营销平台,助力企业经营发展

对于企业来说,没有了客户,就像身体没有了血液,将失去生命力和活力,续存难发展更难。区域产业又是由一个个企业集聚而形成,企业的成败也就决定着区域产业的兴衰。 在当今竞争激烈的商业环境中,传统的销售手段…

MongoDB初体验-安装使用教程2023.7

前言:博主第一次接触MongoDB,看了一圈网上现有的教程,不是缺少细节就是有问题没交代清楚,特整理了一下自己安装运行的过程,从下载安装到开机自启,全程细节齐全、图文并茂、简单易懂。 目录 1. 从官网下载2…

基于遗传算法的新能源电动汽车充电桩与路径选择MATLAB程序

主要内容: 根据城市间的距离,规划新能源汽车的行驶路径。要求行驶距离最短。 部分代码: %% 加载数据 %%遗传参数 load zby;%个城市坐标位置 NIND50; %种群大小 MAXGEN200; Pc0.9; %交叉概率 Pm0.2; %变异概率 GGAP0.…

巩固一下NodeJs

1、初始化(确保当前电脑有node环境) npm init 2、安装express npm i expressnpm i ws文件结构 3、编写相关代码启动node服务(server.js) //导入下列模块,express搭建服务器,fs用来操作文件、ws用来实现webscoket const express require("expr…

C++进阶—C++11新特性(移动语义右值引用可变参数模板lambda表达式function包装器bind函数)

目录 0. C11简介 1. 统一的列表初始化 1.1 {}初始化 1.2 std::initializer_list 2. 声明 2.1 auto 2.2 decltype 2.3 nullptr 3. 范围for循环 4. 智能指针 5. STL中一些变化 6. 右值引用和移动语义 6.1 左值引用和右值引用 6.2 左值引用与右值引用比较 6.3 右值…

PSP - Jackhmmer 搜索 EMBL 序列数据库的相似序列

欢迎关注我的CSDN:https://spike.blog.csdn.net/ 本文地址:https://spike.blog.csdn.net/article/details/131817060 EMBL (European Molecular Biology Laboratory,欧洲分子生物实验室):EMBL 数据库是一个由欧洲生物信息学研究所…

springboot与rabbitmq的整合【演示5种基本交换机】

前言: 👏作者简介:我是笑霸final,一名热爱技术的在校学生。 📝个人主页:个人主页1 || 笑霸final的主页2 📕系列专栏:后端专栏 📧如果文章知识点有错误的地方,…

【0】冒泡排序

前言 通过函数模板技术设计一个冒泡排序算法,领悟泛型编程的思想和冒泡排序的思想,然后使用QTest测试各种输入值,养成先写测试代码,后写程序代码的习惯 0x0 编写一个int版本的冒泡函数 1.不管要排序的数组长度多长,外…

CASAIM与大疆达成全自动化测量技术合作,CASAIM IS全自动化蓝光测量仪实现无人机叶片全尺寸检测及质量控制

近期,CASAIM与大疆达成全自动化测量技术合作,CASAIM IS全自动化蓝光测量仪实现无人机叶片全尺寸检测及质量控制。 无人机行业在过去几年里取得了迅猛发展,大疆是全球领先的无人飞行器控制系统及无人机解决方案的研发商和生产商,客…

Spring-AOP(面向切面)

Spring-AOP(面向切面) 场景模拟(计算器) 功能接口 public interface Calculator {int add(int i, int j);int minus(int i, int j);int multiply(int i, int j);int div(int i, int j); }实现类 public class CalculateLogImpl implements Calculator {Overridepublic int …