其实，CSS就三个大模块： 盒子模型 、 浮动 、 定位，其余的都是细节。这三部分，无论如何也要学的非常精通。 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。
所有的文档元素（标签）都会生成一个矩形框，我们成为元素框（element box），它描述了一个文档元素再网页布局汇总所占的位置大小。因此，每个盒子除了有自己大小和位置外，还影响着其他盒子的大小和位置。
边框属性—设置边框样式（border-style） 边框样式用于定义页面中边框的风格，常用属性值如下：
none：没有边框即忽略所有边框的宽度（默认值） solid：边框为单实线(最为常用的) dashed：边框为虚线 dotted：边框为点线 double：边框为双实线 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子边框</title> <style> div { width: 200px; height: 200px; border-width: 1px; /* 宽度 */ /* 样式 solid 实线用的最多 ，dashed 虚线 ，dotted 点线*/ border-style: dashed; border-color: gray; /* 颜色 */ } </style> </head> <body> <div>div盒子</div> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> input { border: 0; /* 边框为0 */ } .user { border-width: 1px; border-color: skyblue; border-style: solid; } .nc { /* 上边框 */ border-top-width: 1px; border-top-color: hotpink; border-top-style: solid; /* 下边框 */ border-bottom-width: 1px; border-bottom-color: hotpink; border-bottom-style: solid;bottom } .email { border-top: 1px solid red; border-bottom: 1px solid green; } .tel { border: 1px solid skyblue; /* 综合写法 经常使用 */ } </style> </head> <body> 用户名：<input type="text" class="user" /> <br/> 昵 称：<input type="text" class="nc"/> <br/> 邮 箱：<input type="email" class="email" /> <br/> 手 机：<input type="tel" class="tel" /> <br/> </body> </html> 设置内容样式属性常用属性值上边框border-top-style:样式; border-top-width:宽度;border-top-color:颜色;border-top:宽度 样式 颜色;下边框border-bottom-style:样式;border- bottom-width:宽度;border- bottom-color:颜色;border-bottom:宽度 样式 颜色;左边框border-left-style:样式; border-left-width:宽度;border-left-color:颜色;border-left:宽度 样式 颜色;右边框border-right-style:样式;border-right-width:宽度;border-right-color:颜色;border-right:宽度 样式 颜色;样式综合设置border-style:上边 [右边 下边 左边];none无（默认）、solid单实线、dashed虚线、dotted点线、double双实线宽度综合设置border-width:上边 [右边 下边 左边];像素值颜色综合设置border-color:上边 [右边 下边 左边];颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%)边框综合设置border:四边宽度 四边样式 四边颜色;以前学过的html表格边框很粗，这里只需要CSS一句话就可以美观起来。 让我们真的相信，CSS就是我们的白马王子（白雪公主）。
table{ border-collapse:collapse; } border-collapse:collapse; 表示边框合并在一起。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>细线表格</title> <style> table { width: 700px; height: 300px; border: 1px solid red; border-collapse: collapse; /* 合并相邻边框 */ } td { border: 1px solid red; } </style> </head> <body> <table> <tr> <td>123</td> <td>123</td> <td>123</td> </tr> <tr> <td>123</td> <td>123</td> <td>123</td> </tr> <tr> <td>123</td> <td>123</td> <td>123</td> </tr> </table> </body> </html>