CSS盒子模型之边框——border

CSS盒子模型：就是 把HTML页面中的布局元素看作是一个矩形盒子，也就是装内容的容器，CSS盒子模型本质上是一个盒子，封装周围的HTML元素，包括：边框（border）、外边距（maigin）、内边距（padding）、和实际内容（content）。

今天就来简单讲讲盒子模型中的边框——border。

---

 border可以设置元素的边框。边框由三部分组成：边框的宽度（粗细）、边框的样式、边框的颜色。

border : border-width || border-style || border-color

border-width是定义边框的粗细，单位是px。

border-style是边框的样式。（常用的边框样式有：无边框none、实线边框solid、点线边框dotted、虚线边框dashed、双线边框double）

border-color是边框的颜色。

语法简写：border：1px solid red; 

---

通常我们在绘制表格时会想让表格的边框变细一点，怎么办呢？

我们可以用border-collapse属性。

border-collapse属性控制浏览器绘制表格边框的方式，它控制相邻单元格的边框

border-collapse：collapse ;

collapse单词的意思是合并

border-collapse：collapse ;表示相邻边框合并在一起。 

【注意】边框会影响盒子实际大小

解决方案：1、测量盒子大小的时候，不量边框。2、如果测量的时候包含了边框，则需要wideh/height减去边框的宽度。 

---

新手小白，如有错误欢迎指正！！！