2022届校招前端面试CSS篇1

最新推荐文章于 2023-02-08 16:21:32 发布

weixin_42292991

最新推荐文章于 2023-02-08 16:21:32 发布

阅读量476

点赞数

分类专栏：校招前端面试文章标签： 1024程序员节

本文链接：https://blog.csdn.net/weixin_42292991/article/details/107736867

版权

校招同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

前端面试

15 篇文章 3 订阅

订阅专栏

CSS篇

1.如何理解display:inline-block?

Css中每个元素都有两个盒子，分为外在盒子和容器盒子。外在盒子负责元素可以是一行显示还是只能换行显示。容器盒子负责宽高、内容呈现等。遵循这种理解，display:block理解为display:block-block,display:table应为display:block-table。

2.现在有如下的需求：页面某个模块的文字内容是动态的，可能是几个字，也可能是几句话。现在希望文字少的时候居中显示，文字超过一行的话居左显示。如何实现？

.box{ 
    text-align:center; 
}

.content{ 
    text-align:left; 
    display:inline-block; 
}

3.box-sizing:border-box是如何起作用的？

一个元素分为外在盒子和容器盒子。宽高的设置作用在内在盒子上，内在盒子的模型从内而外分别是content-box,padding-box,border-box,margin。 width属性默认作用在content-box上，也就是box-sizing的默认值是content-box,把box-sizing设置为boder-box之后，width属性就作用在了border-box的盒子上。

4.<input>和<button>按钮有什么区别？ <input type=”button” value=”按钮”> <buttob type=”button”>按钮</button>

两种按钮默认的white-space值不一样，input是pre，button是normal，所表现出的现象差异是：当按钮文字足够多的时候，<input>按钮不会自动换行，而<button>按钮则会。

5.如何用css画出一个三角形？

div{ 
    width:0; 
    border-width:20px 10px; 
    border-style:solid; 
    border-color:#f30 transparent transparent transparent; 
}

6.什么是BFC？有何作用？有何优点？如何触发？

BFC的全称是block formatting context（块级格式化上下文）。它是页面上的一个隔离的独立容器，该容器里面的子元素不会影响到外面的元素。优点有:自适应内容由于封闭而更加健壮，容错性更强。而且自适应内容会自动填满浮动以外的区域，无需关心浮动元素宽度。而且使用BFC可以防止margin重叠、阻止元素被浮动元素覆盖、减少重排重绘。

满足下列条件之一就可触发BFC

根元素，即html
float的值不为none（默认）
overflow的值不为visible（默认）
display的值为inline-block、table-cell、table-caption
position的值为absolute或fixed

衍生问题1：为什么margin会发生重叠？

因为margin的定义不是让元素移动xxpx，而是这个元素的旁边必须有xxxpx的的空白。

衍生问题2：清除浮动的方法知道几种？

为什么要清除浮动？

清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题。

1.使用overflow属性来清除浮动

找到浮动盒子的父元素，再在父元素中添加一个属性：overflow:hidden,就是清除这个父元素中的子元素浮动对页面的影响.

2.使用额外标签

在最后一个浮动标签后，新加一个标签，给其设置clear：both；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .fahter{
        width: 400px;
        border: 1px solid deeppink;
    }
    .big{
        width: 200px;
        height: 200px;
        background: darkorange;
        float: left;
    }
    .small{
        width: 120px;
        height: 120px;
        background: darkmagenta;
        float: left;
    }
    .footer{
        width: 900px;
        height: 100px;
        background: darkslateblue;
    }
    .clear{
        clear:both;
    }
    </style>
</head>
<body>
    <div class="fahter">
        <div class="big">big</div>
        <div class="small">small</div>
        <div class="clear">额外标签法</div>
    </div>
    <div class="footer"></div>
</body>
</html>

3.使用after伪元素清除浮动

    .clearfix::after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
    .clearfix{
        *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
    }
 
<body>
    <div class="fahter clearfix">
        <div class="big">big</div>
        <div class="small">small</div>
        <!--<div class="clear">额外标签法</div>-->
    </div>
    <div class="footer"></div>
</body>

衍衍生问题1：为什么使用overflow：hidden可以清除浮动?

因为设置了overflow：hidden就会触发BFC，可以利用BFC可以包含浮动这一特性来清除浮动。

7.一个绝对定位元素，没有任何left/top/right/bottom属性设置，并且其祖先元素全部都是非定位元素，其位置在哪里？

答：当前位置。很多人都会认为是浏览器窗口左上方，这是关于absolute绝对定位最典型的错误认知，实际上还是当前位置。请牢记：absolute是非常独立的CSS属性值，其样式和行为表现不依赖其他任何CSS属性就可以完成。

