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

css-盒模型

news 文章来源：https://blog.csdn.net/YogaMiller/article/details/125151218 2024/11/1 0:21:32
  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

梯度提升算法决策过程的逐步可视化

梯度提升算法是最常用的集成机器学习技术之一&#xff0c;该模型使用弱决策树序列来构建强学习器。这也是XGBoost和LightGBM模型的理论基础&#xff0c;所以在这篇文章中&#xff0c;我们将从头开始构建一个梯度增强模型并将其可视化。 梯度提升算法介绍 梯度提升算法&#x…...

编程日记 2023/5/28 7:53:58

Linux系统调用之文件属性操作函数

前言 如果&#xff0c;想要深入的学习Linux系统调用中access&#xff0c;chmod&#xff0c;chown&#xff0c;truncate这些有关于文件属性的操作函数&#xff0c;还是需要去自己阅读Linux系统中的帮助文档。 具体输入命令&#xff1a; man 2 access/chmod/chown/truncate 即可…...

编程日记 2023/5/28 7:53:53

VMware 安装 银河麒麟高级服务器操作系统 V10 + QT 开发环境搭建

下载并安装vmware 下载银河麒麟操作烯烃服务器版v10的镜像文件从官网下载&#xff0c;因为是x86的电脑芯片&#xff0c;选择AMD64版&#xff0c;即vmare 安装麒麟操作系统注意事项&#xff1a;安装位置选择自动分区网络和主机名设置打开网络&#xff0c;ip4就不用再设置了创建一…...

编程日记 2023/5/28 7:53:46

2023年疫情开放，国内程序员薪资涨了还是跌了？大数据告诉你答案

自从疫情开放&#xff0c;国内各个行业都开始有复苏的迹象&#xff0c;尤其是旅游行业更是空前暴涨&#xff0c;那么互联网行业如何&#xff1f; 有人说今年好找工作多了&#xff0c;有人说依然是内卷得一塌糊涂&#xff0c;那么今年开春以来&#xff0c;各个岗位的程序员工资…...

编程日记 2023/5/28 7:53:40

太赫兹频段耦合器设计相关经验总结

1拿到耦合器的频段后&#xff0c;确定中心频率和波导的宽度和高度 此处贴一张不同频段对应的波导尺寸图 需要注意的是1英寸 2.54厘米&#xff0c;需注意换算 具体网址&#xff1a;矩形波导尺寸 | 扩维 (qualwave.com) 仅列举我比较常用的太赫兹频段部分 2.以220~320GHz频段&a…...

编程日记 2023/5/28 7:53:32

反弹shell数据不回显带外查询pikaqiu靶场搭建

P1 文件上传下载&#xff08;解决无图形化和解决数据传输&#xff09; 解决无图形化&#xff1a; 当我们想下载一个文件时&#xff0c;通常是通过浏览器的一个链接直接访问网站点击下载的&#xff0c;但是在实际的安全测试中&#xff0c;我们获取的权限只是一个执行命令的窗口…...

编程日记 2023/5/28 7:53:27

按键修改阈值功能、报警功能、空气质量功能实现

按键修改阈值功能 要使用按键&#xff0c;首先要定义按键。通过查阅资料&#xff0c;可知按键的引脚如图所示&#xff1a;按键1&#xff08;S1&#xff09;通过KEY0与PA0连接&#xff0c;按键2&#xff08;S2&#xff09;通过KEY1与PE2连接&#xff0c;按键3&#xff08;S3&…...

编程日记 2023/5/28 7:53:22

spring重点整理篇--springMVC（嘿嘿，开心哟）

Spring MVC是的基于JavaWeb的MVC框架&#xff0c;是Spring框架中的一个组成部分(WEB模块) MVC设计模式&#xff1a; Controller&#xff08;控制器&#xff09; Model&#xff08;模型&#xff09; View&#xff08;视图&#xff09; 重点来了&#x1f604; SpringMVC的工作机制…...

编程日记 2023/5/28 7:53:16

图像融合评估指标Python版

图像融合评估指标Python版 这篇博客利用Python把大部分图像融合指标基于图像融合评估指标复现了&#xff0c;从而方便大家更好的使用Python进行指标计算&#xff0c;以及一些I/O 操作。除了几个特征互信息的指标没有成功复现之外&#xff0c;其他指标均可以通过这篇博客提到的P…...

编程日记 2023/5/28 7:53:08

20230303----重返学习-函数概念-函数组成-函数调用-形参及匿名函数及自调用函数

day-019-nineteen-20230303-函数概念-函数组成-函数调用-形参及匿名函数及自调用函数 变量 变量声明 变量 声明定义(赋值) var num;num 100; 声明与赋值分开var num 100; 声明时就赋值 赋值只能声明一次&#xff0c;可以赋值无数次 变量声明关键词 varconstletclassfunctio…...

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

重庆建企业网站/上海比较大的优化公司

关于如何获取webrtc的源码&#xff0c;请参考Webrtc代码下载这篇文章。 构建android编译环境 $ cd src/ $ source ./build/android/envsetup.sh $ export JAVA_HOME/usr/bin/ $ export GYP_DEFINES"$GYP_DEFINES OSandroid" $ export GYP_GENERATORSninja 下载编译所…...

编程日记 2024/10/31 23:59:22

国外设计网站app有哪些/台湾搜索引擎

编辑~/.bashrc文件&#xff0c;然后在最后加上你想设置的目录就可以了。 这样做之后就可以在终端中执行你想要的程序了&#xff0c;不过如果你使用其它程序在后台调用的话可能还是会调用不到&#xff0c;因为这个设置是针对bash有效的。 例如我现在使用eclipse来调用arm-none-e…...

编程日记 2024/10/31 23:23:02

b2b免费信息平台/青岛官网seo

题目链接&#xff1a;http://acm.hdu.edu.cn/showproblem.php?pid1106Problem Description输入一行数字&#xff0c;如果我们把这行数字中的‘5’都看成空格&#xff0c;那么就得到一行用空格分割的若干非负整数&#xff08;可能有些整数以‘0’开头&#xff0c;这些头部的‘0…...

编程日记 2024/10/31 20:10:41

十堰网站制作公司电话/活动策划方案详细模板

一 配置Path步骤&#xff1a; a&#xff1a;右键点击计算机 → 选择属性 → 更改设置 → 点击高级 → 点击环境变量 → 创建名为JAVA_HOME的环境变量 → 将jdk所在的目录路径(bin所在的路径)配置到JAVA_HOME变量中 b: 用;与其他变量分隔 → 在path环境变量中添…...

编程日记 2024/10/31 18:47:46

网站后台慢/搜索引擎优化seo价位

小程序使用background-image无效1. 用image标签代替样式背景图2. 将图片转换为base64编码3. 直接在标签上写入4. 将路径改成可以直接访问的绝对路径如题目所说&#xff0c;在开发小程序时&#xff0c;遇到该问题&#xff0c;该如何解决呢&#xff1f;&#xff1f;&#xff1f; …...

编程日记 2024/10/31 18:46:45

网站程序流程图/百度实名认证

nginx的localtion指令详解 Nginx 的 HTTP 配置主要包括三个区块&#xff0c;结构如下&#xff1a; http { # 这个是协议级别include mime.types;default_type application/octet-stream;keepalive_timeout 65;gzip on;server { # 这个是服务…...

编程日记 2024/10/31 18:41:38