CSS面试题整理汇总

1、面试官:说说你对盒子模型的理解?

CSS盒模型本质上是一个盒子,它包括:content、padding、border、margin。CSS 中的盒子模型包括IE 盒子模型和标准的 W3C 盒子模型。

在标准的盒子模型中,width 指 content 部分的宽度。

在 IE 盒子模型中,width 表示 content+padding+border 这三个部分的宽度

故在计算盒子的宽度时存在差异:

标准盒模型: 一个块的总宽度= width+margin(左右)+padding(左右)+border(左右)

怪异盒模型: 一个块的总宽度= width+margin(左右)(既 width 已经包含了 padding 和 border值)

2、box-sizing属性

CSS中的 box-sizing 属性定义了引擎应该如何计算一个元素的总宽度和总高度

box-sizing:content-box|border-box|inherit:

content-box:元素的 width/height 不包含padding,border,。【标准盒子模型】

border-box:元素的 width/height 包含 padding,border。【IE 盒子模型】

inherit:继承父元素的 box-sizing 值。

3、面试官:css选择器有哪些?优先级?哪些属性可以继承?

关于css属性选择器常用的有:

id选择器(#myid)

类选择器(.myclass)

属性选择器(a[rel="external"])

伪类选择器(a:hover, li:nth-child)

标签选择器(div, h1,p)

兄弟选择器(h1 + p)

子选择器(ul > li)

后代选择器(li a)

通配符选择器(*)

优先级:

!important

内联样式(1000)

ID选择器(0100)

类选择器/属性选择器/伪类选择器(0010)

元素选择器/伪元素选择器(0001)

关系选择器/通配符选择器(0000)

带!important 标记的样式属性优先级最高; 样式表的来源相同时:!important> 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

继承属性:

字体系列属性

font-family

font-weight

font-size

font-style

字体

字体的粗细

字体的尺寸

字体的风格

文本系列属性

text-indent

text-align

line-height

direction

color

文本缩进

文本水平设置

行高

书写方向

文本颜色

元素可见性visibility等

无继承的属性:

display

文本属性:vertical-align、text-decoration、

背景属性、盒子模型的属性、定位属性等

4、面试官:说说em/px/rem/vh/vw区别?

px:绝对单位,页面按精确像素展示

em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算,整个页面内1em不是一个固定的值

rem:相对单位,相对的只是HTML根元素font-size的值

vw,就是根据窗口的宽度,分成100等份,100vw就表示满宽,同理,vh则为窗口的高度vh、vw:主要用于页面视口大小布局,在页面布局上更加方便简单

5、面试官:css中,有哪些方式可以隐藏页面元素?区别?

通过css实现隐藏元素方法有如下:

1、display:none 将元素设置为display:none后,元素在页面上将彻底消失,导致浏览器的重排和重绘,无法响应点击事件。

2、visibility:hidden 仅仅是隐藏该元素,DOM结果均会存在,只是当时在一个不可见的状态,不会触发重排,但是会触发重绘,无法响应点击事件。

3、opacity:0 将元素的透明度设置为0后,元素也是隐藏的,不会引发重排,一般情况下也会引发重绘,可以响应点击事件

4、设置height、width模型属性为0 将元素的height和width等影响元素盒模型的属性设置成0,如果元素内有子元素或内容,还应该设置其overflow:hidden来隐藏其子元素,无法响应点击事件

5、position:absolute 将元素移出可视区域 top: -9999px; left:-9999px; 特点:元素不可见,不影响页面布局

6、面试官:谈谈你对BFC的理解?

BFC(Block Formatting Context),即块级格式化上下文,它是页面中的一块渲染区域,并且有一套属于自己的渲染规则:

1、内部的盒子会在垂直方向上一个接一个的放置

2、对于同一个BFC的俩个相邻的盒子的margin会发生重叠,与方向无关。

3、每个元素的左外边距与包含块的左边界相接触(从左到右),即使浮动元素也是如此

4、BFC的区域不会与float的元素区域重叠

5、计算BFC的高度时,浮动子元素也参与计算

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

如何创建BFC?

1、根元素,即HTML元素

2、float的值不为none

3、position为absolute或fixed

4、display的值为inline-block、table-cell、table-caption

5、overflow的值不为visible

BFC应用场景

1、防止margin重叠(塌陷)

2、清除内部浮动

3、自适应多栏布局等

7、面试官:元素水平垂直居中的方法有哪些?

一、水平居中

对于行内元素 : text-align: center;

对于确定宽度的块级元素:

(1)width和margin实现。margin: 0 auto;

(2)绝对定位和margin-left: (父width - 子width)/2,前提是父元素position: relative

对于宽度未知的块级元素

(1)inline-block实现水平居中方法。子元素display:inline-block和父元素text-align:center实现水平居中。

(2)绝对定位+transform,translateX可以移动本身元素的50%。

(3)flex布局父元素使用justify-content:center

(4)table标签配合margin左右auto实现水平居中。使用table标签,再通过给该标签添加左右margin为auto。

二、垂直居中

1、利用 line-height 实现居中,这种方法适合纯文字类

2、通过设置父容器 相对定位 ,子级设置绝对定位,标签通过margin实现自适应居中

3、弹性布局 flex :父级设置display: flex; 子级设置margin为auto实现自适应居中

4、父级设置相对定位,子级设置绝对定位,并且通过位移 transform 实现

5、table 布局,父级通过转换成表格形式,然后子级设置 vertical-align 实现。

8、面试官:如何实现两栏布局,右侧自适应?三栏布局中间自适应呢?

两栏布局:

两栏布局实现效果就是将页面分割成左右宽度不等的两列,宽度较小的列设置为固定宽度,剩余宽度由另一列撑满。

实现思路1:

1、float 左浮左边栏

2、使用 margin-left 撑出内容块做内容展示

3、级元素添加BFC,防止下方元素飞到上方内容,如overflow: hidden

实现思路2:

flex弹性布局

父盒子display: flex,左侧盒子写入宽度,右侧盒子flex: 1占一份

三栏布局

三栏布局按照左中右的顺序进行排列,通常中间列最宽,左右两列次之

实现思路:

1、两边使用 float,中间使用 margin

2、使用 absolute,中间使用 margin

3、圣杯布局,利用margin负值法(详细解释)

使用圣杯布局首先需要在center元素外部包含一个div,包含div需要设置float属性使其形成一个BFC,并设置宽度为百分之百,这样中间盒子独占一行,左右盒子被挤到下方,让左边的盒子上去要设置margin-left:-100%,让右边的盒子上去要设置margin-left: 负自身宽度

4、使用 display: table 实现

5、使用flex实现 将父级设置为display: flex; justify-content: space-between;即可

6、grid网格布局

设置display: grid; width: 100%; grid-template-columns: 300px auto 300px;即可

9、面试官:说说flexbox(弹性盒布局模型),以及适用场景?

关于flex常用的属性,我们可以划分为容器属性和容器成员属性,

一、容器属性

flex-direction:决定主轴的方向flex-direction: row | row-reverse |column | column-reverse;

flex-wrap:决定换行规则 flex-wrap: nowrap | wrap |wrap-reverse;

flex-flow: flex-direction属性和flex-wrap属性的简写形式

justify-content:对其方式,水平主轴对齐方式

1、space-between:两端对齐,项目之间的间隔都相等

2、space-around:两个项目两侧间隔相等

align-items:对齐方式,竖直轴线方向

align-content:定义了多根轴线的对齐方式

二、项目的属性(元素的属性):

order属性:定义项目的排列顺序,顺序越小,排列越靠前,默认为 0

flex-grow属性:定义项目的放大比例,默认为0,即使存在空间,也不会放大

flex-shrink属性:定义了项目的缩小比例,当空间不足的情况下会等比例的缩小,如果 定义个item 的 flow-shrink 为 0,则为不缩小

flex-basis属性:定义了在分配多余的空间,项目占据的空间。

flex:是 flex-grow 和 flex-shrink、flex-basis 的简写,默认值为 0 1 auto。

align-self:允许单个项目与其他项目不一样的对齐方式,可以覆盖

10、flex实现div左上角、中间、左下角布局css

父级设置 子级利用绝对定位,自由移动到页面的不同位置,例左上角。

display:flex;

position:relative;

flex-direction:row;

justify-content:space-around;

align-items:center;

11、面试官:清除浮动的方式有哪几种?

1、添加额外标签 给父级添加

2、父级添加overflow属性,或者设置高度

3、建立伪类选择器清除浮动(下面案例)或者4、使用before和after双伪元素清除浮动

.parent:after{

/* 设置添加子元素的内容是空*/

content: '';

/* 设置添加子元素为块级元素*/

display: block;

/* 设置添加的子元素的高度0*/

height: 0;

/* 设置添加子元素看不见*/

visibility: hidden;

/* 设置clear:both */

clear: both;

}

12、面试官:CSS3新增了哪些新特性?

一、选择器

css3中新增了一些选择器,主要包括属性选择器、结构伪类选择器、伪元素选择器等

二、新样式

边框

背景

border-radius

创建圆角边框

background-clip

确定背景画区

box-shadow

为元素添加阴影

background-origin

确定图片对齐点

border-image

使用图片来绘制边框

background-size

调整背景图片大小

box-shadow

设置元素阴影

文字

颜色

word-wrap

允许在单词内换行

rgba

text-overflow

超过容器边界如何显示

rgba分为两部分,rgb为颜色值,a为透明度

text-shadow

向文本应用阴影

text-decoration

对文字更深层次的渲染

三、transition过渡

transition属性可以被指定为一个或多个CSS属性的过渡效果,多个属性之间用逗号进行分隔,语法如下:

transition: CSS属性,花费时间,效果曲线(默认ease),延迟时间(默认0)

四、transform 转换

transform属性允许你旋转,缩放,倾斜或平移给定元素

五、animation 动画

六、渐变:linear-gradient:线性渐变

background-image:linear-gradient(direction, color-stop1, color-stop2, ...);

、关于css3其他的新特性还包括flex弹性布局、Grid栅格布局

13、面试官:css3动画有哪些?

css实现动画的方式,有如下几种:

1、transition 实现渐变动画 过渡简写:transition: all 2s ease-in 500ms;

2、transform 转变动画

包含四个常用的功能:translate:位移scale:缩放rotate:旋转skew:倾斜

3、animation 实现自定义动画

通过 @keyframes 来定义关键帧

14、面试官:如果要做优化,CSS提高性能的方法有哪些?

实现方式有很多种,主要有如下:

1、内联首屏关键CSS:通过内联css关键代码能够使浏览器在下载完html后就能立刻渲染

2、异步加载CSS:

3、资源压缩:利用webpack等模块化工具,将css代码进行压缩,使文件变小,大大降低了浏览器的加载时间

4、合理使用选择器:不要嵌套使用过多复杂选择器

5、减少使用昂贵的属性:在页面发生重绘的时候,昂贵属性如box-shadow/border-radius/filter/透明度/:nth-child等,会降低浏览器的渲染性能

6、不要使用@import:@import会影响浏览器的并行下载,使得页面在加载时增加额外的延迟,增添了额外的往返耗时

15、面试官:浏览器重绘与重排的区别?

重排/回流(Reflow):当DOM的变化影响了元素的几何信息,浏览器需要重新计算元素的几何属性,将其安放在界面中的正确位置,这个过程叫做重排。表现为重新生成布局,重新排列元素。

重绘(Repaint): 当一个元素的外观发生改变,但没有改变布局,重新把元素外观绘制出来的过程,叫做重绘。表现为某些元素的外观被改变

当浏览器完成重排之后,将会重新绘制受到此次重排影响的部分。重排和重绘代价是高昂的,它们会破坏用户体验,并且让UI展示非常迟缓,而相比之下重排的性能影响更大,在两者无法避免的情况下,一般我们宁可选择代价更小的重绘。

重绘不一定会出现重排,重排必然会出现重绘

如何触发重排和重绘?

任何改变用来构建渲染树的信息都会导致一次重排或重绘:

1、添加、删除、更新DOM节点

2、通过display: none隐藏一个DOM节点-触发重排和重绘

3、通过visibility: hidden隐藏一个DOM节点-只触发重绘,因为没有几何变化

4、移动或者给页面中的DOM节点添加动画

5、添加一个样式表,调整样式属性

6、用户行为,例如调整窗口大小,改变字号,或者滚动。

如何避免重绘或者重排?

1、集中改变样式,不要一条一条地修改 DOM 的样式。

2、不要把 DOM 结点的属性值放在循环里当成循环里的变量。

3、为动画的 HTML 元件使用 fixed 或 absolute 的 position,那么修改他们的 CSS 是不会reflow 的。

4、不使用 table 布局。因为可能很小的一个小改动会造成整个 table 的重新布局。

5、尽量只修改position:absolute或fixed元素,对其他元素影响不大

6、动画开始GPU加速,translate使用3D变化

7、将元素提升为合成层

16、面试官:什么是响应式设计?响应式设计的基本原理是什么?如何做?

响应式网站设计是一种网络页面设计布局,页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整

响应式设计的基本原理:通过媒体查询检测不同的设备屏幕尺寸做处理,为了处理移动端,页面头部必须有meta声明viewport

实现响应式布局的方式有如下:1、媒体查询 2、百分比 3、vw/vh 4、rem

媒体查询语法:

@mediascreen (min-width: 375px) and (max-width: 600px) {
  body {
    font-size: 18px;
  }
}

响应式布局优点:1、面对不同分辨率设备灵活性强2、能够快捷解决多设备显示适应问题

缺点:

1、仅适用布局、信息、框架并不复杂的部门类型网站

2、兼容各种设备工作量大,效率低下

17、面试官:如何实现单行/多行文本溢出的省略样式?

一、单行文本溢出省略

1、text-overflow: ellipsis:规定当文本溢出时,显示省略符号来代表被修剪的文本

2、white-space:nowrap:设置文字在一行显示,不能换行

3、overflow:hidden:文字长度超出限定宽度,则隐藏超出的内容

二、多行文本溢出省略

基于行数截断

-webkit-line-clamp:2:用来限制在一个块元素显示的文本的行数,为了实现该效果,它需要组合其他的WebKit属性)

