前端面试题库

安平十三妹永康扛把子
143 阅读47分钟

css基础

bfc与ifc

bfc与ifc

对BFC规范（块级格式化上下文：block formatting context）的理解？

www.w3.org/TR/CSS21/vi…

developer.mozilla.org/en-US/docs/…

BFC的全称是Blok formatting context(块级格式化上下文)

W3C CSS2.1规范中的一个概念，它是一个独立容器，决定了元素如何对其内容进行定位，以及与其它元素的关系和相互作用 一个页面是有很多个Box组成的，元素的类型和display属性决定了这个Box的类型

不同类型的Box会参与不同的Formatting Context（决定如何渲染文档的容器） 因此Box内的元素会以不同的方式渲染 也就是说BFC内部的元素和外部的元素互不影响

触发BFC的条件: float的值不为none（所以，浮动元素其实也是一个BFC） overflow的值不为visible display的值为inline-block,table-cell,table-caption，flex, inline-flex（官方文档提到flex也是） position的值不为static或者releative中的任何一个

有时候会把display：table也认为可以生成BFC， 其实这里的主要原因在于Table会默认生成一个匿名的table-cell，正是这个匿名的table-ccell生成了BFC

BFC中相邻的块级元素垂直外边界会折叠 BFC不会与float的元素区域重叠（如果浮动元素后有一个BFC，它不会和前面的浮动元素折叠） 计算高度时，浮动元素也参与 每个元素的margin box的左边， 与包含块border box的左边相接触（对于从左往右的格式化，否则相反）

默认可以是认为处于body的bfc中

BFC仍然属于文档流中 BFC的约束规则分解如下: 1.内部的Box会在垂直方向上一个接一个的放置 2.垂直方向上的距离由margin决定。 （完整的说法是：属于同一个BFC的两个相邻块级元素Box的垂直margin会发生重叠。） 3.每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。 （这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界-因为如果又用了absolute，已经不属于本bfc了） 4.BFC的区域不会与float的元素区域重叠 5.计算BFC的高度时，浮动子元素也参与计算

  1. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然

BFC与IFC

归根节点都是：FC（Fomatting Context），CSS2.1规范中的一个概念， 它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用

本质都是渲染规则，这里由一点展开解释：display：inline-block到底是BFC还是IFC？

先这样理解：IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来 （不受到竖直方向的padding/margin影响)

所以我们可以理解为什么：inline表现的元素设置padding/margin无效 （准确的说是，竖直方向的，水平方向最终是可以生效的-最终是IFC盒子上的水平间距生效了，和其他盒子隔开）

垂直无法生效的主要原因是:

padding的值是根据目标元素的width计算出来的，而inline， non-replace元素的width是不确定的。

那么display：inline-block呢？可以理解为，它的外面有了一个BFC盒子（但内部仍然是IFC渲染规则）

再进一步理解：

譬如一个盒子中有，span，sss（文本），那么span就是一个IFC， sss（文本）也会在外部产生一个匿名IFC包裹着

再进一步：IFC有一些布局规则，譬如

  • text-align：center规则可以让内部的IFC居中
  • vertical-align：middle规则可以让内部的IFC垂直居中

然后IFC的line-height规则可以影响IFC本身的高度计算等

说到底，本质就是因为css是盒子模型，所以需要这些FC来进行计算

CSS特性

CSS3有哪些新特性？

新增各种css选择器 如:not(.input) 所有class不是input的节点

圆角 border-radius:6px

多列布局 multi-column layout

阴影与反射 shadow/reflect

文字特效 text-shadow

文字渲染 text-decoration

线性渐变 gradient

旋转，平移等变化 rotate transform

CSS3新增伪类有那些？

实际上都不一定完全记得住，但是要有概念

:after
:before
:enabled
:disabled
:checked

p:first-of-type
p:last-of-type
p:nth-child(2)

请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？

是display的一个属性

一个用于页面布局的全新css3功能 flexbox可以把列表放在同一个方向（从上到下或左到右），并让列表延伸到占用可用的空间

采用flex布局的元素位flex容器,它的所有子元素都是容器成员（flex item）

常规布局是基于块和内联流方向，而flex布局是基于flex-flow流，可以很方便的用来对不同屏幕大小进行适应 布局上比以前更灵活

before和:active中双冒号和单冒号有什么区别？解释下伪元素和伪类？

双冒号是css3规范中引入的 正常来说，单冒号用于伪类，双冒号用于伪元素 不过浏览器会支持单冒号表示伪元素的写法

伪元素譬如：(代表会新增东西)

::first-letter-将特殊的样式添加到文本的首字母
::first-line-将特殊的样式添加到文本的首行
::before-在某元素之前插入某些内容
::after-在某元素之后插入某些内容

伪类譬如：(代表特定状态)

active-将样式添加到被激活的元素
:focus-将样式添加到被选中的元素
:hover-当鼠标悬浮在元素上方时，向原生添加样式
:link-将特殊的样式添加到未被访问的链接
:visited-将特殊样式添加到被访问过的链接
:first-child-将特殊的样式添加到元素的第一个元素
:lang-运行创作者来定义指定元素中使用的语言
  • 伪类用于向某些选择器添加特殊效果（：表示），可以认为只是改变某个状态
  • 伪元素用于将特殊效果添加到某些选择器（：：表示），可以认为新元素生成（dom树中找不到）
  • 有时候为了一些就浏览器兼容，伪元素也用（：）表示，比如兼容ie

区别：

  • 伪类的效果可以通过添加一个实际的类达到， 而伪元素的模拟则需要添加一个实际的元素才能达到
  • 伪类理解为状态（比如:first-child相当于给第一个元素添加样式，并不需要添加元素）， 而伪元素可以理解为伪造的元素（譬如：：after表示插入一个新的元素）

在不考虑兼容的情况下，伪类用（：表示），伪元素用（：：）表示

position与浮动

设置元素浮动后，该元素的display值是什么?

浮动后的display值自动变为了display:block

哪怕以前是inline，浮动后也会变为block （因为浮动时，对象将被视作块对象block-level）

*** position跟display, margin, collapse, overflow, float这些特性相互叠加会怎么样？

