css补充（边框 盒子等）

css框模型(Box Model)

——*CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
*

• Margin - 清除边框区域。Margin没有背景颜色，它是完全透明
• Border - 边框周围的填充和内容。边框是受到盒子的背景颜色影响
• Padding - 清除内容周围的区域。会受到框中填充的背景颜色影响
• Content - 盒子的内容，显示文本和图像

当您指定一个CSS元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完全大小的元素，你还必须添加填充，边框和边距。.

由于浏览器给网页body元素默认一个margin外间距值8px，故一般会在style中首先加入：

*{
   
        margin: 0;
        padding: 0;
   }

一. css边框

1. border-style属性用来定义边框的样式

none: 默认无边框

dotted: dotted:定义一个点线框

dashed: 定义一个虚线框

solid: 定义实线边界

double: 定义两个边界。 两个边界的宽度和border-width的值相同

groove: 定义3D沟槽边界。效果取决于边界的颜色值

ridge: 定义3D脊边界。效果取决于边界的颜色值

inset:定义一个3D的嵌入边框。效果取决于边界的颜色值

outset: 定义一个3D突出边框。 效果取决于边界的颜色值

2.border-width 属性为边框指定宽度

为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em；或者使用 3 个关键字之一，它们分别是 thin 、medium（默认值） 和 thick。

3.border-color属性用于设置边框的颜色,可以设置的颜色

name - 指定颜色的名称，如 “red”
RGB - 指定 RGB 值, 如 “rgb(255,0,0)”
Hex - 指定16进制值, 如 “#ff0000”

注意： border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。

4.边框-单独设置各边

p
{
   
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}

也可以设置一个单一属性