display:-webkit-box:和1结合使用,将对象作为弹性伸缩盒子模型显示

-webkit-box-orient:vertical:和1结合使用 ,设置或检索伸缩盒对象的子元素的排列方式

overflow:hidden:文本溢出限定的宽度就隐藏内容

text-overflow:ellipsis:多行文本的情况下,用省略号“…”隐藏溢出范围的文本

18、面试官:如何使用css完成视差滚动效果?

视差滚动(Parallax Scrolling)是指多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验

可以使用transform:translate3D来实现

transform:css3 属性,可以对元素进行变换(2d/3d),包括平移 translate,旋转 rotate,缩放 scale,

perspective:css3 属性,当元素涉及 3d 变换时,perspective 可以定义我们眼睛看到的 3d 立体效果,即空间感

这种方式实现视觉差动的原理如下:

1、容器设置上 transform-style: preserve-3d 和 perspective: xpx,那么处于这个容器的子元素就将位于3D空间中,

2、子元素设置不同的 transform: translateZ(),这个时候,不同元素在 3D Z轴方向距离屏幕(我们的眼睛)的距离也就不一样

3、滚动滚动条,由于子元素设置了不同的 transform: translateZ(),那么他们滚动的上下距离 translateY 相对屏幕(我们的眼睛),也是不一样的,这就达到了滚动视差的效果