如果元素的display为none，那么元素不被渲染，position,float不起作用

如果元素拥有position:absolute或者position:fixed属性 那么元素将为绝对定位，float不起作用，

如果元素float不是none，元素会脱离文档流根据float属性值来显示，

有浮动，绝对定位，inline-block属性的元素，margin不会和垂直方向上的其它元素margin折叠 （inline-block，绝对定位，可以解决垂直 margin折叠问题）

absolute的containing block(容器块)计算方式跟正常流有什么不同？

absolute中的定位都会找到其祖先position不为static的元素，然后判断 1.若此元素为inline元素，则containing block就是 能包含这个元素生成的第一个和最后一个inline box的padding box(除margin,border外的区域)的最小矩形 2.否则，则由这个祖先元素的padding box构成

如果都找不到，则为 initial containing block

supplement: 1.static/relative: 简单的说就是它的父元素的内容框（去掉padding部分） 2.absolute: 向上找最近的定位不为static 3.fixed:它的containing block一律为跟元素(html/body)，跟元素也是initial containing block

请解释下为什么需要浮动？清除浮动的方式

清除浮动主要是为了清除浮动元素产生的影响 浮动的元素，高度会坍塌，高度坍塌使得页面后面的布局不能正常显示

方法：

overflow:hidden触发生成bfc,bfc会计算浮动元素高度 父级div定义height 父级的div也一起浮动 clear:both属性

.clearfix::before, .clearfix::after {
    content: " ";
    display: table;
}
.clearfix::after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

sass中
&::after,&::before{
        content: " ";
          visibility: hidden;
          display: block;
          height: 0;
          clear: both;
    }

原理：

display:block 使得元素以块级元素显示，占满剩余空间 height：0 避免生成内容破坏原有布局的高度 visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互; 通过 content:"."生成内容作为最后一个元素，至于content里面是点还是其他都是可以的， 例如oocss里面就有经典的 content:".",有些版本可能content 里面内容为空,一丝冰凉是不推荐这样做的, firefox直到7.0 content:”" 仍然会产生额外的空隙； zoom：1 触发IE hasLayout。 除了clear：both用来闭合浮动的，其他代码无非都是为了隐藏掉content生成的内容， 这也就是其他版本的闭合浮动为什么会有font-size：0，line-height：0。

clear:both的作用

css1和css2中都有，在 CSS2.1 中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。 clear:both用来清除浮动效果，利用清除浮动来把外层的div撑开 clear属性规定元素的哪一侧不允许元素浮动 left:左侧不允许浮动 right:右侧不允许浮动 both:左右两侧不允许浮动 none:默认值，允许两侧的元素浮动 inherit:(任何ie都不支持)规范从父元素继承clear属性的值

比如如果两个元素都用了float，然后用了clear:left， 那么第一个元素布局时先判断左侧是否有浮动元素， 结果判断没有，正常布局，

第二个元素布局时继续判断左侧是否有浮动元素，结果确实有浮动元素， 所以根据规则(左侧不允许有浮动)，第二个元素顺延到第一个元素的下面去了，

接下来继续判断其它元素 通常，如果一个div内部，有多个浮动元素，那么这些浮动元素会脱离正常流(文档流)， 这时候需要会在最后的浮动元素插入一个空的元素，然后设置clear:both以此来清除浮动， 这样，后面的元素就不会被前面的浮动元素影响了(一般会通过::after伪元素实现)

相比而言:overflow:hidden并不是清除浮动，它只是由于触发了bfc，所以内部的浮动元素一起计算高度而已

overflow:hidden的作用是什么？

overflow:hidden

规定当内容溢出元素时，自动修剪（变为不可见），同时会触发bfc(这点常用于去除浮动影响)

overflow属性规定当内容溢出元素框时发生的事情，可选值如下: visible:默认值，内容不会被修剪，会呈现在元素框之外 hidden:内容会被修剪，并且其余内容不可见，而且还能用于清除浮动 scroll:内容会被修剪，但是浏览器会显示滚动条以便查看其余内容 auto:如果内容被修剪，则浏览器会显示滚动条以便查看其余内容(但有可能不被修剪) inherit:(任何ie都不支持)规定从父元素继承overflow属性

对绝对定位时overflow:hidden会有些出乎意料的效果

注意:一个绝对定位的后代快元素，部分位于容器之外，这样的元素是否裁剪并不总是取决于定义了overflow:hidden属性的祖先容器； 尤其是不会被“位于他们自身和他们的包含块之间的祖先容器”的overflow裁剪 比如一个demo中，爷爷是相对定位，老爸规定溢出隐藏，儿子是绝对定位元素，这时候儿子的溢出元素是否隐藏由爷爷决定，而不是老爸， 原因是老爸没有相对定位，无法作为绝对定位的包含块，所以由爷爷接管)

另外,裁剪只有当高度固定时才有用(因为如果高度没有固定，内容本来就是自动撑开的)

Overflow是css2中加入的， 能够清除浮动的原理是因为overflow取值只要不是visible，将会触发BFC (BFC中必须给浮动元素撑出高度，使的后续的元素无法跟浮动元素共享同一水平位置，看上去就是clear:both的效果了)， 而BFC决定了元素高度是如何计算的(会将浮动元素高度计算入内)，所以达到了清除浮动效果

overflow:hidden和clear:both都有清除浮动的功能，这两者有什么区别？

clear:both-元素设置了这个属性后，自身就有清除浮动的效果 overflow:hidden-父级设置了这个属性后，会触发BFC (BFC中必须给浮动元素撑出高度，使的后续的元素无法跟浮动元素共享同一水平位置，看上去就是clear:both的效果了)， 从而达到了类似于清除浮动的效果。

所以准确的说clear是“清除浮动”，而overflow是“闭合浮动-使浮动元素闭合，从而减少浮动带来的影响

***请列举几种常用的清除浮动的方法，并解释下原理？

清除浮动一般有两大类别， 第一类别为通过clear清除浮动， 第二类别为通过触发BFC闭合浮动，去除浮动影响。

