我们先来看两张图：
标准的(W3C)盒模型：
IE盒模型：
很简单，通过设置 box-sizing:content-box(W3C)/border-box(IE)就可以达到自由切换的效果。
- 第一种：
dom.style.width/height
这种方法只能获取使用内联样式的元素的宽和高。
- 第二种：
dom.currentStyle.width/height
这种方法获取的是浏览器渲染以后的元素的宽和高，无论是用何种方式引入的css样式都可以，但只有IE浏览器支持这种写法。
- 第三种：
window.getComputedStyle(dom).width/height
这种方法获取的也是浏览器渲染以后的元素的宽和高，但这种写法兼容性更好一些。
- 第四种：
dom.getBoundingClientRect().width/height
这种方法经常使用的场所是，计算一个元素的绝对位置（相对于视窗左上角），它能拿到元素的left、top、width、height 4个属性。
第五问：描述一下下面盒子的大小，颜色什么的（content-box模型）
有一说一，当时被字节面试官问到这个问题，我是挺蒙蔽的，因为他这里不指考了一点，问题列一下：
-
整个盒子的大小
-
padding的颜色
-
border的颜色
-
height为0了，看得见盒子吗？
答案：如图所示
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-seoi6Bxd-1601901148144)(https://imgkr2.cn-bj.ufileos.com/90d8d423-02bf-4ff7-a55a-b468e66d10e9.png?UCloudPublicKey=TOKEN_8d8b72be-579a-4e83-bfd0-5f6ce1546f13&Signature=UJGAMklHMxD3R9d0%252BlXgVrlCNuc%253D&Expires=1601965090)]
-
整个盒子的大小 = 0 （因为height为0）
-
padding的颜色 = pink（继承content的颜色）
-
border的颜色 = blue（继承color字体的颜色，默认为black）
-
height为0了，看得见盒子吗？ （虽然height为0，但是看得见盒子，因为有border和padding）
这里需要注意：
-
如果没有写border-style，那么边框的宽度不管设置成多少，都是无效的。
-
border-color的颜色默认跟字体颜色相同
-
padding颜色跟背景颜色相同
第六问：当small盒子设置成圆形时，内容会超出圆形吗？为什么
ddddddddddddddddddddddddddddddddddddddddddd
会超出圆形。原因如图所示，是因为border-radius只是改变视觉上的效果，实际上盒子占据的空间还是不变的。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aiFu31Ay-1601901148152)(https://imgkr2.cn-bj.ufileos.com/af9b9f0a-e438-40e9-9b74-a180da080c94.png?UCloudPublicKey=TOKEN_8d8b72be-579a-4e83-bfd0-5f6ce1546f13&Signature=sqIWnNNVhrSekKbjmDrb67R%252FjHw%253D&Expires=1601982569)]
第七问：当元素设置成inline-block会出现什么问题？怎么消除？
这是网易有道的小姐姐面试官的问题，我承认我确实不知道这个问题！
真正意义上的inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距，很简单的个例子：
我们使用CSS更改非inline-block水平元素为inline-block水平，也会有该问题：
.space a {
display: inline-block;
padding: .5em 1em;
background-color: #cad5eb;
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EaNVOoB4-1601901148154)(https://imgkr2.cn-bj.ufileos.com/f3419d71-d00a-4c50-8393-b76f4ea26bee.png?UCloudPublicKey=TOKEN_8d8b72be-579a-4e83-bfd0-5f6ce1546f13&Signature=B6KvpyI0mA5sb6c%252BOKg9kCCaESY%253D&Expires=1601966713)]
去除inline-block元素间间距的N种方法
- 元素间留白间距出现的原因就是标签段之间的空格，因此，去掉HTML中的空格，自然间距就木有了。考虑到代码可读性，显然连成一行的写法是不可取的，我们可以：
热血
或者是：
或者是借助HTML注释：
惆怅<!–
–>淡定<!–
–>热血
-
使用margin负值
-
让闭合标签吃胶囊
-
使用font-size:0
详细的可以看看这篇文章
- 第一：行内元素与宽度
宽度不起作用
span {
width:200px;
}
没有变化
- 第二：行内元素与高度
高度不起作用
span{
height:200px;
}
没用变化
- 第三：行内元素与padding,margin
span{
padding:200px;
}
影响左右，不影响上下 ,span包裹的文字左右位置改变，上下位置不变，但背景色会覆盖上面元素的内容。
如图所示：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aU8EK5ol-1601901148159)(https://imgkr2.cn-bj.ufileos.com/449c835f-d22f-4867-a412-21fdb8680c80.png?UCloudPublicKey=TOKEN_8d8b72be-579a-4e83-bfd0-5f6ce1546f13&Signature=TFGciXgEd17EBpF3rY6Fv%252B05XQg%253D&Expires=1601974621)]
行内元素（inline-block）的padding左右有效 ，但是由于设置padding上下不占页面空间，无法显示效果，所以无效。
对于我们来说，我们经常写的简写是两个值或者一个值或者四个值，而三个值的，会比较少写，所以当时，我确实有点蒙了，因为我对于这个三个值各代表什么是死记硬背的！后来才发现，原来遵循一条非常简单的规则：
简单来说就是 这四个值，分别代表上、右、下、左。如果没有写下的话，那就下复制上的，同理左复制右的值。
因此， 你应该明白了
-
当padding的值只有一个时，就是后面三个都复制了第一个
-
当写两个时，就是写了top和right，因此bottom复制top，left复制right
-
当写了三个时，就是写了top，right，bottom，因此left复制right。
这么简单的规则，再也不会忘记了吧。
我们知道，padding可以这么设置
padding:100px
也可以
padding:20%
那当是百分比时是怎么计算的呢？
这不是很简单的问题吗？
就是根据父元素的宽度计算的
好家伙，我说怎么问那么简单的问题，原来是为了这个问题做铺垫
这个问题可以这么思考，如果不根据父元素，而是根据本身的宽度的话。那么当padding生效后，本身的宽度不就变大了吗？那么padding不是也要变大吗？这就陷入了死循环（哇塞！）。
或者要是本身没有宽度，那岂不是怎么设置padding都是无效的！！！
第十二问：什么是边距重叠？什么情况下会发生边距重叠？如何解决边距重叠？
边距重叠：两个box如果都设置了边距，那么在垂直方向上，两个box的边距会发生重叠，以绝对值大的那个为最终结果显示在页面上。
边距重叠分为两种：
- 同级关系的重叠：
同级元素在垂直方向上外边距会出现重叠情况，最后外边距的大小取两者绝对值大的那个**
- 父子关系的边距重叠：
父子关系，如果子元素设置了外边距，在没有把父元素变成BFC的情况下，父元素也会产生外边距。
给父元素添加overflow：hidden 这样父元素就变为 BFC，不会随子元素产生外边距，但是父元素的高会变化
实际上，这也是第一种的变形。
header {
background: goldenrod;
}
h1 {
margin: 1em;
}
Welcome to ConHugeCo
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0N3pYzf7-1601901148161)(https://imgkr2.cn-bj.ufileos.com/f2e8838a-b0ac-4369-a0b7-2631cce35f36.png?UCloudPublicKey=TOKEN_8d8b72be-579a-4e83-bfd0-5f6ce1546f13&Signature=fAXzG9Nb%252F6jYNxazqkamOigsngo%253D&Expires=1601958403)]
可以看到其实是header的margin为0，然后h1的margin为1em，因此header和h1的margin发生了重叠，然后header的margin就取1em和0两个值中最大的值了，所以当然取1em啦。
（网上有说是因为margin的传递性，但我并不同意，因为我实践了一下，发现不管父盒子有没有margin-top，父盒子只会选择两者值中的最大值，跟传递性似乎没啥关系）
第十四问：为什么回出现margin重叠的问题？粗俗点就是问设计者的脑子有问题吗？
这个就是问设计了margin重叠的巧妙用处。
这个曾经有位面试官问过我，我不知道，我请教了他，他说，在flex布局前，要实justify-content： space-evenly的效果，利用浮动布局，然后给每个盒子设置margin-right，margin-left就可以实现了，这样就不用去单独地再去设置第一个盒子的margin-left和最后一个盒子的margin-right，那时候我信了。
后来越想越不对，不是说margin水平方向不会发生重叠问题吗？？？？
但是根据面试官的思路来的话，在垂直方向似乎就讲的通了。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AYwKPGnd-1601901148164)(https://imgkr2.cn-bj.ufileos.com/1a4fb39e-bc43-437d-94e8-315c85fda45e.png?UCloudPublicKey=TOKEN_8d8b72be-579a-4e83-bfd0-5f6ce1546f13&Signature=%252B1%252FKndZO5u58kFflJ9L8oLIJylY%253D&Expires=1601964506)]
或许你有更好的说法，欢迎下方留言评论补充！！！
那该怎么解决margin边距重叠的问题呢？
解决方法就是生成BFC
BFC的基本概念–BFC就是“块级格式化上下文”的意思，也有译作“块级格式化范围”。它是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。通俗的讲，就是一个特殊的块，内部有自己的布局方式，不受外边元素的影响。
-
内部的Box会在垂直方向上一个接一个的放置
-
垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的两个相邻Box的margin会发生重叠（塌陷），与方向无关。）
-
每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）
-
BFC的区域不会与float的元素区域重叠
-
计算BFC的高度时，浮动子元素也参与计算
-
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新
如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）
最后
推荐一些系统学习的途径和方法。
每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。
CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
HTML 和 CSS：
DwLP-1712071227623)]
[外链图片转存中…(img-aUQPx3ah-1712071227624)]
[外链图片转存中…(img-rCzxlhYx-1712071227624)]
[外链图片转存中…(img-OYmNjMvz-1712071227624)]
[外链图片转存中…(img-4kQme6K0-1712071227625)]既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新
如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）
[外链图片转存中…(img-r2ZJZ1JK-1712071227625)]最后
推荐一些系统学习的途径和方法。
每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。
CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
HTML 和 CSS：
-
扫一扫
5050
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
