我的面试之旅

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

一:今日头条

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,

    原文作者:specialCoder
    原文地址: https://segmentfault.com/a/1190000009282869
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