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

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

news 2025/11/16 6:09:05

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

基于ASP.NET+ SQL Server实现（Web）医院信息管理系统

医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上&#xff0c;开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识&#xff0c;在 vs 2017 平台上&#xff0c;进行 ASP.NET 应用程序和简易网站的开发&#xff1b;初步熟悉开发一…...

编程新知 2025/11/13 20:39:20

线程与协程

1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指&#xff1a;像函数调用/返回一样轻量地完成任务切换。 举例说明&#xff1a; 当你在程序中写一个函数调用&#xff1a; funcA() 然后 funcA 执行完后返回&…...

编程新知 2025/10/31 17:25:40

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增&#xff1a;通道注意力模块&#xff08;SE模块&#xff09; class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

编程新知 2025/11/14 12:23:37

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...

编程新知 2025/9/11 13:56:27

Cloudflare 从 Nginx 到 Pingora：性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

编程新知 2025/11/15 20:13:16

如何理解 IP 数据报中的 TTL？

目录 前言理解 前言 面试灵魂一问&#xff1a;说说对 IP 数据报中 TTL 的理解&#xff1f;我们都知道&#xff0c;IP 数据报由首部和数据两部分组成&#xff0c;首部又分为两部分&#xff1a;固定部分和可变部分&#xff0c;共占 20 字节&#xff0c;而即将讨论的 TTL 就位于首…...

编程新知 2025/11/12 5:13:03

HarmonyOS运动开发：如何用mpchart绘制运动配速图表

##鸿蒙核心技术##运动开发##Sensor Service Kit&#xff08;传感器服务&#xff09;# 前言 在运动类应用中&#xff0c;运动数据的可视化是提升用户体验的重要环节。通过直观的图表展示运动过程中的关键数据&#xff0c;如配速、距离、卡路里消耗等&#xff0c;用户可以更清晰…...

编程新知 2025/11/12 11:25:53

AGain DB和倍数增益的关系

我在设置一款索尼CMOS芯片时&#xff0c;Again增益0db变化为6DB&#xff0c;画面的变化只有2倍DN的增益&#xff0c;比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析&#xff1a; 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...

编程新知 2025/9/30 16:23:57

代码规范和架构【立芯理论一】（2025.06.08）

1、代码规范的目标 代码简洁精炼、美观&#xff0c;可持续性好高效率高复用&#xff0c;可移植性好高内聚&#xff0c;低耦合没有冗余规范性&#xff0c;代码有规可循&#xff0c;可以看出自己当时的思考过程特殊排版&#xff0c;特殊语法&#xff0c;特殊指令&#xff0c;必须…...

编程新知 2025/11/12 20:42:33

STM32---外部32.768K晶振（LSE）无法起振问题

晶振是否起振主要就检查两个1、晶振与MCU是否兼容&#xff1b;2、晶振的负载电容是否匹配 目录 一、判断晶振与MCU是否兼容 二、判断负载电容是否匹配 1. 晶振负载电容&#xff08;CL&#xff09;与匹配电容&#xff08;CL1、CL2&#xff09;的关系 2. 如何选择 CL1 和 CL…...

编程新知 2025/11/12 3:29:45