CSS入门基础知识（十）——CSS盒子模型（一）

CSS标签入门基础知识

CSS盒子模型

网页布局过程

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

网页布局核心：利用CSS摆盒子

盒子模型(Box Model)组成

盒子模型：就是吧html页面的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器

盒子模型本子上是一个盒子，封装周围的html元素，它包括边框、外边距、内边距、和实际内容

边框（border）

边框

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

例子：

边框的复合写法（简写）：

例子：

边框分开写法：

例子：

对不同边框设定颜色可以考虑用到层叠性减少代码的量：

表格的细线边框

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

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

边框会影响盒子实际大小

边框会额外增加盒子的实际大小，因此：
1、测量盒子大小的时候，不量边框
2、测量的时候包含了边框，需要高和宽减去边框的高度

（ps：引自pink老师~，刚刚开始作为自己的学习笔记写，如有不好请见谅，阿里嘎多）

参考学习链接。[^1]

[^1]：https://www.bilibili.com/video/BV14J4114768?p=1