例如要实现以下的布局

很多人是这么实现的:

.father{ 
    position:relative;
}

.shape{
    position:absolute;
    top:0;
    left:0;
}

实际上只用下面一行就实现了

.shape{
    position:absolute;
}

再比如要实现这种效果

Html与css的代码如下，设置了absolute之后没必要top:0;right:0;来设置，而是通过maigin来设置。好处在于如果文字长度变化了之后（如热门导航四个字）就不需要再改CSS设置的top、right属性值。

8.说出几个块级元素与内联元素？这两种元素有什么区别？

块级元素有：div ul li p dl dt dd h1 h2 h3 h4...

内联元素有：a b span img input select...

区别：块级元素独占一行，默认情况下其内容宽度自动填充满父元素的宽度（表现为流特性）。可以设置width、height属性值(width、height作用在容器盒子上)，可以设置margin和padding属性。

而相邻的内联元素会排列再同一行里，直到同一行排不下才会换行。设置width、height属性无效。对内联元素起边距作用的作用maigin-left、margin-right、padding-left、padding-right。

衍生问题：块级元素就是display为block的元素吗？（内联元素就是display为inline的元素吗？）

块级元素与display为block的元素不是一个概念。例如<li>元素默认的display值是list-item，<table>元素默认的display值是table，但是它们都是块级元素。

同样内联元素与display为inline的元素不是一个概念。内联元素的“内联”是指外在盒子，例如display值为inline-block（<button>标签）、inline-table都是内联元素，因为他们的外在盒子都是内联盒子。

9.W3C盒模型和IE盒模型有什么区别？

两个盒模型由内而外都是content、padding、border、margin。他们的不同的在于IE盒模型的height不但包括content的高度，还包括了padding和border的高度。 IE盒模型是在IE5.5及更早的版本中使用的，IE6及以上使用的是W3C的盒模型标准。

衍生问题1：如何切换两种盒子？

使用box-sizing:border-box切换

10.css实现水平垂直居中的几种方法

1.box{
    display:table-cell;
    text-align:center; 
    vertical-align:middle;     
} 


2.<div style="position: absolute; 
      width:300px; 
      height:200px; 
      top: 50%; 
      left: 50%; 
      transform: translate(-50%, -50%); 
      background-color: blue;">水平垂直居中</div>


3.<div style="position: absolute; 
     width: 500px; 
     height: 300px; 
     margin: auto; 
     top: 0; 
     left: 0; 
     bottom: 0; 
     right: 0; 
     background-color: green;">水平垂直居中</div>


4.<div style="display: flex;align-items: center;justify-content: center;"> 
    <div style="width: 100px;height: 100px;background-color: gray;">flex 布局</div>
</div>

11.什么是层叠上下文？什么是层叠水平？层叠顺序是怎样的？（层叠有几层？）

层叠上下文是HTML中的一个三维的概念。如果一个元素含有层叠上下文，就可以理解为这个元素在z轴上具有层级关系。层叠水平决定了一个层叠上下文中元素在z轴的显示顺序。注意，层叠等级并不一定由z-index决定，只有设置了绝对定位的元素才由z-index决定。(设置了position:abslute的元素会有一个默认的z-index为auto的属性值。也就是说z-index 只适用于定位的元素，对非定位元素无效)。层叠水平：

衍生问题：为什么display为inline/inline-block的水平盒子的层级关系要比浮动元素和块状元素高？

Background/border为装饰属性，浮动和块状元素一般用作布局，而display为inline/inline-block是内联元素，内联元素用作展示内容。每个网页中最重要的就是内容，因此要让内容的层叠顺序高于其它，这样当发生层叠时，重要的文字、图片内容才可以优先展示。

衍生问题2：z-index值什么时候生效？

z-index只对定位元素有作用。要设置非static的定位属性，z-index才会生效。也就是position不为static。

12.在Chrome浏览器下，有如下css代码：请问此时<h1>标签的margin-before的像素计算值是多少？

h1{ 
    font-size:2em; 
    -webkit-margin-before:0.67em; 
    -webkit-margin-after:0.67em; 
}

答案：是32px×0.67 = 21.44px。如果对em了解不够，就容易认为1em大小就是16px，于是margin-before计算值就误认为是16px×0.67 = 10.72px。由于CSS是一次性从上往下渲染，而1em的值相当于当前元素所在的font-size的值，因此渲染font-size:2em;的时候font-size变成了32px，此时对应1em就是32px，所以变成32×0.67。

如果改成：

