html样式（边框）

1.所有的 HTML 元素本质上是小的矩形块，代表着某一小块区域。

有三个影响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>

html中如果设置table的border为1px，实际会产生双线，十分不美观，那么在HTML中如何正确设置表格table边框border呢？

第一种方法：

1、将table的属性设置为：BORDER=0 、cellspacing=1 ；

2、设置table的背景色为即你要设置的table的边框颜色；

3、设置所有td背景色为#ffffff白色；

第二种方法：

1、设置BORDER=0 ；

2、再通过CSS，给Table加上1px的border-top,border-left；

3、然后再设置所有的td的border-right,border-bottom；

第三种方法（推荐）：

1、设置table的CSS为{border-collapse:collapseborder-style: solidborder-width: 1px}

注：border-collapse:collapse

separate默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。

collapse如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。

inherit 规定应该从父元素继承 border-collapse 属性的值。

2、再设置td的CSS为{border-style: solidborder-width: 1px}

转自： https://www.cnblogs.com/qq2806933146xiaobai/p/12407749.html

要给盒子设置下边框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)）。

---