前端面试题归类-css

原创

肥晨

发布于 2023-02-16 10:05:23

1.6K0

文章被收录于专栏：CSSCSS 农民工前端

网页看着不方便，想要文档可以私聊我。要是有错别字和错误的地方，请各位大佬直接指出，谢谢啦！！

盒模型

说下盒模型?

有两种盒模型，W3C盒模型和IE盒模型。通常说的“IE盒子模型”指的是IE5.5，IE6及其以后，盒模型都为 content-box。当浏览器未设置<!doctype>声明时，盒模型都为 border-box。

通过 css3 的box-sizing属性，可以更改元素的盒子模型。标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。

标准盒模型 box-sizing: content-box

IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。IE盒模型 box-sizing: border-box

标准的CSS的盒子模型？

标准盒子模型：宽度=内容的宽度(content)+ border + padding + margin

与低版本IE的盒子模型有什么不同的？

低版本IE盒子模型：宽度=内容宽度(content+border+padding)+ margin

box-sizing属性？

用来控制元素的盒子模型的解析模式，默认为content-box

context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽

border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽

盒子模型在不同浏览器上的区别

盒子模型是CSS中一个重要的概念，理解了盒子模型才能更好的排版。盒子模型有两种，分别是IE盒子模型和标准W3C盒子模型。它们对盒子模型的解释各不相同，先看看我们熟知的标准盒子模型：

标准的w3c盒子模型的范围包括margin、border、padding、content，并且content部分不包含其他部分。

在来看下IE盒子模型：

IE盒子模型的范围也包括margin、border、padding、content，和标准w3c盒子模型不同的是：ie盒子模型的content部分包含了border和padding。

例如：

一个盒子的margin为20px，border为1px，padding为10px，content的宽为200px、高为50px，加入用标准盒子模型解释，那么这个盒子需要占据的位置为：

宽：20*2 + 1 * 2 + 10* 2 + 200 = 262px, 高：20 * 2 + 1 * 2 + 10 * 2 + 50 = 112px。

盒子的实际大小为：宽1*2 + 10 * 2 + 200 = 222px,高1* 2 + 10 * 2 + 50 = 72px。

假如用IE盒子模型，那么盒子需要占据的位置为：

宽：20 * 2 + 200 = 240px,高：20 * 2 + 50 = 70px。

盒子的实际大小：宽200px,高50px。

一般推荐使用W3C盒子模型，怎样才算是选择了标准W3C盒子模型呢？就是在网页上加DOCKTYPE申明。如果不加，那么各个浏览器会根据自己的行为去理解网页。

CSS3增加了box-sizing属性，值包括content-box|border-box|inherit。

在我们的重置样式文件中一般也会重置这个属性，把box-sizing设置成border-box方便于排版。

水平垂直居中

不定宽高水平垂直居中？

1.通过display：flex；justify-content:center; align-items:center;就可以让子元素不定宽高水平垂直居中

2.也可以父display：flex；，子设置一个margin：auto；

3.通过css3，给父元素设置相对定位，给子元素设置绝对定位，left：50% top：50% 通过transform：translate(-50%，-50%)拉回自身的宽和高的一半。

4.通过给父元素设置display：table-cell; vertical-align：middle text-align：center 给子元素设置vertical-align：middle text-align：center。就可以让子元素不定宽高水平垂直居中了。

文字在垂直和水平方向重叠的两个属性分别是什么？

垂直方向：line-height。设置成比字体高度还小就可以让两行重叠

水平方向：letter-spacing。设置为负值即可实现重叠。

如何居中div

-水平居中1：给 div 设置一个宽度，然后添加 margin:0 auto; 属性

div{

width: 200px;

margin: 0 auto;

}

-水平居中2：利用 text-align:center 实现

.container{

background: rgba(0, 0, 0, .5);

text-align: center:

font-size: 0;

}

.box{

display: inline-block;

width: 500px;

height: 400px;

background-color: pink;

}

-让绝对定位的div居中

div{

positionn: absolute;

width: 300px;

height: 300px;

margin: auto;

top: 0;

left: 0;

bottom: 0;

right: 0;

background-color: pink; /* 方便看效果 */

}