第一类别:(原理为利用clear的功能清除浮动),常用方法有如下: 在浮动元素后面新增一个空的标签，并设置clear:both 高级用法(最常用)，最后一个浮动元素使用自定义的clearfix类， 这个类的作用是通过:after，在元素后面插入一个空的伪元素， 这个伪元素有clear:both属性，从而达到清除浮动效果

第二类别:(原理为通过触发BFC闭合浮动，去除浮动带来的影响),常用方法有如下: 通过overflow属性(除了visible值,其它都可以，最常用hidden)， 比如overfow:hidden，触发BFC，从而达到闭合浮动，去除浮动效果 其它的触发BFC的方法，如 display:table(这种方法本身并不会创建BFC，但是它会产生匿名框， 而匿名框中的display:table-cell可以创建新的BFC，也就是说触发BFC的是匿名框，而不是display:table， 所以通过display:table和display:table-cell（本身）创建的BFC效果是不一样的)

为什么对元素使用了float浮动，一定要清除浮动？

元素使用浮动属性后，会脱离文档普通流，浮动元素可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。 这样当一个元素浮动后，同级内的其它元素会变现的跟浮动元素不存在一样，会跟浮动元素共享同一个位置。 而且当一个div内部同时存在浮动元素和普通元素，并浮动元素的高度高于普通元素时， div的高度不会自动伸高来闭合浮动元素，只会使用普通元素的高度，导致了“高度坍塌”现象

正是由于浮动的这种特性，在实际布局中会影响正常的预期效果，并不是我们期望的，所以往往都需要使用某些方法闭合浮动， 从而使元素达到预期效果

zoom:1的清除浮动原理

ie专用

清除浮动，触发hasLayout zoom属性是ie专有的，可以设置或检索对象的缩放比例，解决ie下比较奇怪的bug 譬如外边距折叠，清除浮动，触发hasLayoutd等

原理 设置了zoom后，所设置的元素就会就会扩大或者缩小，高度宽度就会重新计算了， 这里一旦改变zoom值时其实也会发生重新渲染，运用这个原理，也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题。

Zoom属是IE浏览器的专有属性，火狐和老版本的webkit核心的浏览器都不支持这个属性。 然而，zoom现在已经被逐步标准化，出现在 CSS 3.0 规范草案中。(基本chrome支持了，现代浏览器都开始支持)

目前非ie由于不支持这个属性，它们又是通过什么属性来实现元素的缩放呢？ 可以通过css3里面的动画属性scale进行缩放。

position:fixed在手机上无效怎么处理？

fixed是基于整个页面固定，而某些场景下滑动的是整个viewport, 网页并没有滑动，所以fixed看起来跟没有固定一样(实际上它并没有动，只是不是相对手机屏幕的固定而已)

一般是没有加viewport声明的缘故，加上即可

meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"

另外，iOS下自带的回弹也可能造成问题 或者iOS下fixed被输入框弹出(原理是body被滚动，改成absolute，或者监听focus时临时改)

还有人的做法是使得fixed布局的父元素(body)不出现滚动，将滚动内容移到其他div内部 这样弹出后，页面本身不会滚动，不会有这个问题

还有一种是页面上同时添加了滑动事件，如：overflow：auto/scroll等，就会出现这样的BUG： 当滑动页面时，input框（fixed）就会掉下来，fixed属性失效。 解决是使用iscroll等插件（不使用overflow：auto/scroll，iScroll内部是自己用的translate动画-低版本也是js模拟动态修改top）

viewport

css的@viewport？

可以实现 meta标签中的viewport同样的效果，但是现在的浏览器很多都不兼容 （如Safari和Firefox根本就未实现）

安卓上如何实现1px像素线？

先看看按照正常思路如何实现这个逻辑：

border:1px solid #000

但是，用这个后，会发现在高分辨率的手机中，线会变胖，并不是1px

原理如下：

iPhone 3GS 和 iPhone 4 的像素分别是 320px 和 640px，但是显示屏的宽度却却都是相同的， 所以为了在所有设备上渲染出的显示效果相同，CSS 中的 1px 映射到 iPhone 4 的物理像素上，就会是 2px 同样的道理，在 iPhone 5、6 上 CSS 的 1px 对应物理像素 2px，6plus 则是 3px

上述的描述就是：逻辑分辨率和物理分辨率的区别，一般通过设置下面的meta实现（设置后视口中的像素和物理像素就又一个比例了）

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

所以当我们设置 1px 时，实际的显示效果其实是由两个甚至三个像素点所绘制的

那么如何设置真实的1px线？（注意，android中，直接0.5px并不适应-或许未来可以，但现在还是不能这样）

  • 先放大，然后利用transform(scale(0.5));缩小（一般不会单独兼容3倍像素的，兼容2devicePixelRatios就可以了） 即构建1个伪元素, 将它的长宽放大到2倍, 边框宽度设置为1px, 再以transform缩放到50%. （为什么放大200%，因为，需要缩小0.5，否则的话可能长度就不对了，比如绘制100px的1px宽线，先绘制200px的2px，然后缩小一半） -1csspx(实际两像素),缩小0.5后就是实际一像素
  • 或者通过设置对应viewport的rem基准值，这种方式就可以像以前一样轻松愉快的写1px了。 (2的时候，viewport缩放为0.5,3的时候，viewport缩放为0.33，然后这样就1px就是实际的像素了（不过和viewport为1时的像素大小是不一样的，注意）) 或者用对多背景渐变实现的也有

viewport的理解？

layout viewport（布局视口） 移动设备浏览器一般都会默认设置一个viewport标签 它的作用是定义一个虚拟的layout viewport，用于解决早期的页面在手机显示问题

譬如默认情况下iOS,android中将这个视口分辨率设置为980px 所以，pc端网页基本能在手机上展示，只不过元素看起来很小（默认可以通过手指缩放）

当然也可以自己设定一个宽-一般会取device-width，这也是下面会提到的。

  • visual viewport（视觉视口）和物理像素 visual viewport（视觉视口）为物理屏幕的可视区域 屏幕显示器的物理像素，同样尺寸的屏幕，像素密度大的设备，硬件像素会更多 例如iPhone的物理像素：
