盒子模型（一）：初识盒模型 、 边框 [第四天]

css盒模型

所有HTML元素可以看作盒子，在CSS中，" box model "这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距(margin)，边框(border)，填充(padding)、实际内容(content)。

盒模型允许我们在 其它元素和周围元素 边框之间的空间 放置元素。

下面的图片说明了盒子模型(Box Model)：

不同部分的说明：

• Margin(外边距) —— 清除边框外的区域，外边距是透明的
• Border(边框) —— 围绕在内边距和内容外的边框
• Padding(内边距/填充) —— 清除内容周围的区域，内边距是透明的
• Content(内容) —— 盒子的内容，显示文本和图像

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

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

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

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

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

css边框

CSS边框属性允许你指定一个元素边框的样式和颜色。

border-style

border-style属性设置一个元素的四个边框的样式，此属性可以有一到四个值。

实例：

border-style:dotted solid double dashed;

• 上边框是点状
• 右边框是实线
• 下边框是双线
• 左边框是虚线

border-style:dotted solid double;

• 上边框是点状
• 右边框和左边框是实线
• 下边框是双线

border-style:dotted solid;

• 上边框和下边框是点状
• 右边框和左边框是实线

border-style:dotted;

• 所有4个边框都是点状

既然border有四边，那么其自然就可以分开设置，分别为：

• border-bottom-style
• border-left-style
• border-right-style
• border-top-style

注意：

其它可以设置4个值的（eg：border、border-color、margin…），都是该规律，后面将不再重复！

值对应的效果：(这里使用浅色更容易看出后面几个的区别，而且得把边框调宽)

还有关于border的一点干货，见：

重学前端 概括元素和属性 / 大小写不敏感 / 详解标题标签 [em和px、源css（font-weight）] / 详解分割线hr标签 / 初见border / 详解auto（第二天）

border-width

border-width属性设置一个元素的四个边框的宽度。

注意：

经菜鸟测试（goole、Firefox）：thin=1px、thick=5px、medium=3px

注意：

CSS 没有定义 3 个关键字的具体宽度，所以一个用户可能把 thick 、medium 和 thin 分别设置为等于 5px、3px 和 2px，而另一个用户则分别设置为 3px、2px 和 1px。
(菜鸟不清楚其它浏览器是不是这样，望有其它浏览器的读者试试，并留言，菜鸟会积极收录！！！)

默认为什么是3px？
详情见：
重学前端 概括元素和属性 / 大小写不敏感 / 详解标题标签 [em和px、源css（font-weight）] / 详解分割线hr标签 / 初见border / 详解auto（第二天）

border-color

border-color属性设置一个元素的四个边框颜色。

注意：

请始终把 border-style 属性声明到 border-color 属性之前，元素必须在您改变其颜色之前获得边框。


一般border-style、border-width、border-color 前后关系错误，也没什么问题，但还是按照标准比较好，最先写border-style，后面两个随意！

color取值见：
详解文本格式（Text）[第二天]

注意：

这里transparent，并不是默认边框颜色为transparent，默认边框颜色是黑色！（这里写一个默认，菜鸟也不明白为什么）


transparent是全透明黑色(black)的速记法，即一个类似rgba(0,0,0,0)这样的值。

border

缩写边框属性设置在一个声明中所有的边框属性。可以设置的属性分别（按顺序）：border-width、border-style 和 border-color。

注意：

上述属性值缺少一个没有关系，但千万不要缺boeder-style，不然就默认为none(没有边框)，设置其他的也没有意义！