-水平垂直居中1

/* 确定容器的宽高，宽500高300 */

div{

position: absolute;

width:500px;

height: 300px;

top: 50%;

left: 50%;

margin: -150px 0 0 -250px;

background-color: pink;

}

-水平垂直居中2

/* 未知容器宽高，利用 transform 属性 */

div{

position: absolute;

width: 500px;

height: 300px;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

background-color: pink;

}

-水平垂直居中3

/* 利用 flex 布局实际使用时应考虑兼容性 */

.container{

display: flex;

align-items: center; /* 垂直居中 */

justify-content: center; /* 水平居中 */

}

.container div{

width: 100px;

height: 100px;

background-color: pink;

}

为什么margin: 0 auto会让div居中

margin 可以有4个值，分别对应影响的方向是上，右，下，左， 2个值的时候，对应第一个值是控制上下距离，第二个值是控制左右，所以magrgin：0 auto，就是上下距离为0，auto是自适应，这里指的是左右两个方向的距离一样，也就是说，不论你的宽度怎么变化，都是两个方向距离一样，形成居中。

要给居中元素一个宽度，否则无效

该元素不可以浮动，否则无效

BFC

什么是BFC？

BFC是W3C CSS2.1规范中的一个概念，在CSS3.0规范中已被修改为flow root。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。BFC(block formatting context)，中文为“块级格式化上下文”

对BFC的理解？

BFC规定了内部的Block Box如何布局。定位方案：

内部的Box会在垂直方向上一个接一个放置。
Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。
每个元素的margin box 的左边，与包含块border box的左边相接触。
BFC的区域不会与float box重叠。
BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
计算BFC的高度时，浮动元素也会参与计算。
1. float属性不为none 【会影响上级元素】
2. position为absolute或fixed 【会影响上机元素】
3. display为inline-block, table-cell, table-caption, flex, inline-flex
4. overflow不为visible, 【建议使用auto/hidden】
5. <html>根元素

如何触发BFC？

BFC解决了什么问题？

解决自适应两栏布局问题：利用BFC的区域不会与float box重叠的规则。

解决浮动后塌陷问题：利用计算BFC的高度时，浮动元素也参与计算规则。

解决垂直margin重叠问题：利用Box垂直方向的距离由margin决定。

属于同一个BFC(同一个标记)的两个相邻Box的margin会发生重叠规则，在一个box外包裹一个容器，让他生成不同的BFC，这样就不会margin重叠了。

为什么overflow:hidden能触发bfc？

块级格式化上下文 (Block Formatting Context)：

盒子在容器(包含块)内从上到下一个接一个地放置
两个兄弟盒之间的竖直距离由 margin 属性决定
同一个 BFC 内垂直 margin 会合并
盒子的左外边缘挨着容器(包含块)的左边

块级格式化上下文(BFC) 的特性

BFC 内的浮动不会影响到BFC外部的元素
BFC 的高度会包含其内的浮动元素
BFC 不会和浮动元素重叠
BFC 可以通过 overflow:hidden 等方法创建

所有要处理 margin 折叠，就需要让两个元素处于不同的BFC，overflow: hidden正好可以触发BFC

Position

Position定位值有哪些？

static(默认)：按照正常文档流进行排列；

relative:相对定位一般给父元素设置

absolute:绝对定位一般给子元素设置相对父元素或祖先带定位样式的元素定位

fixed :固定在某个位置，相对浏览器窗口固定在一个位置

Inherit:继承父元素的position值。

absolute的containing block计算方式跟正常流有什么不同？

无论属于哪种，都要先找到其祖先元素中最近的 position 值不为 static 的元素，然后再判断：

若此元素为 inline 元素，则 containing block 为能够包含这个元素生成的第一个和最后一个 inline box 的 padding box (除 margin, border 外的区域) 的最小矩形；
否则,则由这个祖先元素的 padding box 构成。

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

补充：

static(默认的)/relative：简单说就是它的父元素的内容框(即去掉padding的部分)
absolute: 向上找最近的定位为absolute/relative的元素
fixed: 它的containing block一律为根元素(html/body)

display

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

inline(默认)–内联 none–隐藏 block–块显示 table–表格显示 list-item–项目列表 inline-block