h1{ 
    font-size:2em; 
    -webkit-margin-before:0.67rem; 
    -webkit-margin-after:0.67rem; 
}

请问此时<h1>标签的margin-before的像素计算值是多少？

答案：是16px×0.67 = 10.72px。em相对于当前元素，rem(root em)则相对于根元素，因此使用rem的话计算值就不会受当前元素的font-size影响。

13.什么是视口？讲讲vw、vh、vmin、vmax?

在桌面端，视口指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。视口单位中的“视口”，桌面端指的是浏览器的可视区域；移动端指的就是Viewport中的Layout Viewport。

vw、vh是css3用来做自适应布局的单位。1vw等于视口宽度的1%。1vh等于视口高度的1%。vmin:选取vw和vh中最小的那个，vmax：选取vw和vh中最大的那个。

14.什么是convas？讲讲常用方法？

canvas 是用来在网页上绘制图形的（我们通常称之为画布），canvas 只是图形容器，需要使用 js 脚本来绘制图形，可以绘制线条、矩形、多边形、圆形、圆环、组合图形、文字、自定义图像等。

语法：

1.语法 Canvas.getContext(contextID)

var ctx = document.querySelector('convas').getContext('2d');

　　参数 contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 "2d"，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API。

　　【注】：getContext() 方法返回一个用于在画布上绘图的环境。

　　　　　　getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

2.绘制图形样式style（一般在绘制图形前先进行样式设定）：

context.fillStyle //填充样式
context.strokeStyle //笔触颜色
context.lineWidth //边框宽度

3.绘制图像

context.fill() //填充
context.stroke() //绘制边框

常用方法：

1.绘制矩阵

context.fillRect(x,y,width,height) strokeRect(x,y,width,height)

x:矩形起点横坐标
y:矩形起点纵坐标
width:矩形的宽度
height:矩形的高度

2.绘制圆

创建圆形方法定义：xxx.arc(x,y,radius,startAngle,endAngle,anticlockwise)

x :圆的中心的 x 坐标
y :圆的中心的 y 坐标
r :圆的半径
sAngle :起始角，以弧度计（弧的圆形的三点钟位置是 0 度）
eAngle :结束角，以弧度计
counterclockwise :可选。规定应该逆时针还是顺时针绘图。False 为顺时针，true 为逆时针

3.更改字体

设置字体样式：context.font　　

水平对齐方式：context.textAlign　　（属性值有 start、end、right、center）

垂直对齐方式：context.textBaseline　　（属性值有 top、hanging、middle、alphabetic、ideographic、bottom）

计算字体长度(px)：var length = context.measureText(text)　　（只能计算长度，不能计算高度）

填充文字：context.fillText(text,x,y)

绘制文字轮廓 context.strokeText(text,x,y)

text: 文字内容
x: 文字起点的x轴坐标
y: 文字起点的y轴坐标

4. 图片裁剪

context.clip()

context.clip()只绘制封闭路径区域内的图像，不绘制路径外部图像，用的时候1 先创建裁剪区域，2 再绘制图像（之后绘制的图形都会采用这个裁剪区域，要取消这个裁剪区域就需要用到保存恢复状态）

15.CSS实现三列布局的方式？

1.定位 2.浮动（圣杯布局与双飞翼布局） 3.弹性布局

1.左右两栏选择绝对定位，固定于页面的两侧，中间的主体选择用margin确定位置

2.让左右两边部分浮动，脱离文档流后对中间部分使用margin来自适应

3.使用容器包裹三栏，并将容器的display设置为flex，左右两部分宽度设置为固定，中间flex设置为1，左右两边的值固定，所以中间的自适应。

衍生问题1：圣杯布局与双飞翼布局的区别？

圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，中间栏div使用padding/margin确定位置，以形成三栏布局。

不同在于解决”中间栏div内容不被遮挡“问题的思路不一样：
圣杯布局，为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。

双飞翼布局，为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。
多了1个div，少用大致4个css属性（圣杯布局中间divpadding-left和padding-right这2个属性，加上左右两个div用相对布局position: relative及对应的right和left共4个属性，一共6个；而双飞翼布局子div里用margin-left和margin-right共2个属性，6-2=4），个人感觉比圣杯布局思路更直接和简洁一点。

简单说起来就是”双飞翼布局比圣杯布局多创建了一个div，但不用相对布局了“。

16.css两种动画？

实现CSS动画有两种主要的方法：过渡动画(transition)和animation动画。

要实现过渡动画有两个必须点(和其他可选属性)：
1.指定要添加过渡效果的CSS属性(或者"all");

2.指定过渡效果的持续时间

