2024年前端最新【夯实基础--CSS】=＞ 盒子模型，前端开发基础培训

文末

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；

• 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。

• none：没有边框即忽略所有边框的宽度（默认值）

• solid：边框为单实线(最为常用的)

• dashed：边框为虚线

• dotted：边框为点线

边框综合设置

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

border: 1px solid red; 没有顺序要求

盒子边框写法总结表：

很多情况下，我们不需要指定4个边框，我们是可以单独给4个边框分别指定的。

| 上边框 | 下边框 | 左边框 | 右边框 |

| :-- | :-- | :-- | :-- |

| border-top-style:样式; | border-bottom-style:样式; | border-left-style:样式; | border-right-style:样式; |

| border-top-width:宽度; | border- bottom-width:宽度; | border-left-width:宽度; | border-right-width:宽度; |

| border-top-color:颜色; | border- bottom-color:颜色; | border-left-color:颜色; | border-right-color:颜色; |

| border-top:宽度 样式 颜色; | border-bottom:宽度 样式 颜色; | border-left:宽度 样式 颜色; | border-right:宽度 样式 颜色; |

表格的细线边框：

• 通过表格的cellspacing="0",将单元格与单元格之间的距离设置为0，

• 但是两个单元格之间的边框会出现重叠，从而使边框变粗

• 通过css属性：table{ border-collapse:collapse; }

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

2. 内边距(padding)

padding属性用于设置内边距。是指边框与内容之间的距离。

设置

| 属性 | 作用 |

| :-- | :-- |

| padding-left | 左内边距 |

| padding-right | 右内边距 |

| padding-top | 上内边距 |

| padding-bottom | 下内边距 |

padding简写

| 值的个数 | 表达意思 |

| :-- | :-- |

| 1个值 | padding：上下左右内边距; |

| 2个值 | padding: 上下内边距 左右内边距 ； |

| 3个值 | padding：上内边距 左右内边距 下内边距； |

| 4个值 | padding: 上内边距 右内边距 下内边距 左内边距 ； |

当我们给盒子指定padding值之后， 发生了2件事情：

1. 内容和边框 有了距离，添加了内边距。

2. 盒子会变大

解决措施： 通过给设置了宽高的盒子，减去相应的内边距的值，维持盒子原有的大小。

padding不影响盒子大小情况：👉如果没有给一个盒子指定宽度， 此时，如果给这个盒子指定padding， 则不会撑开盒子。

3. 外边距（margin）

margin属性用于设置外边距。margin就是控制盒子和盒子之间的距离

设置

| 属性 | 作用 |

| :-- | :-- |

| margin-left | 左外边距 |

| margin-right | 右外边距 |

| margin-top | 上外边距 |

| margin-bottom | 下外边距 |

margin值的简写 （复合写法）代表意思 跟 padding 完全相同。

块级盒子水平居中

• 盒子必须指定宽度（width）

• 然后就给左右的外边距都设置为auto

实际工作中常用这种方式进行网页布局，示例代码如下：

.header { width: 960px; margin: 0 auto;}

常见的写法，以下三种都可以👇👇。

• margin-left: auto; margin-right: auto;

• margin: auto;

• margin: 0 auto;

文字居中和盒子居中区别👇👇

1. 盒子内的文字水平居中是 text-align: center; 而且还可以让 行内元素和行内块居中对齐

2. 块级盒子水平居中 左右margin 改为 auto

插入图片和背景图片区别👇👇

1. 插入图片我们用的最多 比如产品展示类 移动位置只能靠盒模型 padding margin

2. 背景图片我们一般用于小图标背景或者超大背景图片、背景图片，移动位置只能通过 background-position

清除元素的默认内外边距👇👇

• 行内元素为了照顾兼容性,尽量只设置左右内外边距，不要设置上下内外边距。

• {

padding:0; /* 清除内边距 */

margin:0; /* 清除外边距 */

}

4.外边距合并

使用margin定义块元素的 「垂直外边距」 时，可能会出现外边距的合并。

(1). 相邻块元素垂直外边距的合并

• 当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom

• 下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和

• 「取两个值中的较大者」 这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。

「解决方案：尽量给只给一个盒子添加margin值」。

(2). 嵌套块元素垂直外边距的合并（塌陷）

• 对于两个嵌套关系的块元素，如果父元素没有上内边距及边框

• 父元素的上外边距会与子元素的上外边距发生合并

• 合并后的外边距为两者中的较大者

「解决方案：」

1. 可以为父元素定义上边框或者上内边距

2. 可以为父元素添加overflow: hidden。

还有其他方法，比如浮动、固定、绝对定位的盒子不会有问题，后面咱们再总结。。。

盒子模型布局稳定性

优先使用 宽度 （width） 其次 使用内边距（padding） 再次 外边距（margin）

width > padding > margin

原因：

• margin 会有外边距合并 还有 ie6下面margin 加倍的bug（讨厌）所以最后使用。

• padding 会影响盒子大小， 需要进行加减计算（麻烦） 其次使用。

• width 没有问题（嗨皮）我们经常使用宽度剩余法 高度剩余法来做。

---

CSS3 新增

---

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

原因：

• margin 会有外边距合并 还有 ie6下面margin 加倍的bug（讨厌）所以最后使用。

• padding 会影响盒子大小， 需要进行加减计算（麻烦） 其次使用。

• width 没有问题（嗨皮）我们经常使用宽度剩余法 高度剩余法来做。

---

CSS3 新增

---

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-X3pTrq4g-1715020622088)]