display:none与visibility：hidden的区别？

display：none 不显示对应的元素，在文档布局中不再分配空间(回流+重绘) visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间(重绘)

即是，使用CSS display:none属性后，HTML元素(对象)的宽度、高度等各种属性都将“丢失”；而使用visibility:hidden属性后，HTML元素(对象)仅仅是在视觉上看不见(完全透明)，而它所占据的空间位置任然存在。

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

有空格时候会有间隙解决：移除空格
margin正值的时候解决：margin使用负值
使用font-size时候解决：font-size:0、letter-spacing、word-spacing

overflow属性定义溢出元素内容区的内容会如何处理?

参数是scroll时候，必会出现滚动条。参数是auto时候，子元素内容大于父元素时出现滚动条。参数是visible时候，溢出的内容出现在父元素之外。参数是hidden时候，溢出隐藏。

visibility属性有个collapse属性值？在不同浏览器下以后什么区别？

当一个元素的visibility属性被设置成collapse值后，对于一般的元素，它的表现跟hidden是一样的。

chrome中，使用collapse值和使用hidden没有区别。
firefox，opera和IE，使用collapse值和使用display：none没有什么区别。

position跟display、overflow、float这些特性相互叠加后会怎么样？

display属性规定元素应该生成的框的类型；position属性规定元素的定位类型；float属性是一种布局方式，定义元素在哪个方向浮动。类似于优先级机制：position：absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。float 或者absolute定位的元素，只能是块元素或表格。

float浮动

为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？

浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。浮动带来的问题：

父元素的高度无法被撑开，影响与父元素同级的元素
与浮动元素同级的非浮动元素(内联元素)会跟随其后
若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。

清除浮动的方式：

父级div定义height
最后一个浮动元素后加空div标签并添加样式clear:both。
包含浮动元素的父标签添加样式overflow为hidden或auto。
父级div定义zoom

设置元素浮动后，该元素的display值是多少？

自动变成display:block

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

何时使用margin：

需要在border外侧添加空白
空白处不需要背景色
上下相连的两个盒子之间的空白，需要相互抵消时。
需要在border内侧添加空白
空白处需要背景颜色
上下相连的两个盒子的空白，希望为两者之和。

何时使用padding：

兼容性的问题：在IE5 IE6中，为float的盒子指定margin时，左侧的margin可能会变成两倍的宽度。通过改变padding或者指定盒子的display：inline解决。

选择器

CSS常用选择器

标签选择器
ID选择器
类选择器
组选择器
通配符选择器
后代选择器
子元素选择器
伪类选择器

哪些属性可以继承？

可继承的属性：font-size, font-family, color

不可继承的样式：border, padding, margin, width, height

优先级(就近原则)：!important > [ id > class > tag ] !important 比内联优先级高

CSS优先级算法如何计算？

元素选择符： 1 class选择符： 10 id选择符：100 元素标签：1000

!important声明的样式优先级最高，如果冲突再进行计算。
如果优先级相同，则选择最后出现的样式。
继承得到的样式的优先级最低。

CSS3新增伪类有那些?

p:first-of-type 选择属于其父元素的首个元素 p:last-of-type 选择属于其父元素的最后元素 p:only-of-type 选择属于其父元素唯一的元素 p:only-child 选择属于其父元素的唯一子元素 p:nth-child(2) 选择属于其父元素的第二个子元素 :enabled :disabled 表单控件的禁用状态。 :checked 单选框或复选框被选中。

::before 和 :after 中双冒号和单冒号的区别？这2个伪元素的作用？

·在 CSS3 中 : 表示伪类， :: 表示伪元素

·想让插入的内容出现在其他内容前，使用::befroe。否则，使用::after

Flex布局

常见父项的属性：

●flex-direction :设置主轴的方向

Row 默认值从左到右

row-reverse 从右到左

column 从上到下

column-reverse 从下到上

●justify-content :设置主轴上的子元素排列方式

flex-start 默认值从头部开始如果主轴是x轴，则从左到右

flex-end 从尾部开始排列(但元素的顺序还是从左到右)

center 在主轴居中对齐(如果主轴是x轴则水平居中)