用animation动画的关键：
1.用@keyframes定义规则，并绑定到一个选择器上。
2.规定动画的名称(animation-name),规定动画的时长(animation-duration)。也就是这个动画中的“animation: wlk 2s;”

衍生问题：什么时候用transition过渡动画，什么时候用animation？

其实如果掌握的熟练的话这两种动画是可以互相转换的。个人感觉在鼠标hover时的动画效果大多使用过渡动画，在需要鼠标触发时大多使用过渡动画；在网页加载后立即执行不需要手动触发时大多使用animation动画。

17.display:none和visibility：hidden区别？

dispaly:none 设置该属性后，该元素下的元素都会隐藏，占据的空间消失。

visibility:hidden 设置该元素后，元素虽然不可见了，但是依然占据空间的位置。

display:none和visibility:hidden的区别？

1.visibility具有继承性，其子元素也会继承此属性，若设置visibility:visible，则子元素会显示

2.visibility不会影响计数器的计算，虽然隐藏掉了，但是计数器依然继续运行着。

3.在css3的transition中支持visibility属性，但是不支持display，因为transition可以延迟执行，因此配合visibility使用纯css实现hover延时显示效果可以提高用户体验

4. display:none会引起回流(重排)和重绘 visibility:hidden会引起重绘

问题：为什么display: none不占用原来的位置，但可以用js操作元素节点呢？

解答：根据浏览器的渲染原理，浏览器会解析HTML标签生成DOM Tree，解析CSS生成CSSOM树，然后将DOM Tree和CSSOM树合并生成Render Tree，元素在Render Tree中对应0或多个盒子，然后浏览器以盒子模型的信息布局和渲染界面。而设置为display: none的元素则在Render Tree中没有生成对应的盒子模型，因此后续的布局、渲染工作就没有了，至于DOM操作还是可以的。

display：none的元素不会出现在render树，但是dom树上还是存在的，否则无法响应事件。
display：none后无论怎么修改子元素的display，都没用，因为根本不在render树中。

hidden的元素依旧会占位，只是看不到。子元素修改visilibilty: visible；是可以显现的，这个结果也正常，毕竟hidden的元素依旧存在于render树。

衍生问题1：什么是render树（渲染树）？

浏览器是如何渲染 UI 的？

浏览器获取 HTML 文件，然后对文件进行解析，形成 DOM Tree
与此同时，进行 CSS 解析，生成 Style Rules
接着将 DOM Tree 与 Style Rules 合成为 Render Tree
元素在页面中布局，然后绘制。

render 树就是根据可视化节点和 css 样式表结合诞生出来的树；

18.说说Flex布局，哪些是父节点属性

flex是弹性盒子模型。元素被设置display：flex，就变成弹性容器。

flex布局是一维布局模型。大多属性都是作用于主轴，交叉轴被动变化。

衍生问题1：说说对flex:1的理解？

flex：是 flex-grow、flex-shrink、flex-basis的缩写，默认值为0 1 auto。后两个属性可选

对于flex-grow 默认为0 即就算有多余空间也不扩张。
对于flex-shrink默认为1即有多余空间缩小。
flex-basis默认为auto 在没有分配多余空间之前自动使用自己的宽度。

设置flex:1等价于：

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;

所以想要实现自适应布局使用flex：1，

19.解释响应式布局？有哪几种方法实现？

响应式布局是指分别为不同的屏幕分辨率定义布局，同时在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。可以把响应式布局看作是流式布局和自适应布局设计理念的融合。每个屏幕分辨率下面会有一个布局样式，同时位置会变而且大小也会变.。

实现方法：

１.百分比布局。（bootstrap的栅格布局）
　　2.媒体查询布局。
　　3.rem响应式布局。
　　4.vw响应式布局。
　　5.flex弹性布局。

衍生问题1：响应式布局跟自适应布局有什么区别？

自适应布局就是指能使网页自适应的显示在不同大小终端设备上的网页设计方式及技术，它需要开发多套界面来适应不同的终端。

响应式布局就是实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。换句话说就是一个网站能够兼容多个终端，而不是为了每一个终端做一个特定的版本。

答案就答下面两点：

响应式布局与自适应布局的区别是什么

1、自适应布局是通过检测视口分辨率来判断当前访问的设备是pc端还是平板或者是手机，从而请求服务层返回不同的页面；响应式布局是通过检测视口分辨率针对不同客户端在客户端做代码处理，来展现不同的布局和内容
2、自适应布局需要开发多套界面，而响应式布局只需要开发一套界面就可以了
3、自适应对页面做的屏幕适配是在一定范围：比如pc端一般要大于1024像素，手机端要小于768像素，而响应式布局是一套页面全部适应。
4、自适应布局如果屏幕太小会发生内容过于拥挤，响应式布局可以自动识别屏幕宽度并作出相应的调整页面设计

