CSS 学习笔记（八）

接下来我们继续关于盒子模型吧，在网页中有很好的展示。

盒子模型

盒子模型组成

怎么来理解盒子模型呢？我们可以把 HTML 的元素看成是一个矩形的盒子，也就是一个盛装内容的容器，CSS 盒子模型本质上就是一个盒子，封装周围的 HTML 元素，它包括:内边距、外边距、边框和实际内容。

边框

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

基本语法如下:

border:border-width｜border-style｜border-color

例如:

border:1px solid red;

这样我们就设置了一个边框粗为 1px，实线，为红色的边框。 元素值没有固定顺序，我们可以随意调换顺序。

• border-width:定义边框粗细，单位是 px。

• border-style:定义边框样式。常用的参数有:solid(实线)、dashed(虚线)、dotted(点线)

• border-color :定义边框颜色

border-collapse属性可以控制浏览器绘制表格边框的方式。它能控制相邻单元格的边框。 基本语法如下:

border-collapse:collapse;

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

• 测量盒子大小的时候，不量边框。

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

内边距

padding属性用于设置内边距，即边框与内容之间的距离。 相关属性有:

• padding-left:左内边距

• padding-right:右内边距

• padding-top:上内边距

• padding-bottom:下内边距

padding 属性可以有一到四个值。

我们在四个例子中来感受一下:

padding:5px;1个值，代表上下左右都有5像素内边距
padding：5px 10px；2个值，代表上下边距是5像素，左右内边距是10像素
padding：5px 10px 15px;3个值，代表上内边距是5像素，左右边距10像素，下内边距15像素
padding：5px 10px 20px 30px;4个值，代表上内边距是5像素，右是10px，下是20px,左是30px

当我们给盒子指定 padding 值之后，内容和边框有了距离，添加了内边距，padding 影响了盒子实际大小，如果说我们想要保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可。

如果盒子本身没有指定 width/height 属性，则 padding 不会撑开盒子大小。