有三个影响HTML元素布局的重要属性:padding(内边距)、margin(外边距)、border(边框)。
元素的 padding 控制元素内容 content和元素边框 border 之间的距离
在这儿,我们可以看到绿方块和红方块都位于黄方块之中,但是红方块比绿方块具有更大的 padding。
当你加大绿方块的 padding, 它将扩大元素内容和元素边框的距离。
<style>
.injected-text {
margin-bottom: -25px
text-align: center
}
.box {
border-style: solid
border-color: black
border-width: 5px
text-align: center
}
.yellow-box {
background-color: yellow
padding: 10px
}
.red-box {
background-color: red
padding: 20px
}
.green-box {
background-color: green
padding: 10px
}
</style>
<h5 class="injected-text">margin</h5>
<div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box green-box">padding</h5>
</div>
2.元素的外边距 margin 控制元素边框 border 和元素实际所占空间的距离
3.如果你将一个元素的 margin 设置为负值,元素将会变大。
4.有时你想要自定义元素,使它的每一个边具有不同的 padding。
CSS 允许你使用 padding-top、padding-right、padding-bottom 和 padding-left来控制元素上右下左四个方向的 padding
<style>
.green-box {
background-color: green
padding-top: 40px
padding-right: 20px
padding-bottom: 20px
padding-left: 40px
}
</style>
<div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box green-box">padding</h5>
</div>
5.有时你想要自定义元素,使它的每一个边具有不同的 margin。
CSS 允许你使用 margin-top、margin-right、margin-bottom 和 margin-left 来控制元素上右下左四个方向的 margin。
<style>
.green-box {
background-color: green
margin-top: 40px
margin-left: 40px
margin-right: 20px
margin-bottom: 20px
}
</style>
<div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box green-box">padding</h5>
</div>
6.除了分别指定元素的 padding-top、padding-right、padding-bottom 和 padding-left 属性外,你还可以集中起来指定它们,举例如下:
padding: 10px 20px 10px 20px
这四个值以顺时针方式排列:顶部、右侧、底部、左侧,简称:上右下左
<style>
.red-box {
background-color: red
padding: 20px 40px 20px 40px
}
</style>
7.除了分别指定元素的 margin-top、margin-right、margin-bottom 和 margin-left 属性外,你还可以集中起来指定它们,举例如下:
margin: 10px 20px 10px 20px
这四个值以顺时针方式排列:顶部、右侧、底部、左侧,简称:上右下左
<style>
.red-box {
background-color: red
margin: 20px 40px 20px 40px
}
</style>
要给盒子设置下边框15像素,双实线黄色的边框,可以使用HTML的style属性进行设置,具体方法如下:<style>.box { border-bottom: 15px solid yellow border-bottom-style: double
}</style>
或者也可以直接在HTML元素的style属性中进行设置,如:
<div style="border-bottom: 15px solid yellowborder-bottom-style: double">这是一个盒子</div>
在这种情况下,border-bottom属性用于设置下边框的宽度和颜色,border-bottom-style属性用于设置下边框的样式,double值表示双实线。
注意:这里的颜色值可以是颜色名称(如yellow),也可以是十六进制颜色值(如#FFFF00)或RGB颜色值(如rgb(255, 255, 0))。
首先,您需要创建一个div,对div进行添加一个class。我们利用CSS通过class来设置div的边框。创建一个用于设置边框的CSS文件,对于您实际开发中,将边框添加到您的CSS文件中即可。在CSS文件中设置DIV的边框,首先我们可以先给div一个宽度与高度。得到了宽度与高度后,如果我们没有边框,是看不到样式的。如果您的div中有内容,那么只是显示那些内容而已。接下来,添加一个border边框我们将边框设置为1px.如果只是设置了宽度而没有设置颜色与具体的显示样式的话,边框并不会显示,您现在可以刷新一下您的页面看一下,添加了border:1px后是否显示,答案是肯定不显示的,因为我们参数没有写完整。参加第二个参数颜色值,具体的颜色您可以百度搜索具体的样式值的代码,您可以使用基本色直接使用单词拼写也是可以的。最后一个参数是显示样式,您可以选择不同的样式来进行显示,我们这里使用的是实线的方式来实现。如果您使用的是一些专门用来做前端开发的软件,您输入后,会有一些提示,您如果选择不同样式来试一试看。添加了上述的三个属性后,您的div边框即可显示出来了。您可以根据您的需求,对边框做其他 *** 作。欢迎分享,转载请注明来源:内存溢出
评论列表(0条)