目录

• • 一、CSS盒子模型
  • • 1.1 盒子模型组成
    • 1.2 边框（border）
    • • 1.2.1 语法格式
      • 1.2.2 边框样式 border-style
      • 1.2.3 代码示例
    • 1.3 表格的细线边框
    • • 1.3.1 语法格式、代码示例及结果

一、CSS盒子模型

网页布局过程：
1.先准备好相关的网页元素，网页元素基本都是盒子Box。
2.利用CSS设置盒子样式，然后拜访到相应的位置。
3.往盒子里装内容。
网页布局的核心本质：利用CSS摆盒子

1.1 盒子模型组成

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

1.2 边框（border）

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

1.2.1 语法格式

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

边框简写：

border: 1px solid red; 没有顺序

边框分开写法：

border-top: 1px solid red; /* 只设定上边框，其余同理 */

1.2.2 边框样式 border-style

1.2.3 代码示例

代码如下所示：

结果如下：

课堂小练习：

• 设置一个200*200的盒子，要求上边框为红色，其余边框为蓝色。

结果如下：

1.3 表格的细线边框

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

1.3.1 语法格式、代码示例及结果

border-collapse: collapse; /* 合并边框 */

代码示例：

 排名 
 剧名 
 热度 
 豆瓣评分 
 相关链接 
 1 
 苍兰诀 
 80.41 
 7.9 
 百度百科    图片    贴吧 
 2 
 冰雨火 
 80.01 
 7.3 
 百度百科    图片    贴吧 
 3 
 沉香如屑 沉香重华 
 79.02 
 5.9 
 百度百科    图片    贴吧 
 4 
 罚罪 
 77.05 
 7.0 
 百度百科    图片    贴吧 
 5 
 星汉灿烂 月升沧海 
 72.80 
 7.6 
 百度百科    图片    贴吧 

结果如下：

注意:边框会影响盒子实际大小
解决方案：
1.测量盒子大小的时候，不量边框。
2.如果测量的时候包含了边框，则需要width/height减去边框宽度。