2024年前端最全css盒子模型及其实战案例（上），阿里巴巴二轮面试

最后

基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。

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

注意：表格属性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定义块元素的垂直外边距时，可能会出现外边距的合并。

这里按代码的理论，两个盒子之间应该有200px距离，而事实却只有100px,

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

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

上面这是注释掉子盒子margin-top: 100px;的图，我们取掉注释看一看：

可以看到，子盒子并未与父盒子分开，而发生了坍塌，且只有子盒子margin-top的像素值大于父盒子margin-top的像素值的时候才会发生高度坍塌。

解决办法：

前两种解决方法会改变父元素盒子的大小，用前两种的话我们还要改变父盒子的宽高，因此，我们大多用第三种方案将我们的子盒子与父盒子分开。

可以看到已经解决了嵌套块元素垂直外边距的坍塌问题。

🍏清除内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致，因此我们在布局前首先要清除网页元素的内外边距。

像这样有距离，然后清除内外边距后我们看一下

可以看到用了这串css之后，标签之间的默认距离消失了，在开发中我们通常都会先写这串css。

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