当前位置： 首页 > article >正文

CSS 相关知识

article 2026/4/28 0:36:44
1、高度已知，三栏布局，左右宽度 200，中间自适应，如何实现？
  <body><div class="box"><div class="box1">高度已知</div><div class="box2">左右宽度 200，中间自适应</div><div class="box3">三栏布局</div></div></body><style>.box {display: flex;background-color: #ccc;height: 200px;}.box2 {flex: auto;}.box1,.box3 {width: 200px;}</style>
2、在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？
  <body>  <div class="box"><div class="box1"></div><div class="box2"></div></div></body><style>* {margin: 0;}.box {background-color: #ccc;}.box1,.box2 {height: 200px;width: 200px;margin: 20px;}.box1 {background-color: red;}.box2 {background-color: blue;}</style>

外边距合并的场景

1、相邻兄弟元素：两个相邻的兄弟元素之间的上下外边距会合并。

2、父元素与第一个/最后一个子元素：父元素的上外边距与第一个子元素的上外边距，或父元素的下外边距与最后一个子元素的下外边距会合并。

3、空块级元素：如果一个块级元素没有内容、内边距、边框，其上下外边距会合并。

外边距合并的规则

1、取较大值：合并后的外边距取两个外边距中的较大值。

2、一正一负：如果一个外边距为正，另一个为负，合并后的外边距为两者之和。

3、同为负值：如果两个外边距都为负，合并后的外边距取绝对值较大的那个。

不让相邻元素外边距合并

1、添加边框或内边距：为父元素添加边框或内边距可以阻止外边距合并。

.parent {

padding: 1px; /* 或 border: 1px solid transparent; */

}

2、使用浮动或定位：浮动元素或绝对定位元素的外边距不会合并。

.child {

float: left; /* 或 position: absolute; */

}

3、使用overflow属性：将父元素的overflow设置为auto、hidden或scroll。

.parent {

overflow: hidden;

}

4、使用display: flex或display: grid：将父元素的display设置为flex或grid。

.parent {

display: flex;

}

5、使用::before或::after伪元素：在父元素中添加伪元素。

.parent::before {

content: '';

display: table;

}

3、移动端 1px 实现方案

 在CSS中我们一般使用px作为单位，需要注意的是，CSS样式里面的px和物理像素并不是相等的。CSS中的像素只是一个抽象的单位，在不同的设备或不同的环境中，CSS中的1px所代表的物理像素是不同的。在PC端，CSS的1px一般对应着电脑屏幕的1个物理像素，但在移动端，CSS的1px等于几个物理像素。

1、使用 transform: scale() 缩放
把原先元素的 border去掉，利用伪元素实现 border ，并将 transform 的 scale
缩小一半，原先的元素相对定位，新的 border 绝对定位。
优点：兼容性好，适用于单边或多边边框。
缺点：需要额外使用伪元素，代码稍复杂。

<body><div class="border-1px">1</div><div class="border-2px">2</div><div class="border-3px">3</div><div class="border-4px">4</div><div class="scale-1px">5</div></body><style>.border-1px {position: relative;}.border-1px::after {content: "";position: absolute;left: 0;bottom: 0;width: 100%;height: 1px;background-color: #000;transform: scaleY(0.5); /* 缩放为原来的一半 */transform-origin: 0 0;}.border-2px {padding-top: 10px;border-bottom: 0.5px solid #000;}.border-3px {padding-top: 10px;border-bottom: 1px solid #000;}.border-4px {margin-top: 10px;height: 1px;background-color: #000;transform: scaleY(0.5); /* 会将盒子整体都缩放 */}.scale-1px {position: relative;margin-bottom: 20px;border: none;}.scale-1px:after {content: "";position: absolute;top: 0;left: 0;border: 1px solid #000; -webkit-box-sizing: border-box;box-sizing: border-box;width: 200%;height: 200%;-webkit-transform: scale(0.5);transform: scale(0.5);-webkit-transform-origin: left top;transform-origin: left top;}</style>

相关文章：

CSS 相关知识

1、高度已知&#xff0c;三栏布局&#xff0c;左右宽度 200&#xff0c;中间自适应&#xff0c;如何实现&#xff1f; <body><div class"box"><div class"box1">高度已知</div><div class"box2">左右宽度 200&…...

编程日记 2026/2/22 6:27:47

RocketMQ、RabbitMQ、Kafka 的底层实现、功能异同、应用场景及技术选型分析

1️⃣ 引言 在现代分布式系统架构中&#xff0c;&#x1f4e9;消息队列&#xff08;MQ&#xff09;是不可或缺的组件。它在系统&#x1f517;解耦、&#x1f4c9;流量削峰、⏳异步处理等方面发挥着重要作用。目前&#xff0c;主流的消息队列系统包括 &#x1f680;RocketMQ、&…...

编程日记 2026/2/21 13:29:44

IDEA升级出现问题Failed to prepare an update Temp directory inside installation

IDEA升级出现问题"Failed to prepare an update Temp directory inside installation…" 问题来源&#xff1a; 之前修改了IDEA的默认配置文件路径&#xff0c;然后升级新版本时就无法升级&#xff0c;提示"Failed to prepare an update Temp directory insid…...

编程日记 2026/4/21 19:52:15

DeepSeek提示词手册

一、核心原则&#xff1a;基于DeepSeek的推理特性 自然语言优先undefinedDeepSeek擅长理解自然表达&#xff0c;无需复杂模板。例如&#xff1a; ❌旧模板&#xff1a;"你是专业分析师&#xff0c;需分三步回答&#xff0c;第一步…" ✅高效提问&#xff1a;"…...

编程日记 2025/10/31 7:26:00

基于UVM搭验证环境

基于UVM搭验证环境基本思路&#xff1a; 首先&#xff0c;我们搭建环境时一般都有一个目标的DUT。此时&#xff0c;我们可以结合所要验证的的模块、是否需要VIP、验证侧重点等在典型的UVM验证环境的基础上做适当调整后形成一个大体的环境架构。比如&#xff0c;需要一个ahb_vip…...

编程日记 2026/2/22 3:40:34

C++性能优化—人工底稿版

C以高性能著称&#xff0c;性能优化是C程序员绕不过去的一个话题&#xff0c;性能优化是一个复杂、全局而又细节的问题&#xff0c;本文总结C性能分析中常用的知识。 性能优化的时机 大部分关于性能优化的文章都强调&#xff1a;不要过早的进行性能优化。 C编码层面 数据结…...

编程日记 2025/11/22 1:06:52

Java 使用腾讯翻译 API 实现含 HTML 标签文本精准翻译工具

一、翻译标签文本工具 package org.springblade.common.utils;import java.util.ArrayList; import java.util.List; import java.util.regex.Matcher; import java.util.regex.Pattern;public class TencentTranslationForHTML {public static void main(String[] args) {Stri…...

编程日记 2026/1/2 12:31:31

十款开源的论坛建站工具

以下是十款开源的论坛建站工具&#xff0c;它们各具特色&#xff0c;能够满足不同用户的需求&#xff1a; Discuz!&#xff08;Crossday Discuz! Board&#xff09; 特点&#xff1a;基础架构采用web编程组合PHPMySQL&#xff0c;用户可以在不需要任何编程的基础上&#xff0c;…...

编程日记 2026/4/24 3:37:32

vue学习6

1. 智慧商城 1. 路由设计配置 单个页面&#xff0c;独立展示的&#xff0c;是一级路由 2.二级路由配置 规则&组件配置导航链接配置路由出口 <template><div id"app"><!--二级路由出口--><router-view></router-view><van-…...

编程日记 2026/4/21 21:47:59

线程池以及日志、线程总结

一、线程池以及日志 1、基础线程池写法 主线程在main函数中构建一个线程池&#xff0c;初始化(Init)后开始工作(Start) 此时线程池中每个线程都已经工作起来了&#xff0c;只是任务队列中任务为空&#xff0c;所有线程处于休眠状态(通过线程同步中的条件变量实现&#xff0c…...

编程日记 2026/4/11 23:08:54

Vue 响应式渲染 - 过滤应用

Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue响应式渲染综合 - 过滤应用 目录 过滤应用 引入vue Vue设置 设置页面元素 模糊查询过滤实现 函数表达式实现 总结 过滤应用 综合响应式渲染做一个输入框&#xff0c;用来实现&#xff1b;搜索输入框关键词符合列表。…...

编程日记 2026/4/22 1:26:15

【ThreeJS Basics 1-3】Hello ThreeJS，实现第一个场景

文章目录 环境创建一个项目安装依赖基础 Web 页面概念解释编写代码运行项目 环境 我的环境是 node version 22 创建一个项目 首先&#xff0c;新建一个空的文件夹&#xff0c;然后 npm init -y , 此时会快速生成好默认的 package.json 安装依赖 在新建的项目下用 npm 安装依…...

编程日记 2026/4/11 21:23:08

银行国际结算

银行国结项目&#xff0c;即国际结算项目&#xff0c;是银行业务中的重要组成部分&#xff0c;它涉及跨国界的货币收付和资金转移。 一、银行国结项目的定义 银行国结项目是指银行为国际贸易、投资等活动提供的国际结算服务&#xff0c;包括各种国际支付和资金清算业务。这些…...

编程日记 2026/4/24 21:38:12

Go语言构建微服务：从入门到实战

引言 在云原生时代&#xff0c;微服务架构已成为构建复杂分布式系统的首选方案。Go语言凭借其卓越的并发支持、简洁的语法和高效的运行时&#xff0c;成为微服务开发的利器。本文将深入探讨如何用Go构建健壮的微服务系统&#xff0c;并通过完整案例演示关键实现细节。 一、微…...

编程日记 2026/4/21 20:20:20

深入理解动态代理

为什么需要动态代理 对于代码的增强逻辑我们是清楚具体实现的，一种方式是增强逻辑作为委托类，被其他业务类调用， 这样会有很多重复代码，而且，当需要根据动态参数来决定增强逻辑时，重复代码会更多，逻辑会更不清晰 二，也是动态代理产生的原始需求，解决类爆照问题， 所以…...

编程日记 2026/4/23 14:13:50

私有属性和方法（python）

一、私有属性&#xff08;属性名前面加两个短下划线&#xff09; &#xff08;一&#xff09;私有属性与公有属性区别 公有属性&#xff1a;在类里面和外面均可以访问和修改 私有属性&#xff1a;需要用set方法才能修改&#xff0c;get方法才能访问 &#xff08;二&#xf…...

编程日记 2025/7/2 20:19:24

Cherry Studio之DeepSeek联网/本地，建属于自己的AI助理！

上一篇文章&#xff0c;讲了DeepSeek-R1部署到本地的方法。这一篇文章&#xff0c;我们让DeepSeek再一次升级&#xff0c;通过图形化界面来交互&#xff0c;从而变成我们的AI助理&#xff0c;让DeepSeek R1发挥最大实力&#xff01; 首选需要借助硅基流动的API接口&#xff0c…...

编程日记 2026/4/11 23:01:34

TcpClientTest

ClientTest&#xff1a; using System; using System.Net.Sockets; using System.Text;class TcpClientTest {static void Main(string[] args){try{// 创建一个TcpClient实例并连接到服务器 TcpClient client new TcpClient("1vg5062570.51mypc.cn", 43319);//1v…...

编程日记 2026/2/17 12:50:58

IGBT的两级关断

IGBT&#xff08;绝缘栅双极型晶体管&#xff09;的两级关断&#xff08;Two-stage turn-off&#xff09;是一种优化关断过程的方法&#xff0c;主要用于减少关断时的电压过冲和dv/dt&#xff08;电压变化率&#xff09;过高的问题&#xff0c;特别是在大功率应用中&#xff08…...

编程日记 2026/4/26 21:02:44

【STM32】ADC

本次实现的是ADC实现数字信号与模拟信号的转化&#xff0c;数字信号时不连续的&#xff0c;模拟信号是连续的。 1.ADC转化的原理 模拟-数字转换技术使用的是逐次逼近法&#xff0c;使用二分比较的方法来确定电压值 当单片机对应的参考电压为3.3v时&#xff0c;0~ 3.3v(模拟信号…...

编程日记 2026/4/11 23:56:23

从MyBatis-Plus看Spring Boot自动配置原理

一、问题引入&#xff1a;神秘的配置生效之谜 当我们使用MyBatis-Plus时&#xff0c;只需在pom.xml中添加依赖&#xff1a; <dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3…...

编程日记 2026/2/27 5:28:49

0基础租个硬件玩deepseek,蓝耘元生代智算云|本地部署DeepSeek R1模型

前言&#xff1a;哈喽&#xff0c;大家好&#xff0c;今天给大家分享一篇文章&#xff01;并提供具体代码帮助大家深入理解&#xff0c;彻底掌握&#xff01;创作不易&#xff0c;如果能帮助到大家或者给大家一些灵感和启发&#xff0c;欢迎收藏关注哦 &#x1f495; 目录 0基础…...

编程日记 2026/4/25 22:58:47

雪花算法应用

什么是雪花算法&#xff1f; 雪花算法是由 Twitter 开源的分布式 ID 生成算法&#xff0c;用于生成 64 位的长整型唯一 ID。其结构如下&#xff1a; - 1 位符号位&#xff1a;始终为 0 - 41 位时间戳&#xff1a;精确到毫秒 - 10 位工作机器 ID&#xff1a;包含 5 位数据中心 …...

编程日记 2026/3/25 1:34:28

Chapter3：结构化程序设计

参考书籍&#xff1a;《C#边做边学》&#xff1b; 3.结构化程序设计 3.1 结构化程序设计的3种基本结构 顺序结构&#xff1a;先执行 A {\rm A} A语句&#xff0c;再执行 B {\rm B} B语句&#xff0c;两者是顺序执行的关系&#xff1b; 选择结构&#xff1a;根据所定选择条件为…...

编程日记 2026/4/25 16:40:08

白话文实战Nacos（保姆级教程）

前言 上一篇博客 我们创建好了微服务项目，本篇博客来体验一下Nacos作为注册中心和配置中心的功能。 注册中心 如果我们启动了一个Nacos注册中心，那么微服务比如订单服务，启动后就可以连上注册中心把自己注册上去，这过程就是服务注册。每个微服务，比如商品服务都应该注册…...

编程日记 2026/4/11 23:11:59

c语言函数学习

C语言函数学习笔记&#xff1a;从入门到实践 一、什么是函数&#xff1f; 函数是C语言中用于封装特定功能的代码块&#xff0c;是模块化编程的核心。通过函数可以实现&#xff1a; 代码复用&#xff1a;避免重复编写相同逻辑 逻辑清晰&#xff1a;将复杂程序分解为多个小模块…...

编程日记 2025/5/25 4:24:32

linux利用nfs服务器，实现数据和windows环境拷贝

1. 在Linux上设置NFS服务器 1.1 安装NFS服务器软件 首先&#xff0c;你需要在Linux服务器上安装NFS服务器软件。假设你使用的是基于Debian的系统&#xff08;如Ubuntu&#xff09;&#xff0c;可以按照以下步骤操作&#xff1a; sudo apt update sudo apt install nfs-kerne…...

编程日记 2026/3/28 6:54:36

智能理解 PPT 内容，快速生成讲解视频

当我们想根据一版 PPT 制作出相对应的解锁视频时&#xff0c;从撰写解锁词&#xff0c;录制音频到剪辑视频&#xff0c;每一个环节都需要投入大量的时间和精力&#xff0c;本方案将依托于阿里云函数计算 FC 和百炼模型服务&#xff0c;实现从 PPT 到视频的全自动转换&#xff0…...

编程日记 2026/4/26 11:35:44

FFmpeg + OpenGL ES 美颜相机教程大纲

做OpenGL和FFmpeg也有很长一段时间了&#xff0c;最近打算结合FFmpegOpenGL ES做一期视频教程&#xff0c;下面是完整视频教程大纲。最终的项目实战效果是实现一款美颜相机。教程分为理论讲解和实战开发两部分&#xff0c;适合有一定编程基础的开发者。课程计划是免费发布在B站…...

编程日记 2025/10/12 23:33:25

IEC61850标准下的数据和数据模型服务的详细介绍

目录 一、摘要 二、概述 三、详细介绍 1、读服务器目录(GetServerDirectory) 2、读逻辑设备目录(GetLogicalDeviceDirectory) 3、读逻辑节点目录(GetLogicalNodeDirectory) 4、读全部数据值(GetAllDataValues) 5、读数据值(GetDataValues) 6、设置数据值(SetDataValues…...

编程日记 2026/4/26 21:18:42