CSS盒子模型

网页的元素基本上都是放在盒子上进行的。

盒子模型的组成：

盒子模型的边框（border）：

边框的复合写法：

当子类直接写百分比时：由于子类的宽度边距......会继承父类的数据*该百分比赋值给子类。

---

上下边框分开的形式：

左右边框同理。

---------------------

此处注释的和实际写的一样：原因在于覆盖性，后写的内容会覆盖前面的内容。

表格细线边框：

表格实质也是盒子构成。所以能够使用盒子的方式来实现对表格线等的修饰，

边框会影响盒子的实际大小：

实际在进行使用的时候是不算边框的大小的。

盒子模型的内边距（padding）：

内容默认是在左上角和边框紧邻的

当子类直接写百分比时：由于子类的宽度边距......会继承父类的数据*该百分比赋值给子类。

内边距的复合写法：

4个元素值是按照顺时针的方式进行修饰的。

padding实际上也会影响盒子的大小：

即此时的盒子会变为240px。

padding不会撑开盒子的情况：

这个大小指的是width/height

即当子类没有赋值给width/height时只有padding不会超越父类的大小范围，但当子类定义了，就会按照子类定义的加上边距。

盒子模型外边距（margin）：

外边距的典型应用：

注意中：盒子中 对其行内元素/行内块元素添加无效。

即行内元素/行内块元素和 块元素居中的方法是不同的。

第三种表示上下为0，左右为auto(自动 )

---

外边距合并的问题：

---

清除盒子内外边距（一般为CSS第一句代码）：

绝大部分标签本身就带有一定的边距.（本身就属于一个范围“框架”中）

行内元素内外边距探究：为何span设置上下margin和padding不起效

• Deshun 发布于 2019-04-13

• 百度已收录

一直以为行内元素设置内外边距会不起效，之前也没有具体的去实验，只是在需要设置 margin 或者 padding 的时候给元素设置一个 display: inline-block; 就得了。
 

今天正好有时间，就来实验了一把。原来 span 标签默认的不是只能设置左右边距，还有更有意思的现象。

我给 span 标签设置了 10px 的内边距和外边距，并设置了背景色，外面嵌套一个 p 标签。

从 span 的背景色可以看出，padding 是设置上了。只不过无法把 p 标签撑开罢了。 margin 则只能设置左右边距，上下边距不起效。

但是 padding-top 去哪了？怎么看不到呢？

我又给外部容器设置了一个外边距，这样上内边距就显示出来了。

原来 span 等行内元素是可以设置内边距 padding 的，只不过元素本身无法把父元素撑开，看上去就是设置的 padding 上下边距不起效了，而 margin 就只能设置 span 的左右边距。

所以，如果要给 span 设置边距，一般的方法就是给它设置一个 display: inline-block; ，把它变成行内块级元素就可以了。

---

盒子标签的使用大概：

当需要的盒子大小要和浏览器的界面一样宽的时候，不设置宽度即可实现。

---

盒子边框类型显示:

单个数据是四个角统一变化。

两个数据是对角线型变化。

四个数据是按照顺时针的方式进行赋值。

也可以实现单个角的设置。

圆角边框 ：

实现原理是用多少像素/百分比的圆与每个角进行重叠。

将盒子变为圆形的方式：

前提是这个盒子是正方形。

将盒子设置为圆边矩形：

单个盒子设置四个不同角圆：

默认是按照顺时针的方式进行赋值的。

盒子阴影：

模糊距离：即实现影子的模糊程度。（距离实体垂直高度距离）

但颜色clolr一般会采用rgba（）：三色素调色＋透明度

内部阴影和外部阴影：默认是外部阴影，可以设置内部阴影。但如果写入了外部阴影会导致阴影不能显示（外部阴影不允许直接输入）。

实现盒子本身不显示阴影，当光标在盒子上时出现阴影：

将阴影效果放在光标经过代码块中即可。

文字阴影：

color还是可以使用rgba（）：三色素调色＋透明度