19、如何画一条0.5px的线

方法一、移动端,采用metaviewport的方式

这样子就能缩放到原来的0.5倍,如果是1px那么就会变成0.5px。

方法二、采用transform: scale()的方式

transform:scale(0.5,0.5);

方法三、使用boxshadow

height:1px;
box-shadow:0 0.5px 0 #000;

设置box-shadow的第二个参数为0.5px,表示阴影垂直方向的偏移为0.5px。

20、面试官:CSS如何画一个三角形?原理是什么?

/*记忆口诀:盒子宽高均为零,三面边框皆透明。 */
div:after{
    position: absolute;
    width: 0px;
    height: 0px;
    content: " ";
    border-right: 100px solid transparent;
    border-top: 100px solid #ff0;
    border-left: 100px solid transparent;
    border-bottom: 100px solid transparent;
}

21、面试官:让Chrome支持小于12px的文字方式有哪些?区别?

常见的解决方案有:

1、zoom

zoom的字面意思是“变焦”,可以改变页面上元素的尺寸,属于真实尺寸

其支持的类型有:

zoom:50%,表示缩小到原来的一半

zoom:0.5,表示缩小到原来的一半

2、-webkit-transform:scale()

针对chrome浏览器,加webkit前缀,用transform:scale()这个属性进行放缩

3、-webkit-text-size-adjust:none

该属性用来设定文字大小是否根据设备(浏览器)来自动调整显示大小

22、面试官:说说对Css预编语言的理解?有哪些区别?

Css作为一门标记性语言,语法相对简单,但同时也带来一些问题。需要书写大量看似没有逻辑的代码,不方便维护及扩展,不利于复用,Css预处理器便是针对上述问题的解决方案

Css预编译语言在前端里面有三大优秀的预编处理器,分别是:

1、sass 2、less 3、stylus

变量:less声明的变量必须以@开头,后面紧跟变量名和变量值,而且变量名和变量值需要使用冒号:分隔开

嵌套:三者的嵌套语法都是一致的

作用域:Css 预编译器把变量赋予作用域,也就是存在生命周期。就像 js一样,它会先从局部作用域查找变量,依次向上级作用域查找

混入:Mixins可以将一部分样式抽出,作为单独定义的模块,被很多选择器重复使用

代码模块化:模块化就是将Css代码分成一个个模块

使用方法:

@import './common';

你可能感兴趣的:(css,html,前端)