iPhone5 ：640 * 1136
iPhone6：750 * 1334
iPhone6 Plus：1242 * 2208

  • ideal viewport（理想视口）和 dip （设备逻辑像素）

    • ideal viewport（理想视口）通常是我们说的屏幕分辨率。
    • dip （设备逻辑像素）跟设备的硬件像素无关的。一个 dip 在任意像素密度的设备屏幕上都占据相同的空间。

比如MacBook Pro的 Retina （视网膜）屏显示器硬件像素是：2880 1800。 当你设置屏幕分辨率为 1920 1200 的时候，ideal viewport（理想视口）的宽度值是1920像素， 那么 dip 的宽度值就是1920。设备像素比是1.5（2880/1920）。 设备的逻辑像素宽度和物理像素宽度（像素分辨率）的关系满足如下公式：

逻辑像素宽度*倍率 = 物理像素宽度

而移动端手机屏幕通常不可以设置分辨率，一般都是设备厂家默认设置的固定值 ，换句话说 dip 的值就是 ideal viewport（理想视口）（也就是分辨率）的值

譬如，iPhone的屏幕分辨率：

iPhone5 ：分辨率 320 * 568，物理像素 640 * 1136，@2x
iPhone6：分辨率 375 * 667，物理像素 750 * 1334，@2x
iPhone6 Plus ：分辨率 414 *  736，物理像素1242 * 2208，@3x，（
注意，实际显示图像等比降低至1080×1920，具体原因查看：http://www.css88.com/archives/5972）

更多设备的 ideal viewport（理想视口）可以查看viewportsizes.com/

  • css像素

    • CSS像素（px）用于页面布局的单位。样式的像素尺寸（例如 width: 100px）是以CSS像素为单位指定的。
    • CSS像素与 dip 的比例即为网页的缩放比例，如果网页没有缩放，那么一个CSS像素就对应一个 dip（设备逻辑像素）
      （譬如为device-width时，css像素与逻辑像素一样）

使用viewport元标签控制布局，通常使用如下标签

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;">

width属性被用来控制layout viewport（布局视口）的宽度，layout viewport（布局视口）宽度默认值是设备厂家指定的。

iOS, Android基本默认都将这个视口分辨率设置为 980px。 我们可以 width=320 这样设为确切的像素数，也可以设为device-width这一特殊值 一般为了自适应布局，普遍的做法是将width设置为device-width

width=device-width 也就是将layout viewport（布局视口）的宽度设置 ideal viewport（理想视口）的宽度。 网页缩放比例为100%时，一个CSS像素就对应一个 dip（设备逻辑像素） ，而layout viewport（布局视口）的宽度，ideal viewport（理想视口）的宽度（通常说的分辨率）， dip 的宽度值是相等的。

height与width类似，但实际上却不常用。

viewport中的其它几个属性：

  • initial-scale用于指定页面的初始缩放比例： initial-scale=1 表示将layout viewport（布局视口）的宽度设置为 ideal viewport（理想视口）的宽度， initial-scale=1.5 表示将layout viewport（布局视口）的宽度设置为 ideal viewport（理想视口）的宽度的1.5倍。
  • maximum-scale用于指定用户能够放大的最大比例，例如
  • minimum-scale是用来指定页面缩小比例的。通常情况下，不会定义该属性的值，页面太小将难以阅读。
  • user-scalable来控制用户是否可以通过手势对页面进行缩放。该属性的默认值为yes，可被缩放，你也可以将该值设置为no，表示不允许用户缩放网页。

meta viewport minimum-scale无效？

<meta name="viewport" content="width=device-width, minimum-scale=0.5, initial-scale=1.0, maximum-scale=3.0">

这样声明时会发现页面只能放大不能缩小

可能与兼容性有关，譬如有一种说法是： Android WebKit内核和IE浏览器的layout viewport永不会小于320px。

动画相关

全屏滚动的原理是什么？用到了css的哪些属性？

多个页面，每一个页面分别占据页面的100%高度，每次切换页面时全屏滚动

它的原理和图片轮播一样，都是基于css的transform属性 每一个页面初始化时的y值不同(间隔一个屏幕高度) 然后页面切换时，切换到不同的y值

一般会使用transform,transition等属性，分别用来设置坐标，设置过渡时间等 有时候还可以用其它过渡效果，如透明度，颜色渐变等

视差滚动效果，如何给每页做不同动画？（回到顶部，向下滑动要再次出现，和只出现一次分别怎么做？）

视差滚动：多层背景以不同速度移动，形成立体的运动效果，带来出色的视觉体验

一般会有背景层，内容层，贴图（悬浮）层，滚动时，不同速度移动

一般原理是：各个页面是fixed布局，然后监听滚动（譬如滚轮）， 在滚动的不同距离以此移动对于图层的top值

如果需要手写动画，你认为最小间隔是多久，为什么？

很多显示器的频率仍然是： 60HZ，所以理论上是：

1/60 *1000ms = 16.7ms

盒(框)模型

介绍下css的盒模型

1.标准盒模型

width = content

2.ie盒模型(border盒模型)

width = content + padding + border + margin

css3的box-sizing属性？

它可以让DOM元素以不同盒模型的方式呈现， 譬如将盒模型由标准盒模型改为IE盒模型

它有如下值：

  1. content-box

    • 标准盒模型
    • 这是由 CSS2.1 规定的宽度高度行为。
    • 宽度和高度分别应用到元素的内容框。
    • 在宽度和高度之外绘制元素的内边距和边框。

  2. border-box

    • IE盒模型
    • 为元素设定的宽度和高度决定了元素的边框盒。
    • 就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
    • 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
    • 在很多布局中，这个属性很好用

  3. inherit

    • 规定应从父元素继承 box-sizing 属性的值

margin和padding分别适用什么场景使用？

margin隔开元素与元素直接的间距（用于布局分开元素，使得元素直接互不相关） padding隔开元素与内容的间距（让内容与包裹之间有一段空）

inline-block之间的间距？

inline布局或者inline-block布局之间就会有间隙，例如如下布局

.space a {
    display: inline-block;
    padding: .5em 1em;
    background-color: #cad5eb;
}

