【响应式Web前端设计】HTML DOM padding 属性

定义和用法
padding 属性设置元素的内边距。

padding 属性定义元素边框与元素内容之间的空间。

该属性可采取 4 个值:

如果规定一个值,比如 div {padding: 50px} - 所有四个边的 padding 都是 50 px。
如果规定两个值,比如 div {padding: 50px 10px} - 上下内边距是 50 px,左右内边距是 10 px。
如果规定三个值,比如 div {padding: 50px 10px 20px} - 上内边距是 50 px,左右内边距是 10 px,下内边距是 20 px。
如果规定四个值,比如 div {padding: 50px 10px 20px 30px} - 上内边距是 50 px,右内边距是 10 px,下内边距是 20 px,左内边距是 30 px。
语法:
Object.style.padding=padding
Possible Values
值 描述
padding
设置内边距。

值可以是:

百分比(基于父对象总高度或宽度的百分比)
长度值(定义一个固定的边距)
auto(浏览器设定的值)。
实例
本例改变元素的内边距:

<html>
<head>
<style type="text/css">
p
{ 
border: thin dotted #FF0000;
}
</style>
<script type="text/javascript">
function changePadding()
{
document.getElementById("p1").style.padding="2cm";
}
</script>
</head>
<body>

<input type="button" οnclick="changePadding()"
value="Change padding" />

<p id="p1">This is a paragraph</p>

