2020年6月6日笔记

CSS

盒子模型

网页布局的本质

• 利用CSS设置好盒子的大小，然后摆放盒子的位置。
• 最后把网页元素比如文字图片等，放入盒子里面。

盒子模型（Box Model）

所谓盒子模型，就是把HTML页面中的布局元素看成是一个矩形的盒子，也就是一个承装内容的容器。

• 盒子模型由元素的内容、边框（border）、内边距（padding）、外边距（margin）组成。
• 盒子里面的文字和图片等元素是 内容区域；
• 盒子的厚度我们称为盒子的边框；
• 盒子内容与边框的距离是内边距（类似单元格的 cellpadding）；
• 盒子与盒子之间的距离是外边距（类似单元格的 cellspacing）；

盒子边框（border）

语法：

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

属性：

• border-width：定义边框粗细，单位是px；
• border-style：边框的样式；
  - none：无边框（默认值）
  - solid：边框为单实线（常用）
  - dashed：边框为虚线
  - dotted：边框为点线
• border-color：边框颜色。
  适用简写，没有顺序。
  可以使用border-top、bottom、left、right来单独设置边框；
  也可以先将边框全部去除border:none;然后再单独设置某条边框（CSS层叠性）；

表格的细线边框

通过表格的cellspacing="0"，将单元格与单元格之间的距离设置为0；
但是两个单元格之间的边框会出现重叠，从而使边框变粗
通过CSS属性：

table{ border-collapse:collapse; }

collapse 单词在这里是合并的意思；
border-collapse:collapse; 表示相邻边框合并在一起。

内边距

padding用于设置内边距。是指边框与内容之间的距离。
可以使用padding-left、right、top、bottom来单独指定4边的内边距。
也可以简写：
padding:后面值的数量的不同，有着不同的含义：
1个值：padding:上下左右内边距；
2个值：padding:上下内边距 左右内边距；
3个值：padding:上内边距 左右内边距 下内边距；
4个值：padding:上内边距 右内边距 下内边距 左内边距（顺时针）；
padding会撑大盒子；