<div class="space">
    <a href="##">惆怅</a>
    <a href="##">淡定</a>
    <a href="##">热血</a>
</div>

不管是display: inline-block;还是display: inline; 会发现a标签之间会有一定的间距

这个是正常现象！！！ 这种表现是符合规范的应该有的表现！

产生间距的原因是标签之间的空白字符在内联时占据位置

如何去除？方法很多，譬如

  1. 标签不换行，这样不同标签之间就没有空白字符
<a href="##">
    惆怅</a><a href="##">
    淡定</a><a href="##">
    热血</a>

或

<a href="##">惆怅</a><a href="##">淡定</a><a href="##">热血</a>

总之，只要><a之间没有空白即可

2.使用margin负值

.space a {
    display: inline-block;
    margin-right: -3px;
}

这些方案，margin负值的大小与上下文的字体和文字大小相关 所以不同字体，字体大小需要使用的margin还不一样 不太适合大规模使用

3.标签不闭合

<a href="##">惆怅
<a href="##">淡定
<a href="##">热血

注意，为了向下兼容IE6/IE7等低版本的浏览器，最后一个列表的标签的结束（闭合）标签不能丢。

4.使用font-size:0

.space {
    /*解决某些Chrome,版本中默认有最小字体大小限制*/
    -webkit-text-size-adjust:none;
    font-size: 0;
}
.space a {
    font-size: 12px;
}

这样，空白字符就不会占位（没有大小）

5.使用letter-spacing

.space {
    letter-spacing: -6px;
}
.space a {
    letter-spacing: 0;
}

同样需要调试到合适的大小，基本适用于所有浏览器 注意，Opera浏览器下有问题：最小间距1像素，然后，letter-spacing再小就还原了。

6.使用word-spacing

.space {
    word-spacing: -6px;
}
.space a {
    word-spacing: 0;
}

与上相比，一个是字符间距(letter-spacing)一个是单词间距(word-spacing)，大同小异 经测试，word-spacing的负值只要大到一定程度，其兼容性上的差异就可以被忽略。 因为，好像，word-spacing即使负值很大，也不会发生重叠。

注意，如果某些版本的Chrome浏览器，可能看到的是间距依旧存在 这时可以添加display: table;或display:inline-table;让Chrome浏览器也变得乖巧。

.space {
    display: inline-table;
    word-spacing: -6px;
}

7.设置float:left

.space a {
    float:left;
}

原理是浮动元素不会去和文档流中的位置计算，因此直接重叠到原有空白上了

基本上一些框架中解决间距都是以上方法的组合， 譬如YUI 3 CSS Grids 使用letter-spacing和word-spacing去除格栅单元见间隔

li与li之间有看不见的空白间隙是什么原因引起的？有什么解决办法？

行框的排列会受到中间空白（回车，空格）的影响， 因为空格也属于字符，这些空白也会被应用样式，占据空间，所以会有间隔

把字符大小设为0，就没有空格了

什么是外边距合并

在同一个bfc下的两个box 当它们的垂直外边距相遇时，将会合并成一个外边距（取两个发生合并的外边距高度中较大者） 全部都为正值，取最大者 不全是正值，都取绝对值，然后正值减去绝对值 没有正值，都取绝对值，0减去绝对值

一个空元素，有外边距，但是没有边框或填充，这时候，它的上边距和下边距会合并

当一个元素在另一个元素中时(假设没有内边距或边框把外边距隔开)，它们的外边距会发生合并

不同bfc之间的外边距不会合并

注意，外边距合并只有内外两个margin相邻时才会发生，如果中间一个有padding， 那么它们是分开的，自然不会合并

首屏加载相关

什么是FOUC？如何避免？

Flash Of Unstyled Cotent

大概就是样式加载前浏览器用默认样式渲染文档， 样式加载后重新渲染文档，造成页面闪烁

解决方案是：

样式放在head中，这样在加载文档前样式已经有了，或者其它的优化css加载时间的方案

属性介绍

CSS哪些属性可以继承？

  • 可继承属性

color，font-size，font-family，font-style，visibility，line-height，cursor

  • 不可继承

border，padding，margin，width，height等等

可以看出，与盒模型布局相关的属性基本都是不可继承的

display有哪些值？说明他们的作用。

  • none，隐藏元素，并且不保留位置（如果是visibility: hidden的话会，虽然看不见，但是保留位置）
  • block，块级元素，默认情况下会占据整行，可以设置宽高等元素
  • inline，内联元素，无法设置宽高（padding和margin也无效。布局时需注意）
  • inline-block，内联的块级，可以设置宽高
  • table，表格
  • table-cell，表格元素
  • table-caption，表格头部
  • box，flex的前身，伸缩性布局
  • flex，弹性布局，不计入普通文档流
  • list-item 列表，会为元素内容生成一个块型盒，随后再生成一个列表型的行内盒。其效果就和ul中出现项目列表符号一样。 通俗地说就是会在内容前面自动加上黑点，而display:block则不会出现黑点。

注意，list-item为元素生成了一个块模型，随后再生成一个列表型的行内盒。

display:none和visibility:hidden的区别？

相同点： 都能将网页上的某个元素隐藏

不同点： display:none。隐藏对象并且不保留空间，即使用后该对象会从页面上消失，看不见，摸不着 涉及到了DOM结构，故产生reflow与repaint

visibility:hidden。使得对象在网页不可见（点击事件也无法触发），但是对象在网页上所占的空间没变（变为一块空白占据原有空间） 保留空间，不影响结构，故只产生repaint

在渲染时，visibility:hidden被渲染成了空盒子，仍然在render树中， 而display:none的元素是将节点从整个render tree中移除，所以不是布局中的一部分

所以，很多时候visibility:hidden更方便

position的值relative和absolute定位原点是？

  • absolute 生成绝对定位元素，相对于值不为static的第一个父元素进行定位
  • fixed 绝对定位，相对于浏览器窗口进行定位
  • relative 生成相对定位，相对于其正常位置进行定位。（relative不会导致元素脱离文档流）
  • static 默认值，没有定位,元素出现在正常流中(文档流)，忽略top,bottom,left,right,z-index等声明
  • inherit 从父元素集成position值

