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

前端学习DAY27(盒子模型内边距）

news 2026/4/5 23:09:20

内边距(padding)，指的是盒子的内容区与盒子边框之间的距离

    一共有四个方向的内边距，

    可以通过: 

    padding-top

    padding-right

    padding-bottom

    padding-left 


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">.box1{width: 200px;height: 200px;background-color: aqua;
}

设置边框 
           

 border: 10px solid #f00;padding-top:25px;}

来设置四个方向的内边距  

使用padding可以同时设置四个边框的样式，规则和border-width一致

显示4个方向   padding: 20px; 

上，左右，下  padding:10px 20px 10px;

 顺时针上右下左  padding:10px 10px 10px 10px; 

上下，左右   padding:10px 20px; 

创建一个子元素box2占满box1，box2把内容区撑满了

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">   .box1{width: 200px;height: 200px;background-color: aqua;
}
.box2{width: 100%;height: 100%;background-color: chartreuse;} </style>
</head>
<body><div class="box1"><div class="box2"></div></div>
</body>
</html>

总结:

    内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距，

    本盒子的大小由内容区、内边距和边框共同决定

    盒子可见框的宽度 = border-left-width + padding-left + width + padding-right + border-right-width

    可见宽的高度= border-top-width : padding-top : height + padding-bottom : border-bottom-width

 

完整代码 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">   .box1{width: 200px;height: 200px;background-color: aqua;
}
.box2{width: 100%;height: 100%;background-color: chartreuse;} </style>
</head>
<body><div class="box1"><div class="box2"></div></div>
</body>
</html>

 

相关文章：

