2024年前端最全css盒子模型及其实战案例（上）(2)，2024年最新刚从阿里,头条面试回来怎么说

性能优化

1.webpack打包文件体积过大？（最终打包为一个js文件）

2.如何优化webpack构建的性能

3.移动端的性能优化

4.Vue的SPA 如何优化加载速度

5.移动端300ms延迟

6.页面的重构

所有的知识点都有详细的解答，我整理成了280页PDF《前端校招面试真题精编解析》。

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

• • 🍅border(边框)
• • 🥭表格的细线边框border-collapse

• 🍅padding(内边距）

• • 🥭内边距案例：新浪导航栏

• 🍅margin(外边距)

• • 🥭外边距典型应用：让块级盒子水平居中。

• 🥭垂直外边距的合并问题

• 🥭嵌套块元素垂直外边距的坍塌

• 🍏清除内外边距

• 🍏盒子模型综合案例—产品模块。

• 🍓结语

🍓前言

===================================================================

盒子模型是我们网页布局中很重要的一块内容，今天阿牛就来总结一部分内容，各位小伙伴认真看哦，干货满满！！！

🍏什么是css中的盒子模型？

---

所谓盒子模型：就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距、和实际内容。

🍏盒子模型的组成

---

🍅border(边框)

这里着重讲边框样式，常用的有三种，分别是solid(实线)，dashed(虚线)，dotted(点线)

边框可以简写

上下左右边框也可以分开写，分别给与不同样式

🥭表格的细线边框border-collapse

姓名 性别 职业 地址 阿牛 男 学生 冰岛 wa wa

注意：表格属性cellspacing="0"将单元格合并在一起，边框宽度并没有合并，所以边框看起来较粗，border-collapse：collapse；正好解决这一问题。

所以对于表格可以只用border-collapse：collapse;合并单元格。

同时注意：边框也会影响盒子大小，如果你需要宽高特定的盒子，则盒子的宽高属性是减去边框的像素的。例如一个宽高为200px,边框1px的盒子css应该是下面这样：

div{

width: 198px;

height: 198px;

border: 1px solid pink;

}

🍅padding(内边距）

设置边框与内容之间的距离

padding属性复合写法

注意：和border属性一样，padding属性也会撑大盒子大小,解决方法和border的一样。

但是如果你给盒子未指定宽度和高度，则padding不会撑开盒子大小。

牛啊啊啊啊啊啊啊啊啊啊啊啊啊

假如你给p标签加width:100%,则会变成这样，撑大了盒子。

🥭内边距案例：新浪导航栏

新浪导航

手机新浪网

移动客户端

微博

三个字

🍅margin(外边距)

设置边框与边框之间的距离

复合写法和padding格式一样…

🥭外边距典型应用：让块级盒子水平居中。

一般采用第三种

🥭垂直外边距的合并问题

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

前端面试题汇总

JavaScript

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

性能

linux

前端资料汇总