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

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

news 2026/2/8 23:53:54

内边距(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

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现&#xff0c;展示如何创建和管理多个 OkHttpClient 实例&#xff0c;分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

编程新知 2025/12/15 1:34:37

pam_env.so模块配置解析

在PAM&#xff08;Pluggable Authentication Modules&#xff09;配置中&#xff0c; /etc/pam.d/su 文件相关配置含义如下&#xff1a; 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块&#xff0c;负责验证用户身份&am…...

编程新知 2025/10/5 8:09:39

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

编程新知 2025/9/30 16:39:11

LLM基础1_语言模型如何处理文本

基于GitHub项目&#xff1a;https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken&#xff1a;OpenAI开发的专业"分词器" torch&#xff1a;Facebook开发的强力计算引擎&#xff0c;相当于超级计算器 理解词嵌入&#xff1a;给词语画"…...

编程新知 2025/9/25 5:16:24

BCS 2025｜百度副总裁陈洋：智能体在安全领域的应用实践

6月5日&#xff0c;2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席&#xff0c;并作《智能体在安全领域的应用实践》主题演讲&#xff0c;分享了在智能体在安全领域的突破性实践。他指出&#xff0c;百度通过将安全能力…...

编程新知 2026/2/1 11:33:19

mysql已经安装，但是通过rpm -q 没有找mysql相关的已安装包

文章目录 现象&#xff1a;mysql已经安装&#xff0c;但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时&#xff0c;可能是因为以下几个原因&#xff1a;1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...

编程新知 2026/2/4 16:17:25

有限自动机到正规文法转换器v1.0

1 项目简介 这是一个功能强大的有限自动机&#xff08;Finite Automaton, FA&#xff09;到正规文法&#xff08;Regular Grammar&#xff09;转换器&#xff0c;它配备了一个直观且完整的图形用户界面&#xff0c;使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...

编程新知 2026/1/31 13:13:32

Python Einops库：深度学习中的张量操作革命

Einops&#xff08;爱因斯坦操作库&#xff09;就像给张量操作戴上了一副"语义眼镜"——让你用人类能理解的方式告诉计算机如何操作多维数组。这个基于爱因斯坦求和约定的库&#xff0c;用类似自然语言的表达式替代了晦涩的API调用&#xff0c;彻底改变了深度学习工程…...

编程新知 2025/10/16 12:04:52

【LeetCode】3309. 连接二进制表示可形成的最大数值（递归|回溯|位运算）

LeetCode 3309. 连接二进制表示可形成的最大数值&#xff08;中等&#xff09; 题目描述解题思路Java代码 题目描述 题目链接&#xff1a;LeetCode 3309. 连接二进制表示可形成的最大数值&#xff08;中等&#xff09; 给你一个长度为 3 的整数数组 nums。 现以某种顺序 连接…...

编程新知 2025/7/5 18:01:05

Python实现简单音频数据压缩与解压算法

Python实现简单音频数据压缩与解压算法 引言 在音频数据处理中&#xff0c;压缩算法是降低存储成本和传输效率的关键技术。Python作为一门灵活且功能强大的编程语言&#xff0c;提供了丰富的库和工具来实现音频数据的压缩与解压。本文将通过一个简单的音频数据压缩与解压算法…...

编程新知 2025/9/18 22:43:13