衍生问题2：bootstrap实现响应式布局原理？

bootstrap是通过百分比布局+媒体查询的方式来实现的。首先通过媒体查询确认container的宽度，每个col-xx-xx都是通过百分比定义的，屏幕尺寸变化了，container就变化了。

衍生问题3：chrome下1rem等于多少px？

12px。

衍生问题4：实现一个自适应的正方形,宽度等于屏幕宽度的一半

使用视口单位 50vw 50vh

20.css常见的选择器，优先级

常见的选择器：

【元素选择器】

1、通配选择器：*（匹配所有元素）

a、效率不高，页面上的标签越多，效率越低，所以页面上最好不要出现这个选择器

2、标签选择器：li（匹配标签为li的元素）

a、所有标签都能够当做选择器，比如body、h1、dl、ul、span等等

b、不管这个标签藏的多深，都能够被选择上

c、选择的是所有的，而不是某一个。所以是共性，而不是特性

3、ID选择器：#content（匹配ID属性值等于content的元素）

4、类选择器：.list（匹配class属性包含list的元素）

a、class可以重复，也就是说，同一个页面上可能有多个标签同时属于某一个类

b、同一个标签可以同时携带多个类，多个类用空格隔开，多个样式有冲突的，以css中后出现的为准

c、不要去试图用一个类名，把某个标签的所有样式写完。这个标签要多携带几个类，共同造成这个标签的样式

d、每一个类要尽可能小，有“公共”的概念，能够让更多的标签使用

【关系选择器】

1、后代选择器：#content h3（匹配ID为content的元素内所有的h3元素）

a、空格就表示后代，强调一下：选择的是后代，不一定是儿子

b、当要把某一个部分的所有的什么，进行样式改变，就要想到后代选择器

2、子元素选择器：#content>h3（匹配ID为content的元素子级的h3元素）

3、交集选择器：h3.content（匹配class为content的h3元素）

a、交集选择器没有空格

b、交集选择器可以连续交（一般不要这么写）

c、交集选择器，我们一般都是以标签名开头，比如div.haha 比如p.special

4、并集选择器（分组选择器）：h1，h2（匹配所有的h1和h2元素）

5、相邻选择器：h1+h2（匹配 h1 元素之后紧跟的 h2 元素）

6、兄弟选择器：h1~h2（匹配 h1 元素之后所有的 h2 元素）

【属性选择器】

1、a[class]：匹配具有 class 属性值的 a 的元素

2、a[target="_blank"]：匹配 target 属性值等于 _blank 的 a 元素

3、a[href^="https"]：匹配 href 属性值以 https 开头的 a 元素

4、a[href$=".jpg"]：匹配 href 属性值以 .jpg 结尾的 a 元素

5、a[href*="baike"]：匹配 href 属性值包含 baike 的 a 元素

6、a[class~="abc"]：匹配 class 属性值以空格为分隔符，其中有一个等于 abc 的 a 元素

二、CSS选择器权重和优先级

共分为5个等级：

第1等：提升指定样式规则的应用优先权，如：color:red !important，权值为10000（不建议使用）

第2等：代表内联样式，如: style="xxx"，权值为1000

第3等：代表ID选择器，如：#content，权值为100

第4等：代表类，伪类和属性选择器，如.content，:hover，[attribute]，权值为10

第5等：代表元素选择器和伪元素选择器，如div，p，权值为1

通用选择器（*），子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以他们的权值都为0

优先级回答下面前六个就好了

优先级（由高到低）：

1. id选择器（#myid）

2. 类选择器（.myclassname）

3. 标签选择器（div,h1,p）

4. 相邻选择器（h1+p）

5. 子选择器（ul < li）

6. 后代选择器（li a）

7. 通配符选择器（*）

8. 属性选择器（a[rel="external"]）

9. 伪类选择器（a:hover,li:nth-child）

上面九种选择器中ID选择器的效率是最高，而伪类选择器的效率则是最低。

weixin_42292991

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2022届校招前端面试CSS篇1

CSS篇1.如何理解display:inline-block? Css中每个元素都有两个盒子，分为外在盒子和容器盒子。外在盒子负责元素可以是一行显示还是只能换行显示。容器盒子负责宽高、内容呈现等。遵循这种理解，display:block理解为display:block-block,display:table应为display:block-table。2.现在有如下的需求：页面某...
复制链接

扫一扫