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

css-盒模型

news 2025/9/14 14:26:31
  1. 巧妙运用margin负值
  2. 盒模型和怪异盒模型(border padding 包含在内)
  3. display: block 能让textarea input 水平尺寸自适应父容器? – 不能
* {box-sizing: border-box; // bs: bb
}

<textarea/> 是替换元素,尺寸由内部元素决定,不受display水平影响. 当然可以直接设置宽度100%

margin塌陷(合并/重叠)

  1. 标准流, 上面的盒子设置 margin-bottom, 下面的设置了margin-top, 这个两个会重叠, 变为较大的一个
  2. 但是, 如果脱标,比如浮动之后就不会重叠了; 或者两个元素在flex/grid 内,
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 100%;height: 200px;background-color: antiquewhite;margin-bottom: 100px;float: left;}.box2{background-color: aqua;margin-top: 100px;}</style>
</head>
<body><div class="box1"></div><div class="box2"></div>
</body>
</html>

margin

margin和padding 用 百分比单位, 参照的是父级的宽度,设置width 也是参照父级的宽度…
xxx xxx xxx
xxx 2 xxx
xxx 2
如何让2 向下延伸, 又不会挤走第三行?

padding

  1. inline 元素的padding 其实也影响布局.
  2. 有两点:
    • 下面的a元素的padding 把上下的遮住了. 导致只能触发 alert(2)
    • padding的出现使contianer产生了滚动条
 <style>.container {width: 200px;height: 100px;margin: 200px auto;overflow: auto;background-color: #f0f3f9;}a {font-size: 12px;padding: 100px 10px;background-color: red;opacity: .7;}
</style>
<div class="container"><div onclick="alert(1)">11</div><a href="#" onclick="alert(2)">yogaMiller</a><div onclick="alert(2)">22</div>
</div>

在这里插入图片描述

  1. 盒模型 定位 flex/grid 是写页面的基础
  2. 最初是用来做文字环绕图片的效果的. 后面发展成了一种布局方式
  3. 可以轻松实现
ul li {float: left;float: right; 
}
// 元素浮动后,脱离文档流, 且有了行内块元素的特点. 可设置宽高等.

清除浮动

.clearfix::after{content: "";display: block;clear: both;height: 0;visibility: hidden;	
}
.clearfix{*zoom: 1; /* ie 6 7  感觉不太需要了*/
}
.box{overflow: hidden; /* overflow-x: auto scroll */
}

相关文章：

css-盒模型

巧妙运用margin负值盒模型和怪异盒模型(border padding 包含在内)display: block 能让textarea input 水平尺寸自适应父容器? – 不能 * {box-sizing: border-box; // bs: bb }<textarea/> 是替换元素,尺寸由内部元素决定,不受display水平影响. 当然可以直接设置宽度10…...

编程日记 2023/5/26 20:31:21

Linux | 调试器GDB的详细教程【纯命令行调试】

文章目录一、前言二、调试版本与发布版本1、见见gdb2、程序员与测试人员3、为什么Release不能调试但DeBug可以调试❓三、使用gdb调试代码1、指令集汇总2、命令演示⌨ 行号显示⌨ 断点设置⌨ 查看断点信息⌨ 删除断点⌨ 开启 / 禁用断点⌨ 运行 / 调试⌨ 逐过程和逐语句⌨ 打印 …...

编程日记 2023/5/26 19:39:45

wifi芯片大市场和个人小生活

3.3 是日也&#xff0c;天朗气清&#xff0c;惠风和畅。仰观宇宙之大&#xff0c;俯察论文论坛&#xff0c;所以游目骋怀&#xff0c;足以极视听之娱&#xff0c;信可乐也。 夫人之相与&#xff0c;俯仰一世&#xff0c;或取诸怀抱&#xff0c;悟言一室之内&#xff1b;或因寄所…...

编程日记 2023/5/28 2:20:45

全国计算机技术与软件专业技术资格（水平）考试 上半年2023年3月13日开始，下半年2023年8月14日开始

根据2023年计算机技术与软件专业技术资格(水平)考试工作计划，可以得知，2023年软考报名时间——上半年2023年3月13日开始，下半年2023年8月14日开始。 点击查看：人力资源社会保障部办公厅关于2023年度专业技术人员职业资格考试工作计划及有关事项的通知 点击查看：2023年度…...

编程日记 2023/5/28 2:20:41

大数据框架之Hadoop：MapReduce（六）Hadoop企业优化

一、MapReduce 跑的慢的原因 MapReduce程序效率的瓶颈在于两点&#xff1a; 1、计算机性能 CPU、内存、磁盘、网络 2、IO操作优化 数据倾斜Map和Reduce数设置不合理Map运行时间太长&#xff0c;导致Reduce等待过久小文件过多大量的不可分块的超大文件Spill次数过多Merge次…...

编程日记 2023/5/28 2:20:36

Spring File Storage的详细文档

快速入门配置pom.xml引入依赖<dependencies><!-- spring-file-storage 必须要引入 --><dependency><groupId>cn.xuyanwu</groupId><artifactId>spring-file-storage</artifactId><version>0.7.0</version></dependen…...

编程日记 2023/5/28 2:20:31

Java软件开发好学吗？学完好找工作吗？

互联网高速发展的当下&#xff0c;Java语言无处不在&#xff1a;手机APP、Java游戏、电脑应用&#xff0c;都有它的身影。作为最热门的开发语言之一&#xff0c;Java在编程圈的地位不可撼动。可是&#xff0c;听名字就很专业的样子。Java语言到底好学吗&#xff1f;刚入坑编程圈…...

编程日记 2023/5/28 2:20:26

【独家C】华为OD机试提供C语言题解 - 优秀学员统计

最近更新的博客 华为od 2023 | 什么是华为od，od 薪资待遇，od机试题清单华为OD机试真题大全，用 Python 解华为机试题 | 机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南）华为od机试，独家整理 已参加机试人员的实战技巧文章目录 最近更新的博客使用说明优秀…...

编程日记 2023/5/28 2:20:21

数据仓库、数据中台、数据湖都是什么？

相信很多人都在最近的招聘市场上看到过招聘要求里提到了数据仓库、数据中台&#xff0c;甚至还有数据湖&#xff0c;这些层出不穷的概念让人困扰。今天我就来跟大家讲一讲数据仓库、数据中台以及数据湖的概念及区别。 数据库 在了解数据仓库、数据中台以及数据湖之前&#xff…...

编程日记 2023/5/28 2:20:16

0099 MySQL02

1.简单查询 查询一个字段 select 字段名 from 表名; 查询多个字段&#xff0c;使用“&#xff0c;”隔开 select 字段名,字段名 from 表名; 查询所有字段 1.把每个字段都写上 select 字段名,字段名,字段名.. from 表名; 2.使用*(效率低&#xff0c;可读性差) select *…...

编程日记 2023/5/28 2:20:09

应急响应-ubuntu系统cpu飙高

这里写目录标题一、排查过程二、处置过程三、溯源总结一、排查过程 1、查看CPU使用情况 top -c2、查看异常进程的具体参数 ps -aux3、通过微步查询域名信息 4、查看异常进程的监听端口 netstat -anlpt5、查找服务器内的异常文件 ls cat run.sh cat mservice.sh6、查看脚本…...

编程日记 2023/5/28 2:20:02

MDK软件使用技巧

本文主要汇总MDK软件使用技巧 一、字体大小及颜色修改 第一步点击工具栏的这个小扳手图标 进去后显示如下&#xff0c;先设置 Encoding 为&#xff1a;Chinese GB2312(Simplified)&#xff0c;然后设置 Tab size 为&#xff1a;4 以更好的支持简体中文&#xff0c;否则&…...

编程日记 2023/5/28 2:19:59

3 333333

全部 答对 答错 单选题 1. 一个项目来取代目前公司的文件存储系统已经获批。外部供应商提供硬件&#xff0c;内部团队开发软件。这个团队是自组织的&#xff0c;由一般的专家组成。团队建议迭代地与供应商合作&#xff0c;但供应商表示拒绝。因此&#xff0c;只有软件将被迭代…...

编程日记 2023/5/28 2:19:53

1528. 重新排列字符串

1528. 重新排列字符串https://leetcode.cn/problems/shuffle-string/ 难度简单52收藏分享切换为英文接收动态反馈 给你一个字符串 s 和一个 长度相同 的整数数组 indices 。 请你重新排列字符串 s &#xff0c;其中第 i 个字符需要移动到 indices[i] 指示的位置。 返回重新…...

编程日记 2023/5/28 2:19:49

【8】【用户操作日志】操作日志SpringBootStarter

操作日志 此版本操作日志主要就是通过AOP拦截器实现的&#xff0c;整体主要分为AOP拦截器、自定义函数、日志上下文、扩展接口&#xff1b;组件提供了6个扩展点&#xff0c;自定义函数、日志上下文、用户信息获取&#xff0c;日志保存&#xff0c;自定义异常获取&#xff0c;入…...

编程日记 2023/5/28 2:19:46

【游戏逆向】寻路函数隐藏检测点分析

案例&#xff1a; 某游戏出现调用寻路函数失败异常崩溃。 基本情况分析&#xff1a; 在刚登陆游戏的时候直接调用寻路函数崩溃。 手动寻路以后再调用寻路不崩溃。(排除了函数编写错误的可能) 猜测可能检测方法&#xff1a; 有某一个标志位(全局类型)在游戏刚登陆的时候没…...

编程日记 2023/5/28 2:19:41

【Zabbix实战之运维篇】Zabbix监控Docker容器配置方法

【Zabbix实战之运维篇】Zabbix监控Docker容器配置方法 一、检查Zabbix监控平台状态1.检查Zabbix各组件容器状态2.奸诈Zabbix-server状态二、下载监控模板1.进入Zabbix官网下载页面2.查看下载模板三、创建一个测试容器1.创建一个测试容器2.检查测试容器状态3.访问测试web服务四、…...

编程日记 2023/5/28 2:19:38

这款 Python 工具进行数据分析及数据可视化真的很棒啊

前言 大家好&#xff0c;今天我们以全国各地区衣食住行消费数据为例&#xff0c;来分析2022年中国统计年鉴数据&#xff0c;统计全国各地人民的消费地图&#xff0c;看看&#xff1a; 哪个省份的人最能花钱 哪个省份的人最舍得花钱 哪个省份的人最抠门 全国各地区人民在吃、穿…...

编程日记 2023/5/28 7:54:13

visual Studio Code常用快捷键

1、向上/向下移动代码行 alt 下箭头/上箭头 2、向上/向下复制一行代码 shiftalt 下箭头/上箭头 3、选定多个相同的单词 ctrl d 4、全局替换 ctrl h 5、快速定位到某一行 ctrl g 6、放大缩小整个编辑器界面 ctrl / - 7、添加多个光标 Ctrl Alt 上箭头/下箭头…...

编程日记 2023/5/28 7:54:09

基础（一）十六进制转八进制

试题 基础练习 十六进制转八进制 资源限制 内存限制&#xff1a;512.0MB C/C时间限制&#xff1a;1.0s Java时间限制&#xff1a;3.0s Python时间限制&#xff1a;5.0s 问题描述 　　给定n个十六进制正整数&#xff0c;输出它们对应的八进制数。输入格式 　　输入的第…...

编程日记 2023/5/28 7:54:01

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API&#xff0c;用于在函数组件中使用 state 和其他 React 特性&#xff08;例如生命周期方法、context 等&#xff09;。Hooks 通过简洁的函数接口&#xff0c;解决了状态与 UI 的高度解耦&#xff0c;通过函数式编程范式实现更灵活 Rea…...

编程新知 2025/7/7 6:59:35

三维GIS开发cesium智慧地铁教程（5）Cesium相机控制

一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点&#xff1a; 路径验证&#xff1a;确保相对路径.…...

编程新知 2025/8/21 15:41:11

SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现，论文初版实现

摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序&#xff0c;以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务&#xff0c;提供稳定高效的数据处理与业务逻辑支持&#xff1b;利用 uniapp 实现跨平台前…...

编程新知 2025/8/14 14:59:56

python如何将word的doc另存为docx

将 DOCX 文件另存为 DOCX 格式&#xff08;Python 实现&#xff09; 在 Python 中&#xff0c;你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是&#xff0c;.doc 是旧的 Word 格式&#xff0c;而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

编程新知 2025/8/5 19:18:33

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码： prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...

编程新知 2025/7/4 0:50:01

Mobile ALOHA全身模仿学习

一、题目 Mobile ALOHA&#xff1a;通过低成本全身远程操作学习双手移动操作 传统模仿学习&#xff08;Imitation Learning&#xff09;缺点&#xff1a;聚焦与桌面操作&#xff0c;缺乏通用任务所需的移动性和灵活性 本论文优点&#xff1a;&#xff08;1&#xff09;在ALOHA…...

编程新知 2025/9/9 10:09:47

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了&#xff0c;要么要会员、要么写的乱七八糟。这里我整理一下&#xff0c;把问题说清楚并且给出代码&#xff0c;拿去用就行&#xff0c;照着葫芦画瓢。 问题 在继承QWebEngineView后&#xff0c;重写mousePressEvent或event函数无法捕获鼠标按下事…...

编程新知 2025/6/11 3:07:32

视觉slam十四讲实践部分记录——ch2、ch3

ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件，或者在构建过程中仍然引用了旧的路…...

编程新知 2025/9/3 15:45:36

【分享】推荐一些办公小工具

1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由&#xff1a;大部分的转换软件需要收费&#xff0c;要么功能不齐全&#xff0c;而开会员又用不了几次浪费钱&#xff0c;借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...

编程新知 2025/9/3 12:01:04

深入理解Optional：处理空指针异常

1. 使用Optional处理可能为空的集合 在Java开发中&#xff0c;集合判空是一个常见但容易出错的场景。传统方式虽然可行&#xff0c;但存在一些潜在问题&#xff1a; // 传统判空方式 if (!CollectionUtils.isEmpty(userInfoList)) {for (UserInfo userInfo : userInfoList) {…...

编程新知 2025/9/3 13:51:02