</body>
</html>
李响Superb CSDN认证博客专家 机器学习 TensorFlow 图像处理
成为一名优秀的算法工程师⬆️ ,
目前还在读软件工程,
AI攻防、算法和深度学习方向,
微博同名❤️ :李响Superb,
(记得关注,有问题微博私信!)
我们一起努力呀!
已标记关键词 清除标记
相关推荐
目录 第1章 HTML 5简介 1 1.1 HTML历史与HTML 5 2 1.2 HTML 5的优势 6 1.3 HTML 5的基本结构和语法变化 8 1.4 本章小结 12 第2章 HTML 5的常用元素与属性 14 2.1 HTML 5保留的常用元素 15 2.2 HTML 5增强的iframe元素 34 2.3 HTML 5保留的通用属性 40 2.4 HTML 5新增的通用属性 44 2.5 HTML 5新增的结构元素 48 2.6 HTML 5新增的语义元素 55 2.7 HTML 5头部和元信息 59 2.8 HTML 5新增的拖放API 63 2.9 本章小结 71 第3章 HTML 5表单相关的元素和属性 72 3.1 HTML原有的表单及表单控件 73 3.2 HTML 5新增的表单属性 83 3.3 HTML 5新增的表单元素 90 3.4 HTML 5新增的客户端校验 96 3.5 本章小结 100 第4章 HTML 5的绘图支持 101 4.1 使用canvas元素 102 4.2 绘图 103 4.3 坐标变换 118 4.4 控制叠加风格 123 4.5 控制填充风格 124 4.6 位图处理 128 4.7 输出位图 132 4.8 动画制作 133 4.9 本章小结 136 第5章 HTML 5的多媒体支持 137 5.1 使用audio和video元素 138 5.2 使用JavaScript脚本控制媒体播放 141 5.3 事件监听 144 5.4 track元素 146 5.5 本章小结 149 第6章 级联样单与CSS选择器 150 6.1 样单概述 151 6.2 CSS样单的基本使用 152 6.3 CSS选择器 158 6.4 伪元素选择器 167 6.5 CSS 3新增的伪类选择器 176 6.6 在脚本中修改显示样 195 6.7 本章小结 197 第7章 字体与文本相关属性 198 7.1 字体相关属性 199 7.2 CSS 3支持的颜色表示方法 205 7.3 文本相关属性 206 7.4 CSS 3新增的服务器字体 212 7.5 本章小结 215 第8章 背景、边框和边距相关属性 216 8.1 盒模型简介 217 8.2 背景相关属性 217 8.3 使用渐变背景 226 8.4 边框相关属性 239 8.5 使用opacity控制透明度 246 8.6 padding和margin相关属性 247 8.7 本章小结 249 第9章 大小、定位、轮廓相关属性 250 9.1 width、height相关属性 251 9.2 定位相关属性 255 9.3 轮廓相关属性 257 9.4 用户界面和滤镜属性 258 9.5 本章小结 263 第10章 盒模型与布局相关属性 264 10.1 盒模型和display属性 265 10.2 对盒添加阴影 275 10.3 布局相关属性 278 10.4 CSS 3新增的多栏布局 285 10.5 使用弹性盒布局 289 10.6 本章小结 306 第11章 表格、列表相关属性及media query 307 11.1 表格相关属性 308 11.2 列表相关属性 313 11.3 控制光标的属性 316 11.4 media query和响应布局 317 11.5 本章小结 323 第12章 变形与动画相关属性 324 12.1 CSS 3提供的变形支持 325 12.2 CSS 3新增的3D变换 337 12.3 CSS 3提供的Transition动画 341 12.4 CSS 3提供的Animation动画 345 12.5 本章小结 349 第13章 JavaScript语法详解 350 13.1 JavaScript简介 351 13.2 数据类型和变量 356 13.3 基本数据类型 364 13.4 复合类型 376 13.5 运算符 381 13.6 语句 391 13.7 流程控制 395 13.8 函数 403 13.9 函数的参数处理 425 13.10 面向对象 429 13.11 创建对象 437 13.12 本章小结 443 第14章 DOM编程详解 444 14.1 DOM模型概述 445 14.2 DOM模型和HTML文档 446 14.3 访问HTML元素 448 14.4 修改HTML元素 456 14.5 增加HTML元素 458 14.6 删除HTML元素 463 14.7 传统的DHTML模型 467 14.8 使用window对象 469 14.9 navigator和地理定位 479 14.10 HTML 5增强的History API 485 14.11 使用document对象 490 14.12 HTML 5新增的浏览器分析 493 14.13 本章小结 496 第15章 事件处理机制 497 15.1 事件模型的基本概念 498 15.2 绑定事件处理函数 499 15.3 事件处理函数的执行环境 505 15.4 事件类型 521 15.5 本章小结 534 第16章 本地存储与离线应用 535 16.1 Web Storage 536 16.2 Indexed数据库API 545 16.3 离线应用 564 16.4 本章小结 571 第17章 文件支持与二进制数据 572 17.1 HTML 5增强的文件上传域 573 17.2 ArrayBuffer与TypedArray 578 17.3 Blob类 583 17.4 本章小结 587 第18章 Web Worker多线程API 588 18.1 使用Worker创建多线程 589 18.2 与Worker线程进行数据交换 591 18.3 Worker线程嵌套 594 18.4 使用SharedWorker创建共享线程 597 18.5 Promise 603 18.6 本章小结 611 第19章 客户端通信 612 19.1 跨文档消息传递 613 19.2 使用WebSocket与服务器通信 621 19.3 使用Server-Sent Events API 630 19.4 使用Beacon 635 19.5 本章小结 636 第20章 HTML 5的疯狂俄罗斯方块 637 20.1 俄罗斯方块简介 638 20.2 开发游戏界面 639 20.3 俄罗斯方块的数据模型 640 20.4 实现游戏逻辑 644 20.5 本章小结 654
<p> <b><span style="background-color:#FFE500;">【超实用课程内容】</span></b> </p> <p> <br /> </p> <p> <br /> </p> <p> 本课程内容包含讲解<span>解读Nginx的基础知识,</span><span>解读Nginx的核心知识、带领学员进行</span>高并发环境下的Nginx性能优化实战,让学生能够快速将所学融合到企业应用中。 </p> <p> <br /> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <b><br /> </b> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <b><span style="background-color:#FFE500;">【课程如何观看?】</span></b> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> PC端:<a href="https://edu.csdn.net/course/detail/26277"><span id="__kindeditor_bookmark_start_21__"></span></a><a href="https://edu.csdn.net/course/detail/27216">https://edu.csdn.net/course/detail/27216</a> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> 移动端:CSDN 学院APP(注意不是CSDN APP哦) </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> 本课程为录播课,课程永久有效观看时长,大家可以抓紧时间学习后一起讨论哦~ </p> <p style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <br /> </p> <p class="ql-long-24357476" style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <strong><span style="background-color:#FFE500;">【学员专享增值服务】</span></strong> </p> <p class="ql-long-24357476" style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <b>源码开放</b> </p> <p class="ql-long-24357476" style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> 课件、课程案例代码完全开放给你,你可以根据所学知识,自行修改、优化 </p> <p class="ql-long-24357476" style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> 下载方:电脑登录<a href="https://edu.csdn.net/course/detail/26277"></a><a href="https://edu.csdn.net/course/detail/27216">https://edu.csdn.net/course/detail/27216</a>,播放页面右侧点击课件进行资料打包下载 </p> <p> <br /> </p> <p> <br /> </p> <p> <br /> </p>
©️2020 CSDN 皮肤主题: 猿与汪的秘密 设计师:白松林 返回首页
实付 9.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值