前端学习DAY27(盒子模型内边距）

内边距(padding)&#xff0c;指的是盒子的内容区与盒子边框之间的距离 一共有四个方向的内边距&#xff0c; 可以通过: padding-top padding-right padding-bottom padding-left <!DOCTYPE html> <html lang"en"> <head><meta charset"U…...

编程日记 2024/12/27 7:04:11

基于cobra开发的k8s命令行管理工具k8s-manager

基于cobra开发的k8s命令行管理工具k8s-manager 如果觉得好用&#xff0c;麻烦给个Star!通用配置1 node 分析所有node的资源情况2 analysis 分析Node节点上的资源使用构成3 image 获取指定namespace的所有镜像地址4 resource 获取指定namespace的所有limit 与 Requests大小5 top…...

编程日记 2024/12/27 7:00:07

scala基础学习(数据类型)-数组

文章目录 数组 Array创建数组直接定义fillofDimtabulate range打印数组toSeqdeepforeach(println) length获取长度indexOf 获取元素索引获取元素/修改元素遍历数组数组内元素转换filter 过滤found 查找元素数组折叠 foldLeft切片拼接排序拷贝copyclone 数组 Array Array是一个…...

编程日记 2024/12/27 6:59:06

uniapp 微信小程序 页面部分截图实现

uniapp 微信小程序 页面部分截图实现 ​ 原理都是将页面元素画成canvas 然后将canvas转化为图片&#xff0c;问题是我页面里边本来就有一个canvas&#xff0c;ucharts图画的canvas我无法画出这块。 ​ 想了一晚上&#xff0c;既然canvas最后能转化为图片&#xff0c;那我直接…...

编程日记 2024/12/27 6:58:05

C语言从入门到放弃教程

C语言从入门到放弃 1. 介绍1.1 特点1.2 历史与发展1.3 应用领域 2. 安装2.1 编译器安装2.2 编辑器安装 3. 第一个程序1. 包含头文件2. 主函数定义3. 打印语句4. 返回值 4. 基础语法4.1 注释4.1.1 单行注释4.1.2 多行注释 4.2 关键字4.2.1 C语言标准4.2.2 C89/C90关键字&#xf…...

编程日记 2024/12/27 6:57:04

直流无刷电机驱动原理3-驱动板硬件设计

六步换向原理 检测转子角度，知道什么时候是60度，什么时候应该换向。 逆时针旋转 三相逆变器，mos管，半桥驱动电路。 PWM调制 不对称半桥调制例程使用第（2）种。对上桥臂PWM调制，下桥臂全部导通。这时候由上桥臂的PWM的占空比决定电机的旋转速度。驱动器电路硬件框图--实…...

编程日记 2024/12/27 6:51:59

攻防世界web第三题file_include

<?php highlight_file(__FILE__);include("./check.php");if(isset($_GET[filename])){$filename $_GET[filename];include($filename);} ?>惯例&#xff1a; 代码审查&#xff1a; 1.可以看到include(“./check.php”);猜测是同级目录下有一个check.php文…...

编程日记 2024/12/27 6:49:57

Trivy Operator命令使用说明

你已成功安装了 Trivy Operator&#xff0c;以下是命令的使用说明&#xff1a; 1. 查看 VulnerabilityReports VulnerabilityReports 是 Trivy Operator 生成的漏洞扫描报告&#xff0c;用于检查容器镜像中的漏洞。 kubectl get vulnerabilityreports --all-namespaces -o wi…...

编程日记 2024/12/27 6:46:55

Lazada商品评论API接口：深度解析与应用实践

在电商领域&#xff0c;用户评论是了解产品市场表现和消费者反馈的重要渠道。Lazada作为东南亚领先的电商平台&#xff0c;提供了商品评论API接口&#xff0c;允许第三方开发者获取平台上商品的评论信息。本文将深入解析Lazada商品评论API接口的重要性、开发应用、以及如何通过…...

编程日记 2024/12/27 6:44:53

2024最新鸿蒙开发面试题合集（二）-HarmonyOS NEXT Release（API 12 Release）

上一篇面试题链接&#xff1a;https://mp.csdn.net/mp_blog/creation/editor/144685078 1. 鸿蒙简单介绍和发展历程 HarmonyOS 是新一代的智能终端操作系统&#xff0c;为不同设备的智能化、互联与协同提供了统一的语言。带来简洁&#xff0c;流畅&#xff0c;连续&#xff0…...

编程日记 2024/12/27 6:38:48

macrodroid通过http请求控制手机运行宏

macrodroid adb命令 adb shell pm grant com.arlosoft.macrodroid android.permission.WRITE_SECURE_SETTINGS例:http请求手机播放指定MP3文件 声音素材_电量过低提醒 新建一个宏 添加触发器-连接-http服务器请求 路径随意填,最好不要有特殊符号,不然浏览器识别链接会出错,…...

编程日记 2024/12/27 6:35:46

【Unity3D】Jobs、Burst并行计算裁剪Texture3D物体

版本&#xff1a;Unity2019.4.0f1 PackageManager下载Burst插件(1.2.3版本) 利用如下代码&#xff0c;生成一个Texture3D资源&#xff0c;它只能脚本生成&#xff0c;是一个32*32*32的立方体&#xff0c;导出路径记得改下&#xff0c;不然报错。 using UnityEditor; using Uni…...

编程日记 2024/12/27 6:34:45

Cesium材质——Material

简介&#xff1a; Cesium.Material对象的目的&#xff0c;就是生成一段名称为czm_getMaterial的函数&#xff08;示例代码如下&#xff09;&#xff0c; 这个czm_getMaterial函数&#xff0c;是shader代码&#xff0c;会被放到片元着色器中使用。 czm_material czm_getMater…...

编程日记 2024/12/27 6:32:43

Postman请求报错SSL证书验证问题

1.报错如下 2.解决报错...

编程日记 2024/12/27 6:31:42

终章：DevOps实践总结报告

DevOps实践总结报告 一、概述 1. 报告目的 本报告旨在总结DevOps实践中的关键领域、最佳实践和实施成果&#xff0c;包括需求管理、持续集成/持续部署、测试管理、安全管理和效能度量等方面。 2. 覆盖范围 #mermaid-svg-L0xFFzMbiDH1qhbl {font-family:"trebuchet ms&…...

编程日记 2024/12/27 6:29:40

解锁金融新纪元：内部知识库的深度挖掘与战略价值

在日新月异的金融行业中&#xff0c;信息的快速流通与精准决策成为了企业竞争力的核心。随着大数据、人工智能等技术的不断渗透&#xff0c;金融机构开始意识到&#xff0c;内部知识库的深度挖掘不仅是提升业务效率的关键&#xff0c;更是推动行业创新与转型的重要驱动力。本文…...

编程日记 2024/12/27 6:28:39

【c语言】一维数组与二维数组

数组 数组名代表的是数组在内存中的起始位置&#xff0c;即首元素的地址&#xff0c;而下表表示的则是该元素相对数组起始位置的偏移量 一维数组 1.定义 类型名 数组名[数组长度] int a[100]; //整型数组长度为101&#xff0c;数组名为a char b[100];//字符型数组长度为101&…...

编程日记 2024/12/27 6:26:37

Milvus×EasyAi：如何用java从零搭建人脸识别应用

如何从零搭建一个人脸识别应用&#xff1f;不妨试试原生Java人工智能算法&#xff1a;EasyAi Milvus 的组合拳。 本文将使用到的软件和工具包括&#xff1a; EasyAi&#xff1a;人脸特征向量提取Milvus&#xff1a;向量数据库用于高效存储和检索数据。 01. EasyAi&#xff1a;…...

编程日记 2024/12/27 6:25:36

Dockerfile 实战指南：解锁高效容器化开发

一、Dockerfile 简介 Dockerfile 是构建镜像的文本文件&#xff0c;通过一系列指令描述镜像构建过程&#xff0c;构建操作由 Docker daemon 进行&#xff0c;它会先验证语法&#xff0c;然后逐一运行指令&#xff0c;每次生成一个新的镜像层&#xff0c;直到构建出最终的镜像。…...

编程日记 2024/12/27 6:24:35

【每日学点鸿蒙知识】混淆配置、主线程处理大量数据、客户端拖拽效果、三方网站加载样式、List警告问题

1、HarmonyOS API升级之后缺少混淆配置文件&#xff1f; 可参考以下文档&#xff1a; 混淆配置&#xff1a;https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/ide-build-obfuscation-V5 混淆规则&#xff1a;https://gitee.com/openharmony/arkcompiler_ets…...

编程日记 2024/12/27 6:23:34

AI教程——让每个人都能高效写出好故事

📖 AI小说创作系统：让每个人都能高效写出好故事 第一章：创作者的痛点在哪里？ 写小说并不只是“把故事写出来”那么简单。很多创作者在第一章之后就陷入了困境： * 情节没头绪：故事开了头，但不知道怎么发展。 * 人物难塑造：角色扁平、动机混乱、行为前后不一。 * 设…...

编程新知 2026/4/5 22:10:03

熵，PSI，IV在机器学习中的应用

1.熵的概念： 熵，是一个热力学的概念。但在历史的发展中，造就了它非常丰富的内涵，进入了很多学科的视野。 1.混乱的熵 很多科普文章中，熵是用来度量混乱的。熵越小，这个时候越有秩序；而被打乱的时候，熵开始增大，直到最后一片混乱。 2.可能的熵 所谓的整洁，指的是合…...

编程新知 2026/4/5 19:47:21

跨越时空的图形接口桥梁：d3d8to9如何让经典游戏重获新生

跨越时空的图形接口桥梁&#xff1a;d3d8to9如何让经典游戏重获新生 【免费下载链接】d3d8to9 A D3D8 pseudo-driver which converts API calls and bytecode shaders to equivalent D3D9 ones. 项目地址: https://gitcode.com/gh_mirrors/d3/d3d8to9 当经典遭遇现代&am…...

编程新知 2026/4/5 19:41:20

3个技巧让你轻松掌控暗黑2角色命运：d2s-editor的存档修改艺术

3个技巧让你轻松掌控暗黑2角色命运&#xff1a;d2s-editor的存档修改艺术 【免费下载链接】d2s-editor 项目地址: https://gitcode.com/gh_mirrors/d2/d2s-editor 在《暗黑破坏神2》的冒险旅程中&#xff0c;你是否曾因误加属性点而让精心培养的角色沦为废号&#xff1…...

编程新知 2026/4/5 19:06:52

忍者像素绘卷惊艳效果：同一角色在横/竖/方三画幅下的电影感构图适配

忍者像素绘卷惊艳效果&#xff1a;同一角色在横/竖/方三画幅下的电影感构图适配 1. 像素艺术的新境界 忍者像素绘卷是一款基于Z-Image-Turbo深度优化的图像生成工作站&#xff0c;它将传统忍者文化与现代像素艺术完美结合。这款工具最令人惊叹的特点之一&#xff0c;是能够为…...

编程新知 2026/4/5 18:42:34

Radiology子刊（IF=6.3）复旦大学附属金山医院强金伟教授等团队：基于多参数MRI的深度学习和影像组学评估早期宫颈癌淋巴结转移

01文献学习今天分享的文献是由复旦大学附属金山医院强金伟教授等团队于2026年4月3日在《Radiology: Imaging Cancer》&#xff08;中科院2区&#xff0c;IF6.3&#xff09;上发表的研究“Multiparametric MRI-based Deep Learning and Radiomics for Evaluating Lymph Node Met…...

编程新知 2026/4/5 17:49:39

《新天龙八部3》江山策服务端架设后，如何用GM工具修改数据？完整配置与安全使用教程

《新天龙八部3》GM工具深度配置与安全操作指南 当你在本地环境成功架设《新天龙八部3》江山策服务端后&#xff0c;GM工具将成为你探索游戏机制、测试功能的有力助手。不同于简单的数值修改&#xff0c;专业开发者更关注工具背后的运行逻辑和安全边界。本文将带你从通信协议解析…...

编程新知 2026/4/5 17:29:27

费城“敬畏部”：AI 与艺术融合的新奇沉浸式体验

【导语&#xff1a;费城全新沉浸式艺术体验项目“敬畏部”&#xff0c;由多位艺术家打造&#xff0c;融合了 AI 技术。它以独特的方式让游客与艺术互动&#xff0c;探讨了个人数据存储等主题&#xff0c;为 AI 在艺术领域的应用提供了新视角。】“敬畏部”&#xff1a;费城的新…...

编程新知 2026/4/5 17:13:17

手把手教你用STM32CubeIDE搞定FLASHDB+FreeRTOS嵌入式数据库（附GC优化技巧）

STM32CubeIDE实战&#xff1a;FLASHDB嵌入式数据库与FreeRTOS深度整合指南 引言 在嵌入式开发领域&#xff0c;数据持久化存储一直是开发者面临的挑战之一。传统EEPROM容量有限&#xff0c;而文件系统又过于臃肿。FLASHDB作为一款轻量级嵌入式数据库&#xff0c;凭借其KV存储和…...

编程新知 2026/4/5 15:11:34

【从零到一：在STM32F103上构建FreeRTOS与micro-ROS的实时机器人节点】

1. 为什么选择STM32F103FreeRTOSmicro-ROS组合 在机器人控制领域&#xff0c;实时性和可靠性是核心诉求。STM32F103RCT6作为经典的Cortex-M3内核MCU&#xff0c;具有丰富的外设资源和成熟的生态支持&#xff0c;特别适合作为轻量级机器人控制器的核心。而FreeRTOS作为市场占有率…...

编程新知 2026/4/5 12:44:52