position属性的三个值：relative，absolute，fixed的区别？

  • relative: 生成相对元素，无top,left时，元素就是在正常的文档流中， 譬如如果设置了left:20px，就会从左侧偏离20像素
  • absolute: 生成绝对定位元素，相对于上级元素中第一个position属性非static的元素来定位 使用left,right,top,bottom来定位
  • fixed: 生成绝对定位元素，相对于浏览器视窗来定位 使用left,right,top,bottom定位
  • position的其它值: static:默认值，没有定位，元素出现在正常流中 忽略top,bottom,left,right或者z-index声明

一般情况下，对于一些动画元素会采用absolute来单独布局，因为这样可以脱离普通文档流，减少回流影响的单位数量

对line-height是如何理解的？

指定了一行字的高度，定义是同一个元素中（比如同一个p）两个文本行基线之间的距离 如果div没有高度，但是里面有文字，那么它会被文字的line-height默认撑开

line-height只影响行内元素， 具有可继承性，块级元素的子元素会继承该特性，并在行内元素上生效

譬如，简单的把height设置和行高一样的话，可以实现单行文本居中

css table的一些属性？

  1. border-spacing

控制各个cell之间的间距，如果有border，会特别明显

2.border-collapse

可取collapse或seperate，合并是可以折叠各个cell的border，避免加粗， 默认情况下border不会合并，中间几个cell会被加粗

3.empty-cells

取hide时会隐藏空的cell，避免在空的cell中填充background color，

但是，如果设置了border-collapse，不生效，这个属性会被忽略，空的cell仍然会显示background color

相对定位

在使用相对定位时，无论是否移动，元素仍然占据原有空间。 因此移动元素会导致它覆盖其它框

而绝对定位则因为不在文档流中，因此不占据空间，不会覆盖

overflow:scroll不能平滑滚动的问题

特别是iOS下

1.需要-webkit-overflow-scrolling： touch开启硬件加速 (底层用了一个原生控件来显示的)

2.或者类似于iScroll一样，自己内部用translate动画模拟

input与textarea的区别

input单行

textarea多行

input自闭合

textarea结对

input有value属性可以设置

textarea直接在标签间的文本设置（但是可以获取value）

textarea有一些row、col指定大小

input有Maxlength之类的

object-fit知道么？

css3中的属性，它的作用是决定目标元素如何被替换，适用于img或video等标签

譬如给video加object-fit: fill;，可以让视频自适应撑开填满整个屏幕（默认情况下，就是全屏，也会有黑边的）

skew属性？

注意： ie10以上才支持transition

skew是斜切（或者说拉伸） skew的默认transform-origin是这个物件的中心点

skewX(30deg) 表示X轴朝逆时针方向旋转30deg，坐标系上的物体也会随着X轴旋转。 skewY(30deg) 表示Y轴朝顺时针方向旋转30deg，坐标系上的物体也会随着Y轴旋转。

CSS里的visibility属性有一个collapse属性值时干嘛的?在不同浏览器下有什么区别？

对于普通元素visibility:collapse;会将元素完全隐藏, 标准w3c呈现效果为元素隐藏，但是占据空间，Firefox下隐藏并不占空间，IE下不起作用

如果目标元素为table, 可以隐藏对应的行或列（跟display:none一样）

一般使用较少

webkit-font-smoothing的作用？

-webkit-font-smoothing: antialiased

加上抗锯齿渲染（非标准），可以让页面中的文字更清晰

另外有人总结过只在macOS 的webkit中有效

font-style属性可以让它赋值为"oblique"，什么意思？

倾斜的字体样式

和italic的区别： italic是斜体 oblique是倾斜的文字排版（模仿的斜体，但不是斜体）

display:inline-block什么时候会显示间隙？

换行或空格会占据一定的位置，从而产生间隙

解决方法： 去除空格 使用margin负值 使用font-size：0（本质也是去除了空格的占位） letter-spacing,word-spacing 譬如letter-spaceing:-4px

style访问是转为驼峰

background-image
color
font-size
float

转为驼峰后分别是？

backgroundImage
color
fontSize
cssFloat

注意，float是一个不能直接转换的属性，因为它是JS中的保留字，因此不能作为属性名.

DOM2级样式规定样式对象上相应的属性名应该是cssFloat（不过老版IE中支持的则是styleFloat）

outline

是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

如何修改chrome记住密码后自动填充表单的黄色背景？

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color: rgb(250, 255, 189); /* #FAFFBD; */
    background-image: none;
    color: rgb(0, 0, 0);
}

主要是 -webkit-autofill 样式

background-image和img标签，什么时候不推荐使用背景图片？

background-image的作用是给div添加背景图片显示（只是作为样式，大小仍然由div决定） img标签则是插图一张图片，会占大小（当然也可以通过样式固定）

以下情况中不推荐使用背景图：

  • web浏览器不会打印背景，所以像地图导航之类的，推荐插入img而不是背景图
  • 搜索引擎不会搜索css，所以如果图片对网站有用（譬如本身属于终于内容，需要seo等），就推荐使用img标签，并且使用alt属性

rgba()和opacity的透明效果有什么不同

首先，rgba()和opacity都能实现透明效果，不同之处：

  • opacity作用于元素，以及元素内所有内容的透明度
  • rgba()只作用于元素的颜色或其背景色 （而且设置rgba透明的元素的子元素不会继承透明效果！）

letter-spacing的妙用？

可以用于消除inline-block元素间的换行符空格间隙问题

css的content属性

css的content属性专门应用在 before/after 伪元素上，用于来插入生成内容。

譬如插入伪元素清除浮动， 插入伪元素作为元素之间的分隔符等

.clearfix:after {
    content:".";
    display:block;
    height:0;
    visibility:hidden;
    clear:both;
}

像素单位值

