CSS盒子边框
CSS中其实就三个大模块：盒子模型、浮动、定位。
其中所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个装内容的容器，每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）构成。
看透网页的本质：把网页元素比如文字或者图片，放入盒子里面，然后利用CSS摆放盒子的过程，就叫做网页的布局。
其实CSS确实没有太多的逻辑可言，就好比下图中的例子，是不是就类似我们小时候玩的积木，可以自由随意的进行摆放，实现我们想要的效果。
盒子模型（Box Model）分为以下三个部分：
盒子边框（border）内边距（padding）外边距（margin）
这一节我们主要介绍盒子边框（border）。边框就好比外面的一层皮。
具体语法：
Border : border-width / border-style / border-color
1、border-width：边框的粗细（单位px）
2、border-color：边框的颜色
3、border-style：边框的样式（常用的如下）
none：无边框（默认）hidden：隐藏边框dotted：点线边框dashed：虚线边框solid：实线边框（重点）
【实例】
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>盒子边框介绍</title><style>div {width: 200px;height: 200px;border-width: 2px;border-color: deeppink;border-style: solid;/*border-style: dashed;*//*border-style: dotted;*//*border: 2px solid deeppink; /*边框连写格式*/*/}</style></head><body><div>钓鱼岛是中国的！</div></body></html>
当然一条一条属性分开来写略显麻烦，这里也提供了连写的方式。
边框连写语法：
border: 2px solid deeppink;
其实盒子的边框四条线可以拆分开来显示，分为上、下、左、右：
上边框：border-top下边框：border-bottom左边框：border-left右边框：border-right
去掉所有边框写法：border:0;
【实例】
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>盒子边框练习</title><style>input {border: 0; /*去掉所有边框*/border-bottom: 1px dashed deeppink;}button {width: 50px;height: 30px;border: 1px solid blue;}</style></head><body>账户：<input type="text"><br> <br> <br><button>提交</button></body></html>
盒子边框的扩展学习
之前在HTML的学习中我们接触过对表格边框的粗细进行设置，但是在CSS这里只需要一句话就可以搞定了。
我们给table和td属性加上这么一句是不是就可以了“border: 1px solid red;”，话糙理不糙，但是细心的朋友会发现这边框咋比正常的略微粗了一点，这是因为单元格与单元格之间设置了无缝隙，那么两个边框就紧挨在了一起，当然会比一般的边框看上去粗一点，这个时候就
用到下面这种写法：
Border-collapse：collapse；表示边框合并在一起（相邻边框合并）
【实例】
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>表格细线边框</title><style>table {width: 450px;height: 300px;border: 1px solid red; }td {border: 1px solid red;text-align: center; /*内容居中对齐*/}table,td {border-collapse: collapse; /*相邻边框合并*/}</style></head><body><table cellpadding="0" cellspacing="0"><tr><td>京东京东我最强</td><td>京东京东我最强</td><td>京东京东我最强</td></tr><tr><td>淘宝淘宝我最棒</td><td>淘宝淘宝我最棒</td><td>淘宝淘宝我最棒</td></tr><tr><td>最牛还是拼多多</td><td>最牛还是拼多多</td><td>最牛还是拼多多</td></tr></table></body></html>
Tip：Sublime注释快捷键“CTRL+/”
