css盒子模型以及Border边框

• Margin(外边距) - 清除边框外的区域，外边距是透明的。
• Border(边框) - 围绕在内边距和内容外的边框。   通常在边框后面会加入solid 控制边框的颜色
• Padding(内边距) - 清除内容周围的区域，内边距是透明的。
• Content(内容) - 盒子的内容，显示文本和图像。

更加形象的

 最终元素的总宽度计算公式是这样的：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

-------------------------------------------------------------------------------------------------------------------------

边框的样子

p.none {border-style:none;}

p.dotted {border-style:dotted;}

p.dashed {border-style:dashed;}

p.solid {border-style:solid;}

p.double {border-style:double;}

p.groove {border-style:groove;}

p.ridge {border-style:ridge;}

p.inset {border-style:inset;}

p.outset {border-style:outset;}

p.hidden {border-style:hidden;}

<p class="none">无边框。</p>

<p class="dotted">虚线边框。</p>

<p class="dashed">虚线边框。</p>

<p class="solid">实线边框。</p>

<p class="double">双边框。</p>

<p class="groove"> 凹槽边框。</p>

<p class="ridge">垄状边框。</p>

<p class="inset">嵌入边框。</p>

<p class="outset">外凸边框。</p>

<p class="hidden">隐藏边框。</p>

边框宽度

您能够经过 border-width 属性为边框指定宽度。

为边框指定宽度有两种方法：能够指定长度值，好比 2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值） 和 thin。

注意：CSS 没有定义 3 个关键字的具体宽度，因此一个用户可能把 thick 、medium 和 thin 分别设置为等于 5px、3px 和 2px，而另外一个用户则分别设置为 3px、2px 和 1px。

边框颜色

border-color属性用于设置边框的颜色。能够设置的颜色：

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

您还能够设置边框的颜色为"transparent"。

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

border-style:solid;

border-color:red;

边框-单独设置各边

border-top-style:dotted; border-right-style:solid; border-bottom-style:dotted; border-left-style:solid;

也能够简写

border-style:dotted solid;、

border-style属性能够有1-4个值：的四个数值按一下步骤进行排列

border-style:dotted solid double dashed;

• 上边框是 dotted
• 右边框是 solid
• 底边框是 double
• 左边框是 dashed

简写的形式

border:5px solid red;

CSS 边框属性

border	简写属性，用于把针对四个边的属性设置在一个声明。
border-style	用于设置元素全部边框的样式，或者单独地为各边设置边框样式。
border-width	简写属性，用于为元素的全部边框设置宽度，或者单独地为各边边框设置宽度。
border-color	简写属性，设置元素的全部边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom	简写属性，用于把下边框的全部属性设置到一个声明中。
border-bottom-color	设置元素的下边框的颜色。
border-bottom-style	设置元素的下边框的样式。
border-bottom-width	设置元素的下边框的宽度。
border-left	简写属性，用于把左边框的全部属性设置到一个声明中。
border-left-color	设置元素的左边框的颜色。
border-left-style	设置元素的左边框的样式。
border-left-width	设置元素的左边框的宽度。
border-right	简写属性，用于把右边框的全部属性设置到一个声明中。
border-right-color	设置元素的右边框的颜色。
border-right-style	设置元素的右边框的样式。
border-right-width	设置元素的右边框的宽度。
border-top	简写属性，用于把上边框的全部属性设置到一个声明中。
border-top-color	设置元素的上边框的颜色。
border-top-style	设置元素的上边框的样式。
border-top-width	设置元素的上边框的宽度