px,em,rem的区别？

  • px是绝对像素，相对于屏幕的逻辑分辨率而言的，每一px的大小在不同设备中都是固定的，但是无法做到自适应，当遇到不同机型的适应时只能写多套代码
  • em是一个相对值，相对于当前对象的父对象的行内文本尺寸计算（如果当前对象的父对象的font-size被改变了，那么就是基于这个改变后的值来计算） 1em总是等于父元素的字体大小， 父元素的字体大小如果没有设置，会自动继承（一直往上找，直到找到根结点）， 这种方案虽然是相对值，但是有一个缺点，改变一个节点的字体大小，会改变它所有的子节点的计算
  • rem和em类似，不过不同之处在于它是基于根节点的字体大小计算的(html节点-是html不是body)， 这样改变任意节点都不会造成意外效果

注意：在默认情况下，任意浏览器的默认字体大小都是16px

除了IE6-IE8，其它所有浏览器都支持em和rem， px所有浏览器都支持

style样式动态设置

譬如

myDiv.style.width = '100px';

注意，如果设置为100，没有带单位，会被自动忽略，因为没有度量单位（当然，很久以前的混杂模式中，会有一个默认的px，不过标准模式必须带单位）

元素竖向的百分比设定是相对于容器的高度吗？

元素的竖向百分比设定是基于容器的宽度而不是高度

可以自行测试一旦修改容器宽度，发现竖向百分比对于的值也增加了

注意，指的是margin，padding这种是基于宽度

但是height这种是基于父元素的高度的

千万别搞混

选择器

CSS选择符有哪些？

选择符包括：

`*`，
`id`，
`class`，
`tag`，
`.a > .b`，
`.a .b`，
`.a.b`（必须两个都满足），
`a:hover`（一些伪类状态），
`a::before`（伪元素），
`a[rel = "external"]`（属性选择）
等等

页面布局

什么是响应式设计？响应式设计的原理是什么？如何兼容低版本的IE

随意发挥，要有@media概念就行

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念

页面根据不同的设备环境进行相应调整，譬如兼容手机和pad(一个页面多个终端，而不是每一个终端一个特定版本)

核心原理是使用css media query，通过媒体查询去检测不同设备的尺寸 @media 设备名 only （选取条件） not （选取条件） and（设备选取条件），设备二{rules} 可以在link中加上media媒体查询属性决定是否加载 也可直接在样式中用@media

页面头部必须加上声明viewport

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

兼容ie可以使用js来判断并兼容（ie不支持媒体查询） ie肯定只是pc端展示，因此更多的是pc端兼容问题，而不是不同设备的响应式

优点:

  1. 面对不同的分辨率设备灵活性强
  2. 能够快捷解决多设备显示适应问题

缺点:

  1. 需要兼容各种设备，工作量大，效率低下
  2. 代码累赘，会出现隐藏无用元素，加载时间长
  3. 一定程度上改变了网站的原有布局结构，会出现用户混淆的情况
  4. 这是一种折中性质的解决方案，有时候会因为多方面因素，而达不到最佳效果

静态、自适应、流式、响应式布局的各自特点和区别？

  • 静态布局:一般用于传统的web设计，不管浏览器尺寸多少，网页只会有一套布局，不会有自适应现象 (一般会设置成用横线或竖向的滚动条来查阅被遮掩部分)。 而且这种情况一般移动设备会单独再写一套代码，使用不同的域名访问，如wrap.(m.)
  • 自适应布局:自适应布局是为了解决“如何才能在不同大小的设备上呈现同样的网页”， 实现原理主要是依据于允许网页宽度自动调整(比如Viewport标签中的width=device-width,会默认将网页初始化大小占满屏幕) 这种布局一般会使用相对大小(如em,rem,百分比等)，一般会尽力避免使用绝对大小(px)， 这样就达到了随着屏幕大小的不断变化，内容不会溢出，而是自适应的挤压或变长的效果 (也就是说一套自适应布局是可以不用Media Query就能实现的)。
  • 流式布局:这种布局一般认为是“使用float实现浮动”(常常会用float+宽度百分比实现)， 即各个区域位置都是浮动的，不是固定不变的。 这种布局中，使用float的好处是如果宽度太小,放不下多个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow， 避免水平滚动条的出现(一般流式布局要注意使用clear:both清除浮动)。 不过需要注意，在绝对定位中使用float需要非常小心。
  • 响应式布局:响应式布局是为了解决“让同一个网页自适应不同大小的屏幕，根据屏幕宽度，自动调整网页的布局以及内容大小”， 也就是说“响应式的概念覆盖了自适应”。响应式实现的原理是基于CSS3的Media Query (这个媒介查询可以根据不同的屏幕分辨率，调整网页设计，改变展示布局，需要注意的是对于响应式来说，Media Query必不可少)。

一个满屏 品 字布局 如何设计?

一般常用为：

上面的一个div 100%宽 下面的两个div分别宽 50% 用float或者inline或绝对定位使得不换行 简单的可以用border来区分是否正确

移动端布局用过媒体查询（@media）么

媒体查询相关代码在满足相应条件后才会生效，经常用于响应式布局中。 媒体查询可以在不同的条件下设置不同样式，也特别适合于移动端响应式布局

有两种方案，一种是直接写在css中。

@media (min-width:700px) and (orientation: landscape) {
    .sidebar {
        display: none;
    }
}

还有一种方案是直接放html标签中，在满足条件下才会加载对应样式并生效

注意，就算不满足要求，也会去下载，只不过是满足要求后才生效而已。（就跟写css中效果一样）

<link href='xxx' rel='stylesheet' media='(min-width:700px)'>

有一些可能比较少见的：

@media print {
}

代表在打印模式下的样式，而且这种模式下，单位一般是pt

优先级

css选择器从右到左解析

虽然css选择器的生效规则是从左到右，依次可以覆盖之前的样式， 但是，CSS选择器的解析规则是从右往左解析的

原因是：为了更快的找到对应的样式，算是一种优化规则

因为实际过程中，拥有公共祖先节点的选择器可能会有不少， 这样会有一个问题时，前边的公用规则都解析了，然后最后一个不匹配， 然后就造成了浪费， 因此优化成从右到左解析，最后一个如果不匹配，直接就匹配失败， 减少匹配时间

