1.边框的组成及用法

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

语法：

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框样式
border-color	边框颜色

1.1 边框语法练习

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>盒子模型之边框</title>
    <style>
      /* 边框组成：边框宽度-border-width、样式-border-style、颜色-border-color */
      div {
        /* 设置div盒子的大小（高度和宽度） 单位px*/
        height: 300px;
        width: 300px;
        /* 边框宽度（粗细） 单位px*/
        border-width: 7px;
        /* 边框样式 solid实线边框  dashed虚线边框  dotted点线边框等*/
        /* border-style: solid; */
        /* border-style: dashed; */
        border-style: dotted;
        /* 边框颜色 */
        border-color: pink;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

复合写法：

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

边框简写：

边框可以分开写：

1.2 复合写法练习

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>边框复合型写法</title>
    <style>
      div {
        height: 200px;
        width: 200px;
        /* border-width: 5px;
        border-style: solid;
        border-color: pink; */
        /* 边框的复合型写法  border：border-width border-style border-color  没有顺序 */
        /* border: 5px solid pink; */
        /* 设置上边框 */
        border-top: 3px solid #000;
        /* 设置下边框 */
        border-bottom: 3px dashed red;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

1.3 课堂练习

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>课堂练习</title>
    <style>
      /* 请给一个200*200的盒子  设置上边框为红色 其余边框为蓝色 */
      div {
        height: 200px;
        width: 200px;

        /* 分开写 */
        /* border-top: 1px solid red; */
        /* border-bottom: 1px solid blue;
        border-right: 1px solid blue;
        border-left: 1px solid blue; */

        /* 复合写 */
        border: 1px solid blue;
        /* 使用到了css三大属性中的层叠性  就近原则 */
        border-top: 1px solid red;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

2.表格的细线边框

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

语法：

collapse单词是合并的意思
border-collapse：collapse；表示相邻边框合并在一起

2.1练习

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>案例：小说排行</title>
    <style>
      /* table表格标签，th表头，tr表格中的行，td单元格  */
      td {
        /* 边框复合写法 */
        border: 1px solid pink;
        /* 细线边框border-collapse，控制相邻单元格的边框  
        语法：border-collapse：collapse；表示相邻边框合并在一起 */
        border-collapse: collapse;
        font-size: 12px;
        /* 文本属性的对齐方式：设置或检索对象中文本的对齐方式 */
        text-align: center;
      }

      table {
        height: 300px;
        width: 500px;
      }

      th {
        height: 40px;
      }
    </style>
  </head>
  <body>
    <table align="center" cellspacing="0">
      <tr>
        <th>排名</th>
        <th>关键词</th>
        <th>趋势</th>
        <th>今日搜索</th>
        <th>最近七日</th>
        <th>相关链接</th>
      </tr>

      <tr>
        <td>1</td>
        <td>鬼吹灯</td>
        <td><img src="D:\桌面\前端\html-第二天\案例\下降.png" /></td>
        <td>345</td>
        <td>123</td>
        <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
      </tr>

      <tr>
        <td>2</td>
        <td>盗墓笔记</td>
        <td><img src="D:\桌面\前端\html-第二天\案例\下降.png" /></td>
        <td>124</td>
        <td>675432</td>
        <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
      </tr>

      <tr>
        <td>3</td>
        <td>西游记</td>
        <td><img src="D:\桌面\前端\html-第二天\案例\上升.png" /></td>
        <td>212</td>
        <td>7654</td>
        <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
      </tr>

      <tr>
        <td>4</td>
        <td>东游记</td>
        <td><img src="D:\桌面\前端\html-第二天\案例\上升.png" /></td>
        <td>23</td>
        <td>74645</td>
        <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
      </tr>

      <tr>
        <td>5</td>
        <td>甄嬛传</td>
        <td><img src="D:\桌面\前端\html-第二天\案例\下降.png" /></td>
        <td>567654</td>
        <td>1321321</td>
        <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
      </tr>

      <tr>
        <td>6</td>
        <td>水浒传</td>
        <td><img src="D:\桌面\前端\html-第二天\案例\上升.png" /></td>
        <td>222345</td>
        <td>122123</td>
        <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
      </tr>

      <tr>
        <td>7</td>
        <td>三国演义</td>
        <td><img src="D:\桌面\前端\html-第二天\案例\上升.png" /></td>
        <td>345</td>
        <td>1723</td>
        <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
      </tr>
    </table>
  </body>
</html>

3.边框会影响盒子实际大小

边框会额外增加盒子的实际大小，因此我们有两种方案解决：

1.测量盒子大小的时候，不量边框

2.如果测量的时候包含了边框，则需要width/height减去边框宽度

3.1练习

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>边框会影响盒子实际大小</title>
    <style>
      /* 做一个200*200的盒子，但是这个盒子有10像素的红色边框 */
      /* 设置div的高度和宽度为200*200 边框10像素  此时盒子的实际高度和宽度为220*220  与原需求盒子的大小不符 */
      /* div {
        height: 200px;  
        width: 200px;
        background-color: pink; 
        border: 10px solid red;  
      } */

      /* 要与原需求盒子大小相同，则div盒子的大小需要减去边框像素的大小  设置的成功后的盒子高度宽度才是200*200 */
      div {
        height: 180px;
        width: 180px;
        border: 10px solid red;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>