space- around 平分剩余空间

space – between 先两边贴边再平分剩余空间(重要)

●flex-wrap :设置子元素是否换行

默认情况下,项目都排在一条线(又称”轴线”) 上。flex-wrap属性定义 , flex布局中默认是不换行的。

nowrap 默认值，不换行

wrap 换行

●align-content :设置侧轴上的子元素的排列方式(多行)

设置子项在侧轴.上的排列方式并且只能用于子项出现换行的情况(多行) , 在单行下是没有效果的。

flex-start 默认值在侧轴的头部开始排列

flex- end 在侧轴的尾部开始排列

center 在侧轴中间显示

space-around 子项在侧轴平分剩余空间

space- between 子项在侧轴先分布在两头,再平分剩余空间

stretch 设置子项元素高度平分父元素高度

●align-items :设置侧轴上的子元素排列方式(单行)

该属性是控制子项在侧轴(默认是y轴).上的排列方式在子项为单项(单行)的时候使用

flex-start 从上到下

flex- end 从下到上

center 挤在一起居中(垂直居中)

stretch 拉伸(默认值但是子盒子如果给高度就不会生效)

●flex-flow :复合属性,相当于同时设置了flex-direction和flex-wrap

flex-dicection: column; flex-wrap: wrap; 它俩的简写可以写成： flex-flow: column wrap;

常见子项的属性：

●flex子项目占的份数

flex属性定义子项目分配剩余空间,用flex来表示占多少份数。

●align-self控制子项自己在侧轴的排列方式

align-self属性允许单个项目有与其他项目不-样的对齐方式，可覆盖align-items属性。

默认值为auto ,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。

span:nth-child(2){ /*设置自己在侧轴的排列方式*/ align-self:flex-end; }

●order属性定义子项的排列顺序(前后顺序)

数值越小,排列越靠前,默认为0。(这个是左右的形式)

注意:和z-index不-样。(index是叠罗汉的形式)

flex属性flex:1到底是什么？

flex属性 是 flex-grow、flex-shrink、flex-basis三个属性的缩写。

推荐使用此简写属性，而不是单独写这三个属性。

flex-grow：定义项目的的放大比例；

默认为0，即使存在剩余空间，也不会放大；

所有项目的flex-grow为1：等分剩余空间(自动放大占位)；

flex-grow为n的项目，占据的空间(放大的比例)是flex-grow为1的n倍。

flex-shrink：定义项目的缩小比例；

默认为1，即如果空间不足，该项目将缩小；

所有项目的flex-shrink为1：当空间不足时，缩小的比例相同；

flex-shrink为0：空间不足时，该项目不会缩小；

flex-shrink为n的项目，空间不足时缩小的比例是flex-shrink为1的n倍。

flex-basis：定义在分配多余空间之前，项目占据的主轴空间(main size)，浏览器根据此属性计算主轴是否有多余空间，

默认值为auto，即项目原本大小；

设置后项目将占据固定空间。

所以flex属性的默认值为：0 1 auto (不放大会缩小)

flex为none：0 0 auto (不放大也不缩小)

flex为auto：1 1 auto (放大且缩小)

flex为一个非负数字n：该数字为flex-grow的值，

flex：n ；= flex-grow：n； flex-shrink：1； flex-basis：0%;

flex为两个非负数字n1，n2：分别为flex-grow和flex-shrink的值。

flex：n1 n2；= flex-grow：n1； flex-shrink：n2； flex-basis：0%;

flex为一个长度或百分比L：视为flex-basis的值，

flex：L；= flex-grow：1； flex-shrink：1； flex-basis：L;

flex为一个非负数字n和一个长度或百分比L：分别为flex-grow和flex-basis的值，

flex：n L；= flex-grow：n； flex-shrink：1； flex-basis：L;

可以发现，flex-grow和flex-shrink在flex属性中不规定值则为1，flex-basis为0%。

flex：1即为flex-grow：1，经常用作自适应布局，将父容器的display：flex，侧边栏大小固定后，将内容区flex：1，内容区则会自动放大占满剩余空间。

请解释一下flexbox(弹性盒布局模型),以及适用场景？

该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。试用场景：弹性布局适合于移动前端开发，在Android和ios上也完美支持。