CSS优先级算法如何计算？

  1. 行内style > id > class > tag（分别是权重1000、100、10、1）
  2. 同一个css文件内，最后声明的会覆盖
  3. 同一个标签类的class，最右侧的会覆盖其他
  4. 行内 > 内嵌(style中) > css文件
  5. !important拥有最高优先级（据说是100w）

口诀：

从0开始，一个行内样式+1000，一个id+100，一个属性选择器/class或者伪类+10，一个元素名，或者伪元素+1

譬如：

body #content .data img:hover

最终的权重值是0122；#content是一个id选择器加了100，.data是一个class类选择器加了10，：hover伪类选择器加了10， body和img是元素加了1

.parent span.hello

.parent span

上面的权重分别是：21与11（会计算所有的生效选择符号）

css的 !important属性作用是什么

忽略ie下的bug,!important的css定义可以让对于属性拥有最高的优先级(据说权重为100W)

注意:非到万不得已，尽量避免使用这个属性，要不然后续维护起来权重会混乱，变的麻烦

预(后)处理器

什么是CSS预处理器／后处理器？

  • 预处理器，如less,sass,stylus 用来预编译，一般里面会有支持变量、继承等，增加了复用性 而且还会有函数，循环，mixn，层级，很方便进行组件化开发，提高工作效率
  • 后处理器，如postcss 譬如用来补全不同浏览器下的兼容后缀，如-webkit等 这样可以基于css规范来编写，无法写的时候关注兼容问题，更有效率,也不易出错，而且源码会更少

有使用过css预处理器吗？喜欢哪个？

SASS, LESS, Stylus等，原理都是最终会编译打包成正式css运行

主要的方便之处是：

  • 支持变量，便于复用，特别是多套皮肤时
  • 支持嵌套，复杂的父子级关系时更为清晰

html基础

html5新特性

如何区分 HTML 和 HTML5

  1. 通过doctype声明，H5是DOCTYPE html
  2. 通过DOM架构中的一些标签，很多都是H5中才有

html5有哪些新特性、移除了那些元素 增加:

canvas
sessionStorage
localStorage
webworker
websocket
Geolocation
video
audio

标签元素
article
nav
footer
section
header
calendar
date
url
search

移除了一些:

表现型
basefont
big
center
font
s
strike
tt
u
可用型
frame
frameset
noframes
等

HTML5的一些特点

  1. H5不再基于SGML，而是作为一个独立的版本
  2. H5使用新的头部声明类别DOCTYPE html声明
  3. H5语言规则定义更为完善，H5减少了Flash的依赖，能够不依赖于Flash完成网页的功能
  4. H5对移动端的兼容很到位，目前几乎所有浏览器都支持H5。通过H5+CSS3，让移动开发成为主流。
  5. html5新增了自己独特的元素(video,canvas,footer标签等)

Html5新元素(如header、nav、footer、adide、article、section等标签，audio、video、 canvas、geolocation等新的元素)， 表单控件(calender、date、time、email、url、search)， 新的API(如localStorage、sessionStorage、indexedDB、websocket)， 增加离线缓存(可以通过manifest配置- )， 废弃了部分属性(如img废弃name、html废弃version、form废弃accept…)，

如何处理HTML5新标签的浏览器兼容问题

如canvas，一般会加一句当前浏览器不支持canvas，用来提示用户

IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签， 浏览器支持新标签后，还需要添加标签默认的样式

也可以直接使用成熟的框架、比如html5shim;

<!--[if lt IE 9]>
    <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->

html的几个版本以及html5？

首先，梳理下html的起源史，大概是这样的：

超文本标记语言(第一版) -- 在1993年6月发为互联网工程工作小组(IETF)工作草案发布(并非标准)

HTML 2.0 -- 1995年11月作为RFC 1866发布,在RFC 2854于2000年6月发布之后被宣布已经过时

HTML 3.2 -- 1996年1月14日,W3C推荐标准

HTML 4.0 -- 1997年12月18日,W3C推荐标准

HTML 4.01(微小改进) -- 1999年12月24日,W3C推荐标准

ISO/IEC 15445:2000("ISO HTML")--2000年5月15日发布,基于严格的HTML 4.01语法,是国际标准化组织和国际电工委员会的标准

XHTML 1.0 -- 发布于2000年1月26日,是W3C推荐标准,后来经过修订于2002年8月1日重新发布

XHTML 1.1 -- 于2001年5月31日发布（主要是初步进行了模块化）

XHTML 2.0 -- W3C工作草案

HTML5 -- 2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成。

简单的说

最常用的html版本有html 4.01和html5

XHTML 是 XML 风格的 HTML

HTML5 是下一代 HTML，取代 HTML 4.01

最大的不同：

H5是Html的新一代标准，而且不再是SGML(Standard Generalized Markup Language-标准通用标记语言)的子集。
而4.01之类的都属于SGML的一个子集

使用更简洁的头部
<!DOCTYPE html>

另外

HTML 没有1.0版本是因为当时有很多不同的版本。
第一个正式规范在为了和当时的各种HTML标准区分开来,使用了2.0作为其版本号

HTML 4.0同样也加入了很多特定浏览器的元素和属性，但是同时也开始"清理"这个标准，
把一些元素和属性标记为过时的，建议不再使用它们。HTML的和CSS结合更好。

尚未完成的XHTML 2.0标准，它要求强错误检查，于是没有人采用

参考:

www.pinhuba.com/html/101032…

html标准

style标签写在body后和body前有什么区别?

HTML标准一直是规定style不应该出现在body中

但网页也有容错：

如果style出现在body中(或者body后更是)，效果仍然和style中一样， 但是可能会引起fouc(Flash of Unstyled Content-无内容闪烁)，重绘或重新布局

把 Script 标签 放在页面的最底部的body封闭之前 和封闭之后有什么区别？浏览器会如何解析它们？

标准规定应该是放在body封闭之前

但实际上放之后，浏览器也是能正常解析的 但是这时候的解析规则是： “body标签闭合之后”后再出现script或任何元素的开始标签， 都是parse error，浏览器会忽略之前的，即视作仍旧在body内。所以实际效果和写在“body标签闭合之前”之前是没有区别的。

avatar
文章
阅读
粉丝