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)作为数据表中一行数据的唯一标识符,在一张表中通过主键…

Go语言自定义包

在Go语言中,包(package)是一种重要的组织代码的方式。它可以将一组相关的函数、变量等封装在一个独立的单元中,便于代码的复用和维护。除了使用标准库中的包之外,我们还可以自己创建和使用自定义包。在本篇技术博客中&…

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使用这条命令查看当前正在运…

openGauss学习笔记-14 openGauss 简单数

24届地平线提前批,秋招来啦 地平线24届校招提前期正式开启【关于地平线】地平线是行业领先的高效能智能驾驶计算方案提供商。地平线致力于通过软硬结合的前瞻性技术理念,研发极致效能的硬件计算方案 免测评!SHEIN2024校园招聘提前批正式启动…

数据结构问答2

1. 简述线性表、及其两种存储结构-顺序表和链表的主要特点。 答: 线性表: ① 由n个数据元素组成的有限序列,所有元素性质相同,元素之间呈线性关系(除开始元素外,每个元素只有唯一前驱;除终端元素外,每个元素只有唯一后继) ② 通过序号来唯一标识一个元素,同一个线…

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 📕系列专栏:后端专栏 📧如果文章知识点有错误的地方,…