如何让DOM元素不显示在浏览器的可视范围内？

最基本的：

设置display属性为none，或者设置visiblity为hidden

技巧性：

设置高度为0，设置透明度为0，设置z-index位置在-1000

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

第一种真正的品字：

三块高宽是确定的；
上面那块用margin: 0 auto;居中；
下面两块用float或者inline-block不换行；
用margin调整位置使他们居中。

第二种全屏的品字布局: 上面的div设置成100%，下面的div分别宽50%，然后使用float或者inline使其不换行。

兼容

常见的兼容性问题？

不同浏览器的标签默认的margin和padding不一样。*{margin:0;padding:0;}
IE6双边距bug：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大。hack：display:inline;将其转化为行内属性。
渐进识别的方式，从总体中逐渐排除局部。首先，巧妙的使用“9”这一标记，将IE浏览器从所有情况中分离出来。接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。

{

background-color: #f1ee18;/*所有识别*/

. background-color: #00deff\9; /*IE6、7、8识别*/

+background-color:#a200ff;/*IE6、7识别*/

_background-color:#1e0bd1;/*IE6识别*/

}

设置较小高度标签(一般小于10px)，在IE6，IE7中高度超出自己设置高度。hack：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
IE下，可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性；Firefox下，只能使用getAttribute()获取自定义属性。解决方法:统一通过getAttribute()获取自定义属性。
Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。
超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了。解决方法是改变CSS属性的排列顺序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}

浏览器兼容性有哪些

1. 浏览器默认的 margin 和 padding 不同

解决：加一个全局 *{ margin: 0; padding: 0; }来统一

2. 谷歌中文界面下默认会将小于12px 的文本强制按照12px显示

解决：使用-webkit-transform:scale(.75);收缩的是整个span盒子大小，这时候，必须将span准换成块元素。

3.超链接访问过后hover样式就不会出现了，被点击访问过的超链接样式不再具有hover 和active 了

解决：改变css 属性的排列顺序L-V-H-A

CSS 预处理器

Less sass

Sass、Less是什么？为什么要使用？

他们是CSS预处理器。他是CSS上的一种抽象层。它们是一种特殊的语法、语言编译成CSS。

例如Less是一种动态样式语言。将CSS赋予了动态语言的特性，如变量，继承，运算，函数。Less即可以在客户端上运行(支持IE6+,Webkit,Firefox)，也可以在服务端运行(借助Node.js)。

Sass变量必须是$开始，而Less变量必须使用@符号开始。

为什么要使用它们？

结构清晰，便于扩展。

可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无异议的机械劳动。

可以轻松实现多重继承。

完全兼容CSS代码，可以方便地应用到老项目中。Less只是在CSS语法上做了扩展，所以老的CSS代码也可以与Less代码一同编译。

CSS 3的新增特性？

ie9开始支持

1.选择器增加；

2.样式增加：常用

比如：圆角。阴影，渐变背景，半透明，图片边框等；

3.新增的背景样式：

背景图片的显示范围，和起点，缩放。

4.引入了flex弹性盒模型；常用

5.阴影效果；文本及盒子阴影。常用

6.颜色与透明；

新增了HSL/HSLA/RGBA几种颜色模式；

7.web字体和web图标常用

@font-face{ font-family: myFont; src: url('') } div{ font-family: myFont }

8.和容器的变形；常用

transform: translate(50px,100px);平移

transform: rotate(30deg);旋转

transform: scale(2,4);缩放

transform: skew(30deg,20deg);翻转

9.过度动画和交互；常用

transition过度和animation动画

10.word-wrap(对长的不可分割单词换行)word-wrap：break-word

11.媒体查询：定义两套css，当浏览器的尺寸变化时会采用不同的属性

CSS 创建一个三角形

把上、左、右三条边隐藏掉(颜色设为 transparent)

#demo { width: 0; height: 0; border-width: 20px; border-style: solid; border-color: transparent transparent red transparent; }

CSS 初始化样式是为什么？

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

CSS 优化提高性能的方法有哪些？

答案一：

