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

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

news 2025/9/23 5:28:09

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

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日 来简单学一下子来 一、选择题&#xff08;可多选&#xff09; 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘&#xff1a;专注于发现数据中…...

编程新知 2025/9/21 8:16:34

第一篇：Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代&#xff0c;智能代理&#xff08;agents&#xff09;不再是孤立的个体&#xff0c;而是能够像一个数字团队一样协作。然而&#xff0c;当前 AI 生态系统的碎片化阻碍了这一愿景的实现&#xff0c;导致了“AI 巴别塔问题”——不同代理之间…...

编程新知 2025/8/19 20:28:20

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

编程新知 2025/9/16 17:08:01

C# SqlSugar：依赖注入与仓储模式实践

C# SqlSugar&#xff1a;依赖注入与仓储模式实践 在 C# 的应用开发中&#xff0c;数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护&#xff0c;许多开发者会选择成熟的 ORM&#xff08;对象关系映射&#xff09;框架&#xff0c;SqlSugar 就是其中备受…...

编程新知 2025/8/29 10:53:38

工业自动化时代的精准装配革新：迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

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

网络编程（UDP编程）

思维导图 UDP基础编程&#xff08;单播&#xff09; 1.流程图 服务器&#xff1a;短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...

编程新知 2025/9/22 13:28:42

Spring数据访问模块设计

前面我们已经完成了IoC和web模块的设计&#xff0c;聪明的码友立马就知道了&#xff0c;该到数据访问模块了&#xff0c;要不就这俩玩个6啊&#xff0c;查库势在必行&#xff0c;至此&#xff0c;它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据&#xff08;数据库、No…...

编程新知 2025/9/22 13:28:14

【HarmonyOS 5 开发速记】如何获取用户信息（头像/昵称/手机号）

1.获取 authorizationCode&#xff1a; 2.利用 authorizationCode 获取 accessToken&#xff1a;文档中心 3.获取手机&#xff1a;文档中心 4.获取昵称头像&#xff1a;文档中心 首先创建 request 若要获取手机号&#xff0c;scope必填 phone&#xff0c;permissions 必填 …...

编程新知 2025/9/17 2:39:21

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容

目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法&#xff0c;当前调用一个医疗行业的AI识别算法后返回…...

编程新知 2025/9/22 14:51:03

三分算法与DeepSeek辅助证明是单峰函数

前置 单峰函数有唯一的最大值&#xff0c;最大值左侧的数值严格单调递增&#xff0c;最大值右侧的数值严格单调递减。 单谷函数有唯一的最小值&#xff0c;最小值左侧的数值严格单调递减&#xff0c;最小值右侧的数值严格单调递增。 三分的本质 三分和二分一样都是通过不断缩…...

编程新知 2025/9/23 2:27:00