我的面试之旅

个人的面试踩坑之旅，充满诚意的干货~

一：今日头条

1.用css实现一个自适应的正方形
详细参考：https://idiotwu.me/css-respon...

<div class="placeholder"></div>

方法1：CSS3 vw 单位

.placeholder {
  width: 100%;
  height: 100vw;
}

优点：简洁方便
缺点：浏览器兼容不好

方案2：设置垂直方向的 padding 撑开容器
按照规定，margin, padding 的百分比数值是相对 父元素宽度 的宽度计算的。

.placeholder {
  width: 100%;
  padding-bottom: 100%;
}

为了防止内容撑开容器，设置容器的高度为0

.placeholder {
  height: 0;
}

方法3：利用伪元素的 margin(padding)-top 撑开容器

.placeholder {
  width: 100%;
  overflow:hidden;
}

.placeholder:after {
  content: '';
  display: block;
  margin-top: 100%; /* margin 百分比相对父元素宽度计算 */
}

2.什么是替换元素和非替换元素？img属于哪一种？
详细参考：https://segmentfault.com/a/11...
（1）可替换元素：
可替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。
例如浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来，而如果查看(x)html代码，则看不到图片的实际内容；又例如根据<input>标签的type属性来决定是显示输入框，还是单选按钮等。
(x)html中的<img>、<input>、<textarea>、<select>、<object>都是替换元素。这些元素往往没有实际的内容，即是一个空元素。
（2）不可替换元素
(x)html 的大多数元素是不可替换元素，即其内容直接表现给用户端（例如浏览器）。
例如：<p>段落的内容</p>
段落<p>是一个不可替换元素，文字“段落的内容”全被显示。
（3）设置元素的高度
对于块级元素：
块级元素具有height和width属性，可以通过他们直接设置宽和高
对于可替换的元素（行内元素）：
替换元素一般有内在尺寸和宽高比(auto时起作用)，所以具有width和height，可以设定。
例如你不指定img的width和height时，就按其内在尺寸显示，也就是图片被保存的时候的宽度和高度。
对于表单元素，浏览器也有默认的样式，包括宽度和高度。
对于不可替换元素（行内元素：）
通过line-height属性来设置行高。
设置宽度width 无效。设置高度height无效。
设置margin只有左右margin有效，上下无效。（这就是span的margin-top无效的原因）
设置padding只有左右padding有效，上下则无效。

4）**img是替换内联元素 replaced inline element，属于inline element类目。
和其它的内联元素有什么不同呢？它在计算height/margin/width等值或在绝对定位的时候，有一些额外的规则。（CSS2.1 第10章）比如设定了width但未设置height, img的height会根据比列缩放。**

3.BFC与IFC
详细参考：http://www.myronliu.com/2016/...
Formatting Contexts是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
（1）BFC
BFC(Block Formatting Contexts)直译为”块级格式化上下文”。Block Formatting Contexts就是页面上的一个隔离的渲染区域，容器里面的子元素不会在布局上影响到外面的元素,反之也是如此。

BFC形成
float 的值不为 none
position 的值不为 static 或 relative
display属性为inline-boxs、table-cells、table-captions的不是块盒的块容器(除非这个值已经被传播到视口),
overflow不为visible的块盒才会为它的内容创建新的BFC。
body元素

BFC渲染规则（6条）
内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠，常用来清除浮动和布局。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算

（2）IFC
IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)

IFC渲染规则
框会从包含块的顶部开始，一个接一个地水平摆放。
摆放这些框的时候，它们在水平方向上的外边距、边框、内边距所占用的空间都会被考虑在内。在垂直方向上，这些框可能会以不同形式来对齐：它们可能会把底部或顶部对齐，也可能把其内部的文本基线对齐。能把在一行上的框都完全包含进去的一个矩形区域，被称为该行的行框。水平的margin、padding、border有效，垂直无效。不能指定宽高。
行框的宽度是由包含块和存在的浮动来决定。

IFC ‘line-height’ 与 ‘vertical-align’ 属性
计算行框里的各行内级框的高度。对于置换元素、行内块元素、行内表格元素来说，这是边界框的高度，对于行内框来说，这是其 ‘line-height’。
行内级元素根据其 ‘vertical-align’ 属性垂直对齐。在这些框使用 ‘top’ 或 ‘bottom’ 对齐的情况下，user-agent必须以最小化行框的高为目标对齐这些框。若这些框够高，则存在多个解而 CSS 2.1 不定义行框基线的位置。
行框的高是最顶端框的顶边到最底端框的底边的距离。

4.正则表达式将阿拉伯数字每隔三位为一逗号分离
例如：11500000 -> 11,500,000

"11500000".split("").reverse().join("").replace(/(\d{3})(?=[^$])/g, "$1,").split("").reverse().join("");

(1). (?=[^$]) 会匹配除字符除末尾所有的位置
(2). /(\d{3})(?=[^$])/ 会匹配连续的三个数字，并且这三个数字不能在字符串的末尾
(3)replace(/(\d{3})/g, "$1,")，如果字符串长度刚好是三的倍数，那最后三个字符后也会加上逗号。比如 123456789.replace(/(\d{3})/g, "$1,"); // 123,456,789,

一：今日头条

猜你喜欢