避免过度约束
避免后代选择符
避免链式选择符
使用紧凑的语法
避免不必要的命名空间
避免不必要的重复
最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么
避免！important，可以选择其他选择器
尽可能的精简规则，你可以合并不同类里的重复规则

答案二：

加载性能：

① CSS 压缩：将写好的CSS 进行打包压缩，可以减少很多的体积。

② CSS单一样式：当需要下边距和左边距的时候，很多时候选择：margin: top 0 bottom 0;

但margin-top: top;margin-bottom: bottom;执行的效率更高。

选择器性能：

① 关键选择器。选择器的最后面的部分为关键选择器(即用来匹配目标元素的部分)

CSS 选择器是怎样被浏览器解析的？

CSS选择器的解析是从右向左解析的。若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点(叶子节点)，而从左向右的匹配规则的性能都浪费在了失败的查找上面。而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree，最终用来进行绘图。在建立 Render Tree 时(WebKit 中的「Attachment」过程)，浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果(Style Rules)来确定生成怎样的 Render Tree。

CSS Sprites

将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的 background-image，background- repeat，background-position 的组合进行背景定位。利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能；CSS Sprites能减少图片的字节。

CSS Hack是什么?ie6,7,8的hack分别是什么？

针对不同的浏览器写不同的CSS Code的过程，就是CSS Hack。实例如下：

#test{

width: 300px;

height: 300px;

background-color: blue;

background-color: red\9; /* all ie */

background-color: yellow\0; /* ie8 */

+background-color: pink; /* ie7 */

_background-color: orange; /* ie6 */

:root #test{

background: purple\9; /* ie9 */

}

@media all and {min-width: 0px} #test{background-color: black\0;} /* opera */

@media screen and {-webkit-min-device-pixel-ratio: 0 } {#test {background-color: gray}} /* chrome and safari */

}

@media可以针对不同的媒体类型定义不同的样式。特别是如果你需要设计响应式的页面，@media是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器宽度和高度重新渲染页面。

CSS 引入方式？

外部样式表。引入一个外部CSS文件；

内部样式表。将CSS代码放在<head>标签内部；

内联样式，将CSS样式直接定义在HTML元素内部；

移动端的布局用过媒体查询吗？

通过媒体查询可以为不同大小和尺寸的媒体定义不同的css，适应相应的设备的显示。

<head>里边<link rel=”stylesheet” type=”text/css” href=”xxx.css” media=”only screen and (max-device-width:480px)”>
CSS : @media only screen and (max-device-width:480px) {/css样式/}

在网页中的应该使用奇数还是偶数的字体？为什么呢？

使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。Windows 自带的点阵宋体(中易宋体)从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px时用的是小一号的点。(即每个字占的空间大了 1 px，但点阵没变)，于是略显稀疏。

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

当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。

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

原理：有点类似于轮播，整体的元素一直排列下去，假设有5个需要展示的全屏页面，那么高度是500%，只是展示100%，剩下的可以通过transform进行y轴定位，也可以通过margin-top实现
overflow：hidden；transition：all 1000ms ease；

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

响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。页面头部必须有meta声明的viewport。

视差滚动效果？

视差滚动(Parallax Scrolling)通过在网页向下滚动的时候，控制背景的移动速度比前景的移动速度慢来创建出令人惊叹的3D效果。

CSS3实现优点：开发时间短、性能和开发效率比较好，缺点是不能兼容到低版本的浏览器
jQuery实现通过控制不同层滚动速度，计算每一层的时间，控制滚动效果。优点：能兼容到各个版本的，效果可控性好缺点：开发起来对制作者要求高
插件实现方式例如：parallax-scrolling，兼容性十分好

line-height的理解？

行高是指一行文字的高度，具体说是两行文字间基线的距离。CSS中起高度作用的是height和line-height，没有定义height属性，最终其表现作用一定是line-height。单行文本垂直居中：把line-height值设置为height一样大小的值可以实现单行文字的垂直居中，其实也可以把height删除。多行文本垂直居中：需要设置display属性为inline-block。

让页面里的字体变清晰，变细用CSS怎么做？

-webkit-font-smoothing在window系统下没有起作用，但是在IOS设备上起作用-webkit-font-smoothing：antialiased是最佳的，灰度平滑。

