快捷搜索:  汽车  科技

java设置padding(Java网页编程基础盒子模型之内外边距)

java设置padding(Java网页编程基础盒子模型之内外边距)1.内边距呈现了内容部分的背景颜色通过图片我们可以看出以下两点:执行效果图:效果图:(为了让小伙伴们看的清楚,特意写了一个对比部分)

吼吼吼又来给大家普及知识了!掌声鲜花在哪里!!

java设置padding(Java网页编程基础盒子模型之内外边距)(1)

内边距

上一次我们分享了盒子模型之 border,那么下面要讲的内容是在(蓝色区域)和边框(border)之间存在的绿色部分——内边距 padding

java设置padding(Java网页编程基础盒子模型之内外边距)(2)

内边距就是内容到边框的距离。padding 属性接受长度值或百分比值(这里的百分比值是相对于父级的元素),但不允许使用负值。

源代码示意图:

java设置padding(Java网页编程基础盒子模型之内外边距)(3)

执行效果图:

java设置padding(Java网页编程基础盒子模型之内外边距)(4)

效果图:

java设置padding(Java网页编程基础盒子模型之内外边距)(5)

(为了让小伙伴们看的清楚,特意写了一个对比部分)

java设置padding(Java网页编程基础盒子模型之内外边距)(6)

通过图片我们可以看出以下两点:

1.内边距呈现了内容部分的背景颜色

2.在 CSS 中,width 和 height 指的是内容区域的宽度和高度。增加内边距不会影响内容区域的尺寸,但是会增加整体元素框的大小。

所以如果我们想要在修改内容在标签中的位置的同时又不改变整体元素框的大小时就要对我们的内容部分进行修改了。

下面介绍一下内边距的具体设置:

padding-top:20px / 10%;/*顶部内边距*/
padding-right:20px / 10%;/*右边内边距*/
padding-bottom:20px / 10%; /*下面内边距*/
padding-left:20px / 10%;

/*左边内边距*/

这是单一设置四个边的内边距的方式,我们也可以综合来写。

假设我们希望所有的h1标签的各个边都有10像素的内边距:

h1{padding:10px;}

像这样子写就是代表上下内边距为10px,左右内边距为20px。

h1{padding:10px 20px;}

这样子设置就是代表上内边距为10px,左右内边距为20px,下内边距为30px。

h1{padding:10px 20px 30px;}

当我们设置4个值时,按顺时针方向来数即:上内边距10px,右内边距20px,下内边距30px,左内边距40px。

h1{padding:10px 20px 30px 40px;}

有时候我们的内容模块很小,那么在设置内边距时优先满足上内边距与做内边距。

代码演示如下:

java设置padding(Java网页编程基础盒子模型之内外边距)(7)

效果图:

java设置padding(Java网页编程基础盒子模型之内外边距)(8)

让我们打开浏览器的检查功能看一下我们设置的padding的效果:

java设置padding(Java网页编程基础盒子模型之内外边距)(9)

我们实际设置的padding效果如上图的紫色部分,但是因为我们的p标签内容大少无法满足这么大的区域,只有优先满足上内边距与左内边距了。

而且我们设置div标签的大小时200px*200px,现在我们看见整个div的标签大小为260(200 20 40)*240(200 10 30)。

围绕在元素边框的空白区域是外边距。

设置外边距会在元素外创建额外的“空白”。设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位、百分数值甚至负值。

闲话少说上干货:

h1 {margin : 0.25in;}

这句代码的意思就是:在 h1 元素的各个边上设置了 1/4 英寸宽的空白

当我们提供数值不足四个时候,请看下面的图片。(内边距也是同样的道理)

java设置padding(Java网页编程基础盒子模型之内外边距)(10)

我想这个图应该是很直观了。

当然我们也可以分开来为每个边赋值:

h1 {

margin-top: 10px;

margin-right: 0px;

margin-bottom: 15px;

margin-left: 5px;

}

和:

h1{margin:10px 0px 15px 5px;}的效果是一样的。

光有知识是不够的,还应当去运用。

所以小伙伴们也自己尝试着做些什么东西吧!

java设置padding(Java网页编程基础盒子模型之内外边距)(11)

学习如果不是为了装逼,那么将毫无意义!!!

猜您喜欢: