css盒子模型实验报告总结_CSS盒子模型知识总结

前言

2020年春招开始，作为一个前端菜鸟，我也想在春招找到一份比较好的实习，为我的秋招助力

这篇文章是我在面试之前css盒子模型的知识进行的总结

正片

一、基本概念

CSS将页面中所有的元素都设置成一个矩形盒子，每个盒子都由以下几个部分组成：

内容区(content)：元素中所有子元素和文本内容都在内容区中排列，width和height均为内容区的属性

内边距(padding):内容区和边框之间的距离，会影响盒子的大小

给盒子设置背景颜色的时候，颜色会延伸到内边距上，但内容只会显示在content中

边框(border)：盒子的边缘，边框里边属于盒子内部，边框外边属于盒子外部，会影响盒子的大小

要设置边框，至少要设置三个样式：

1.border-width：有默认值，一般为3px(具体浏览器而定)，可分开指定不同方向的宽度

2.border-color：默认为color的值

3.border-style：默认为none，可取值：dotted(点状虚线)、dashed(线装虚线)、double(双线)、solid(实线)

可分开指定不同方向边框的样式

四个值指定，分别为 上 右 下 左

三个值指定，分别为 上 左右 下

两个值指定，分别为 上下 左右

可同时指定三个样式

例如：border: 1px black solid(三个样式的顺序不分先后)

外边距(margin)：不会影响盒子可见框大小，但会影响盒子的位置和盒子实际占用的空间

元素在页面中是按照自左向右的方向排列的，默认情况下，设置左或上margin会移动自身，设置下或右margin会移动其他元素

也可以设置负值，那么盒子就会往相反方向走

盒子可见框大小为content + padding + border

二、标准盒子模型和IE盒子模型

1.标准