如果需要手动写动画，你认为最小时间间隔是多久，为什么？多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。

li与li之间不可见空白间隔引起原因？解决办法？

行框的排列会受到中间空白(回车空格)等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。解决方法：

可以将<li>代码全部写在一排
浮动li中float：left
在ul中用font-size：0(谷歌不支持)；可以使用letter-space：-3px

width: auto 和 width: 100% 的区别

width: 100% 会使元素box的宽度等于父元素的contentbox的宽度

width: auto 会时元素撑满整个父元素，margin, border, padding, content 区域会自动分配水平空间

有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度

外层div使用position：relative；高度要求自适应的div使用position: absolute; top: 100px; bottom: 0; left: 0

png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？

png是便携式网络图片(Portable Network Graphics)是一种无损数据压缩位图文件格式.优点是：压缩比高，色彩好。大多数地方都可以用。
jpg是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的不错。在www上，被用来储存和传输照片的格式。
gif是一种位图文件格式，以8位色重现真色彩的图像。可以实现动画效果.
webp格式是谷歌在2010年推出的图片格式，压缩率只有jpg的2/3，大小比png小了45%。缺点是压缩的时间更久了，兼容性不好，目前谷歌和opera支持。

style标签写在body后与body前有什么区别？

页面加载自上而下当然是先加载样式。写在body标签后由于浏览器以逐行方式对HTML文档进行解析，当解析到写在尾部的样式表(外联或写在style标签)会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE下可能会出现FOUC现象(即样式失效导致的页面闪烁问题)

使用 base64 编码的优缺点

base64编码是一种图片处理格式，通过特定的算法将图片编码成一长串字符串，

在页面上显示时可用该字符串来代替图片的url属性

使用base64的优点：

① 减少一个图片的 HTTP 请求

使用base64的缺点：

① 根据base64的编码原理，编码后的大小会比源文件大小大1/3，如果把大图片编码到html/css中，

不仅会造成文件体积增加，影响文件的加载速度，还会增加浏览器对html或css文件解析渲染的时间。

② 使用base64无法直接缓存，要缓存只能缓存包含base64的文件，比如HTML 或CSS，

这相比于直接缓存图片的效果要差很多。

③ ie8以前的浏览器不支持

一般一些网站的小图标可以使用base64图片引入

超链接访问过后hover样式就不出现的问题时什么？如何解决？

被点击访问过的超链接样式不再具有hover和active了，解决方式是改变CSS属性的排列顺序：L-V-H-A(linked, visited, hover, active)。

rgba()和opacity的透明效果有什么区别？

rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，而rgba()只作用于元素的颜色或起背景色。设置rgba透明的元素的子元素不会继承透明效果。

px和em的区别

px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em的值不是固定的，并且em会继承父级元素的字体大小。

浏览器的默认字体高度都是16px。所以未经调整的浏览器都符合：1em=16px。那么12px=0.75em, 10px = 0.625em。

描述一个“reset”的css文件并如何使用它。知道normalize.css吗？你了解他们的不同之处吗?

重置样式非常多，凡是一个前端开发人员肯定会有一个常用的重置css文件并知道如何使用它们。他们是盲目的在做还是知道为什么这么做呢？原因是不同的浏览器对一些元素有不同的的默认样式，如果你不处理，在不同浏览器下回存在必要的风险，或者更有戏剧性发生。

你可能会用Normalize来代替你的重置样式文件。它没有重置所有的样式风格，但仅提供一套合理的默认样式值。既能够让众多浏览器达到一致和合理，但不扰乱其他的东西(如粗体的标题)。

content有什么用？有什么应用？

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

最常见的应用是利用伪类清除浮动：

CSS Code复制内容到剪贴板

//一种常见利用伪类清除浮动的代码

.clearfix:after {

content:"."; //这里利用到了content属性

display:block;

height:0;

visibility:hidden;

clear:both; }

.clearfix {

*zoom:1;

}

after伪元素通过content在元素的后面生成一个点的块级元素，再利用clear: both清除浮动。

网页看着不方便，想要文档可以私聊我。要是有错别字和错误的地方，请各位大佬直接指出，谢谢啦！！

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

css

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

css

#前端面试题