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

css-盒模型

news 2026/2/10 7:59:27
  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

边缘计算医疗风险自查APP开发方案

核心目标：在便携设备（智能手表/家用检测仪）部署轻量化疾病预测模型，实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

编程新知 2026/1/28 10:02:54

Python实现prophet 理论及参数优化

文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候&#xff0c;写过一篇简单实现&#xff0c;后期随着对该模型的深入研究&#xff0c;本次记录涉及到prophet 的公式以及参数调优&#xff0c;从公式可以更直观…...

编程新知 2026/1/27 5:01:54

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备 ​​工具安装​​&#xff1a; 下载安装DevEco Studio 4.0&#xff08;支持HarmonyOS 5&#xff09;配置HarmonyOS SDK 5.0确保Node.js版本≥14 ​​项目初始化​​&#xff1a; ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

编程新知 2026/2/1 4:17:33

NFT模式：数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

编程新知 2026/1/31 23:23:23

MySQL中【正则表达式】用法

MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现&#xff08;两者等价&#xff09;&#xff0c;用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例&#xff1a; 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...

编程新知 2025/11/21 22:02:37

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系&#xff0c;以下是深入解析&#xff1a; 门铃FIFO溢出的本质 在RapidIO系统中&#xff0c;门铃消息FIFO是硬件控制器内部的缓冲区&#xff0c;用于临时存储接收到的门铃消息&#xff08;Doorbell Message&#xff09;。…...

编程新知 2026/1/7 1:29:19

return this；返回的是谁

一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请&#xff0c;不同级别的经理有不同的审批权限&#xff1a; // 抽象处理者&#xff1a;审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...

编程新知 2026/1/28 21:45:43

嵌入式学习笔记DAY33（网络编程——TCP）

一、网络架构 C/S &#xff08;client/server 客户端/服务器&#xff09;&#xff1a;由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序&#xff0c;负责提供用户界面和交互逻辑 &#xff0c;接收用户输入&#xff0c;向服务器发送请求&#xff0c;并展示服务…...

编程新知 2026/2/10 3:34:25

BLEU评分：机器翻译质量评估的黄金标准

BLEU评分&#xff1a;机器翻译质量评估的黄金标准 1. 引言 在自然语言处理(NLP)领域&#xff0c;衡量一个机器翻译模型的性能至关重要。BLEU (Bilingual Evaluation Understudy) 作为一种自动化评估指标&#xff0c;自2002年由IBM的Kishore Papineni等人提出以来&#xff0c;…...

编程新知 2026/1/13 7:39:19

python爬虫——气象数据爬取

一、导入库与全局配置 python 运行 import json import datetime import time import requests from sqlalchemy import create_engine import csv import pandas as pd作用&#xff1a; 引入数据解析、网络请求、时间处理、数据库操作等所需库。requests&#xff1a;发送 …...

编程新知 2025/12/16 7:53:39