什么是盒模型

2 02 2 年，我在一个城市里，接了一个大项目，需要用到CSS盒模型的知识。
当时我也懵，盒模型这四个词，听起来挺简单，但实际应用到项目中，才发现里面的门道不少。

内容区域，这就像是一个元素的心脏，承载着所有的内容，宽度高度都是通过CSS属性来控制的。
内边距，就像是元素的衣服，包裹着内容，让内容显得不那么单调。
边框，就像是元素的盔甲，保护着内容，同时也能增加视觉上的层次感。
外边距，这就像是元素与周围元素的距离，保持了一定的空间感。

我当时设置了一个盒模型，宽度1 00px，结果发现，实际占用的宽度不是1 00px，而是1 2 4 px，因为我设置了1 0px的内边距和2 px的边框。
我当时也懵，怎么计算出来的呢？后来才反应过来，原来盒模型有标准模式和IE模式，标准模式是内容+内边距+边框，IE模式是内容+内边距+边框+外边距。

后来，我通过box-sizing属性，把盒模型切换成了IE模式，这样设置宽度1 00px，内容区域就真的只有1 00px了。
这让我在项目中能更精确地控制元素的尺寸，优化了视觉层次，也支持了响应式设计。

总结一下，盒模型就像是一个盒子，里面装着内容、内边距、边框和外边距，通过调整这些部分，我们可以实现各种布局需求。
理解盒模型，对于掌握CSS布局来说，真的是关键中的关键。

【备战秋招Day 1】经典面试题1-4及在线编程题1-3答案

哎，你这问的，像不像当年我第一次面试？搞得我脑袋嗡嗡的。
行，咱一块块来说，别急。

盒子模型？ 嗯，这个我熟。
想当年2 008 年在上海，刚接手一个网站改版，页面乱七八糟的，动不动就重叠。
老板急得不行，我熬夜查资料，就是搞懂了这个盒子模型。
简单说啊，一个元素在页面上占多大的地方，靠这四块儿：内容（就是你看到的文字图片啥的）、内边距（内容跟边框之间的那空白，不能太挤也不能太松）、边框（围着内边距的那圈线，可以粗可以细）、外边距（就是元素跟旁边元素之间的距离，别碰我，我也别碰你）。
你不把这四块弄明白，布局没个准。
比如，一个盒子宽度1 00px，里面内容宽8 0px，内边距左右各1 0px，边框5 px，那它总共占1 00px宽，内容只占8 0px，外边距另说。
搞不懂这玩意儿，CSS布局基本废了。

src跟href？ 这个区分，我08 年做网页的时候早就搞明白了。
src是“拿来主义”，啥意思呢？就是把这个东西“吃”进来了。
你看那个[xss_clean][xss_clean]，浏览器看到这个src，就得赶紧去下载mycode.js，下载完了才能继续往下看你的页面。
如果脚本很大，或者网络慢，那页面渲染就得等它，页面卡一下。
所以，重要脚本最好放<head>里，或者用async、defer试试。
再比如，图片也是src，浏览器必须等图片下载好才能显示出来。
href是“链接”的意思，是“指向”别的东西。
比如关于我们，这是链接，点一下跳到另一个页面。
还有<link href="style.css" rel="stylesheet">，加载样式表，这个浏览器会稍微聪明点，可能会“并行”加载，不会像src那样完全“阻塞”页面显示。
所以，加载CSS用<link>，加载脚本用[xss_clean]，这是老规矩了。

同步和异步？ 这个坑，我当年可是踩得深。
1 2 年我在北京做移动端项目，有个按钮点击后要加载大量数据。
我一开始用同步，结果用户一点击，页面直接卡死，用户等不及，直接关了。
后来改成异步，用setTimeout或者Promise，用户点击后按钮立马就有反应了，数据在后台加载，界面不卡。
同步就是老老实实排队，前面那个事儿没完，后面那个得等着。
异步呢，就是前面那个事儿在干，后面那个事儿先干点别的，等前面那个事儿干完了，再回来拿结果。
网络请求、文件读写这些耗时的操作，基本都得用异步，不然用户体验不好。

DOM操作？ 这个是基本功，没啥好说的。
当年在杭州做前端，天天跟这些节点打交道。
创建节点，document.createElement('div')，简单。
添加节点，parent.appendChild(child)，把一个孩子加到父母末尾。
移除节点，parent.removeChild(child)，干掉它。
查找节点，document.getElementById('myId')，按ID找，快。
还有按类名、标签名找，或者用querySelector这种。
复制节点，cloneNode(true)，深复制带子节点，cloneNode(false)，浅复制。
你问我移动节点？那就先appendChild到新位置呗。
反正就是这些API，用多了就熟了。

在线编程题？ 嗯，这个我也做过不少。
当年面试的时候，老板喜欢出这种题考考你手艺。
比如查找数组元素位置，indexOf最简单，但老版本浏览器可能没，那你得手动写个遍历的，像这样：
javascript function indexOf(arr, item) { if (Array.prototype.indexOf) { return arr.indexOf(item); } else { for (var i = 0; i < arr xss=clean> 数组求和，递归挺好写，但老数组太大容易栈溢出。
循环最稳当，或者用reduce：
javascript function sum(arr) { return arr.reduce((prev, curr) => prev + curr, 0); }
移除数组元素，你写的这个：
javascript function remove(arr, item) { var a = []; for (var i = 0; i < arr xss=clean> 这个逻辑是对的，不修改原数组，返回新数组。
挺好。
这些题啊，主要考你基础，写对就行，别写一堆bug。

总的来说啊，盒子模型、src/href、同步异步、DOM操作，这些都是基本功。
当年我也是这么一步步过来的，踩了不少坑，但总算慢慢懂了。
面试的时候，别怕这些基础题，老老实实回答，能写对代码就最好了。
行了，不说了，我得回去看看明天那个新来的实习生又问啥了。

让人头大的盒模型

盒模型四部分：内容、padding、border、margin。

默认宽度：width + 2 padding + 2 border + 2 margin。

box-sizing:border-box，width包含内容、padding、border。

padding分方向设置：top/right/bottom/left。

padding简写：上右下左、上[左右]下、[上下][左右]、百分比。

padding负值：不允许。

margin分方向设置：top/right/bottom/left。

margin简写：同padding。

margin特殊值：auto（居中）、inherit（继承）。

margin负值：允许。

垂直margin合并：相邻元素取较大值，水平不合并。

应用：布局、响应式、视觉优化。

直接干就完事。

什么是盒子模型

盒模型是网页布局的核心。

内容区域：width/height只控制内容。
2 00px宽的内容，padding:1 0px，总宽算到3 1 0px。

内边距：padding增加总尺寸。
边框也增加总尺寸。
margin不增加自身尺寸，但推远其他元素。
边距是负值会塌陷。

边框：border:1 px solid red;会额外增加1 px左右宽度。

外边距：margin:2 0px;会推远邻居。
外边距重叠会合并。

box-sizing:border-box;能让width包含所有。

实操提醒：用margin负值修正间距问题。