2019年前端面试题 | CSS篇 （更新于4月15日）

虽说刷面试题有走捷径之嫌，但我发现，对于我这样没有工作经历的人来说，其实是拓展自己实战技能和加深知识理解的一个好机会。

分享出来，也希望大家不要背完了事，正经的去细细琢磨各种原由。

本篇是一个题目合集，部分答案我会整理后用自己的话说的尽量简单，部分网络现成的好答案我就直接贴链接了，也尊重大家的劳动成果，希望各位不会太介意。

如有bug，欢迎指出????

1. 什么是盒子模型？

盒子模型包括content+padding+border+margin

标准盒子模型：宽度=内容的宽度（content）

低版本IE盒子模型：宽度=content+border+padding

2. CSS常用选择器有哪些？

segmentfault.com/a/119000001…

3. CSS3新增伪类有哪些？

p:first-of-type 选择属于其父元素的首个元素

p:last-of-type 选择属于其父元素的最后元素

p:only-of-type 选择属于其父元素唯一的元素

p:only-child 选择属于其父元素的唯一子元素

p:nth-child(2) 选择属于其父元素的第二个子元素

:enabled :disabled 表单控件的禁用状态。

:checked 单选框或复选框被选中

4. CSS3有哪些新增特性

这个问题贼大，作为一个新闻专业出身的人，这种问题简直是脑残，新特性那么多，难道需要我背一遍文档你听吗？

但是，显然面试官并不care你答不答的全，他自己都不定记得，对吧～

我们完全可以从个人项目经验出发，比如我自己，在做小程序时用过flex布局，就可以以这个为主，再列举三四个其他的就行了。

为了方便大家，这里先列几个出来：

(1)CSS3 弹性盒（ Flexible Box 或 flexbox）

是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

具体使用参考 www.jianshu.com/p/5856c4ae9…

注意：一定要分清主轴和侧轴（交叉轴），flex-direction设置的是row，水平就是主轴，垂直就是侧轴；设置为colume，垂直就是主轴，水平就是侧轴，而justify-content是设置主轴排列方式的，align-items是设置侧轴排列方式的。知道这些就大概能用啦～

(2)伪类选择器，参考上面的第三条，列表渲染修改单个列表样式时，上面的nth-child()超好用

(3)边框圆角：border-radius：3px

(4)@font-face，可以引入客户端没有的字体

(5)媒体查询@meida，具体用法：www.cnblogs.com/yan-ck/p/58…

其他参考：blog.csdn.net/lxcao/artic…

5. CSS优先级计算规则

important Infinity

行间样式 1000

id 100

class/属性/伪类 10

标签选择器/伪元素 1

通配 0

6. 如何使用自定义字体

@font-face可以实现，具体使用方法：www.jianshu.com/p/976d95fb8…

7. CSS有哪些继承属性

参考：www.cnblogs.com/thislbq/p/5…

8. CSS单行省略和多行省略

单行：

overflow: hidden;//隐藏溢出
text-overflow:ellipsis;//省略号
white-space: nowrap;//不换行

9. 如何去除inline-blcok元素间隙？

空隙产生原因：HTML中的换行符、空格符、制表符等空白符，字体大小不为0的情况下，空白符占据一定宽度，使用inline-block会产生元素间的空隙。

解决办法：

  1. 把所有的子元素写在一行；
  2. 子元素设置浮动；
  3. 父元素的font-size设置为0，子元素的font-size设置为实际大小；
  4. 使用注释：
<div class="parent">
&emsp;&emsp;&emsp; <div class="child"></div><!--
&emsp;&emsp;--><div class="child"></div><!--
&emsp;&emsp;--><div class="child"></div><!--
&emsp;&emsp;--><div class="child"></div>
</div>

10. display属性？

block: 指定元素为块级元素，可以设宽高，元素前后自带换行符，比如div、p。 inline：指定元素为内联元素，不能设置宽高，元素不带换行符，会显示在同一行，比如span。 inline-block：行内块元素，兼具前两者的特点，元素前后不带换行符，但又可以设置宽高，比如input\img。 none：可以隐藏元素。 常用的还有2个，我个人认为非常实用，就是table和table-cell，结合使用在父子元素身上，子元素如果有大段文字，只要再加一个vertical-align:middle，就能轻松将文字垂直居中。 CSS3新增了一个非常适合移动端使用的flex，能很好的适应不同屏幕大小。

11. box-sizing属性

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

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

12. display:none与visibility:hidden

很多前端的同学认为visibility: hidden和display: none的区别仅仅在于display: none隐藏后的元素不占据任何空间，而visibility: hidden隐藏后的元素空间依旧保留 ，实际上没那么简单，visibility是一个非常有故事性的属性

1、visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别

2、visibility: hidden不会影响计数器的计数，如图所示，visibility: hidden虽然让一个元素不见了，但是其计数器仍在运行。这和display: none完全不一样。

13.visibility属性的collapse属性值

collapse属性很有意思，当一个元素的 visibility 属性被设置成 collapse 值后，对于一般的元素，它的表现跟 hidden 是一样的。但例外的是，如果这个元素是table相关的元素，例如table行，table group，table列，table column group，它的表现会和浏览器不同而变化。

在谷歌浏览器里，使用 collapse 值和使用 hidden 值没有什么区别。

在火狐浏览器和IE8里，使用 collapse值的效果就如它的字面意思：table的行会消失，它的下面一行会补充它的位置。效果类似于display：none。

14. em\px\rem区别

px：绝对单位，页面按精确像素展示。

em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。

rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。

PX特点：

  1. IE无法调整那些使用px作为单位的字体大小；
  2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
  3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。

EM特点 ：

  1. em的值并不是固定的；
  2. em会继承父级元素的字体大小。

rem特点：

rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。

这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

position有哪些值？

1、static（静态定位）：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

2、relative（相对定位）：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。可通过z-index进行层次分级。元素位置变换以后，不会脱离文档流。 

3、absolute（绝对定位）：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级，会脱离文档流。

4、fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。

如何让非文字类元素实现水平垂直居中？

普通div的水平居中

margin: 0 auto;
height: 50px;
width: 80px;

绝对定位的水平居中：

position:absolute;
left:50%;
top:50%;
margin-left:-50px;
margin-top:-50px;

浮动元素的水平垂直居中：

border: 1px solid red;
float: left;
position:absolute;
width: 200px;
height: 100px;
left: 50%;
top: 50%;
margin: -50px 0 0 -100px;

利用绝对定位元素的自动伸缩特性水平垂直居中

.father{
    position: relative;
    width: 500px;
    height: 500px;
}
.son{
    position:absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

利用flex布局水平垂直居中（回答这个显得更高端）

#box{
    display: flex;
    display: -webkit-flex;
    border: 1px solid #0000FF;
    height: 200px;
    width: 400px;
    align-items:center;
    justify-content:center;
}
.item{
    width: 50px;
    height: 40px;
    border: 1px solid #00C1B3;
}

在不知道图片大小的情况下，如何设置样式让图片不变形？

max-width: 100%

如何清除浮动？

www.cnblogs.com/hanqingtao/…

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

www.cnblogs.com/lixuemin/p/…

用纯CSS创建一个三角形

width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;

rgba和opacity的透明有何不同？

opacity会继承父元素的opacity 属性，而RGBA设置的元素的后代元素不会继承不透明属性。简单来说就是opacity作用于元素和元素所有内容的透明

rgba相对于opacity还是技高一筹的，当然只要是涉及颜色的，都可以用rgba来设置。

对BFC规范(块级格式化上下文：block formatting context)的理解

BFC有以下特性：

1、内部的Box会在垂直方向，从顶部开始一个接一个地放置。 2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加 3、每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。 4、BFC的区域不会与float box叠加。 5、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。 6、计算BFC的高度时，浮动元素也参与计算。

那么我们怎样做就可以触发BFC呢

  • float 除了none以外的值 overflow 除了visible 以外的值（hidden，auto，scroll ）
  • display (table-cell，table-caption，inline-block, flex, inline-flex)
  • position值为（absolute，fixed） fieldset元素
  • fieldset元素 在以上情况下可以创建BFC

BFC可以解决的问题

  • margin叠加的问题，我们将某个元素放到我们新建的BFC里面就可以避免margin叠加、
  • 对于左右布局的元素，我们可以给右侧的元素添加overflow:hidden或者auto，左侧的是float:left
  • 可以清除浮动，计算BFC高度，浮动元素不会撑开父元素的高度，我们可以让父元素触发BFC,即使用overflow:hidden

媒体查询

语法：

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

案例:

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

圣杯布局和双飞翼布局

www.cnblogs.com/imwtr/p/444…

浏览器解析CSS选择器

自右向左

响应式设计

怎么让浏览器支持小于12px 的文字？

.Num{
    display: inline-block;
    font-size: 14px;
    transform: scale(0.8);
 }

link和@import的区别

  1. link属于XHTML标签，而@import是CSS提供的。
  2. 页面被加载时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载。
  3. import只在IE 5以上才能识别，而link是XHTML标签，无兼容问题。
  4. link方式的样式权重高于@import的权重。
  5. 使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

重排和重绘

www.cnblogs.com/zichi/p/472…

CSS优化与性能提高

www.cnblogs.com/xiaoloulan/…

纯属个人记录，未完待续……

作者：梭梭酱加油鸭
链接：https://juejin.im/post/5ca80d366fb9a05e3345dccf
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

原文地址：https://www.cnblogs.com/Antwan-Dmy/p/10714423.html

时间： 2024-10-09 20:11:31

2019年前端面试题 | CSS篇 （更新于4月15日）的相关文章

前端面试题 -- JS篇

前端面试题 -- JS篇 类型 1.js中有哪些数据类型,并解释清楚原始数据类型和引用数据类型 js中共有null,undefined, string,number,boolean,object六种数据类型. 原始数据类型: null,undefined, string,number,boolean 引用数据类型:object 两者的区别:1)值存储方式不同: 原始数据类型:将变量名和值都存储在栈内存中 引用数据类型:将变量名存储在栈内存中,将值存储在堆内存中,并在栈内存中存储值的地址,该地址指

第一章 部署虚拟环境linux系统 2019年7月15日星期一 第二课

第一章 部署虚拟环境linux系统 2019年7月15日星期一  第二课 1.1 准备的工具 VmawareWorkSation 12.0   虚拟机 RadHatEnterpriseLinux[RHEL]7.0   红帽操作系统 1.2 安装配置VM虚拟机 略…… 1.3 安装配置VM虚拟机 VM配置要开启BIOS里的inte-TV  虚拟化服务 1.4 配置root用户密码 红帽RHCSA考前辅导视频 1.5 Rpm红帽软件包 (1)源代码安装弊端:1.难度高,安装困难. 2.需要自己解决依

2019年8月15日星期四（系统编程）

2019年8月15日星期四 一. 线程互斥方式 - 互斥锁. 1. 什么是互斥锁?特点如何? 互斥锁是专门用于处理线程互斥的一个方式,它有两种状态:上锁状态/解锁状态. 特点:如果处理上锁状态,则不能再上锁,直到解锁为止才能再上锁.如果是处于解锁状态,则不能再解锁了,直到上锁了才能再解锁. 2. 关于线程互斥锁API函数接口? 0)定义互斥锁的变量(pthread_mutex_t-> 互斥锁的数据类型) pthread_mutex_t mutex; 1)初始化互斥锁  -> pthread_m

蔡康永的说话之道——2019年12月15日

.bodyContainer { font-family: Arial, Helvetica, sans-serif; text-align: center; padding-left: 32px; padding-right: 32px; } .notebookFor { font-size: 18px; font-weight: 700; text-align: center; color: rgb(119, 119, 119); margin: 24px 0px 0px; padding:

前端面试题-CSS选择器

一.CSS选择器作用 CSS 选择器用于定位我们想要给予样式的 HTML 元素,但不只是在 CSS 中,JavaScript 对 CSS 的选择器也是支持的,比如 document.document.querySelectorAll. 二.选择器类型 基本选择器 组合选择器 属性选择器 伪类选择器 伪元素选择器 三.基本选择器 选择器 含义 作用 CSS .class 类选择器 匹配 class 包含(不是等于)特定类的元素 1 #id id选择器 匹配特定 id 的元素 1 * 通用元素选择器

前端面试题 ---- html篇

一.html 1.html和xhtml区别 1. html:超文本标记语言,hyper text markup language      xhtml: 可拓展的超文本标记语言 extensible hyper text markup language 它是一种置标语言,表现方式和超文本标记语言html类似不过语法更加严格 2.  xhtml 所有标签必须小写 在XHTML中,所有的标签都必须小写,不能大小写穿插其中,也不能全部都是大写. 3.  xhtml 标签必须成对出现 像是<p>...

前端高频面试题 CSS篇

通过从网上看到的面经,总结的一些高频的前端CSS面试题,有很多不会,于是找资料,并通过代码实现,自己提供了一些参考答案. 目录 1.怎样会产生浮动? 2.如何清除浮动? 3.盒子模型,以及IE和其他浏览器的却别? 4.CSS3新特性有哪些? 5.em 和 rem 的区别? 6.重排和重绘? 7.行元素和块元素? 8.border-box 和 content-box 的区别? 9.伪元素和伪类? 10.unset? 11.CSS选择器优先级? 12.水平垂直居中布局? 13.两列等高布局? 1.怎

2018 前端面试题（不定期更新）

前端基础面试题 以下更多的题目,希望大家能掌握更多的前端知识,发现自身的不足.不单单是看题目,背答案. 面试题应该反映出的只是你掌握前端知识的冰山一角.别把冰山全貌给展现出来咯 HTML/CSS 1.什么是盒子模型? 大家有没有感觉,就是面试时几乎都会被问到的什么是盒子模型? 我想大家应该回答都是“哦,盒子模型啊,就是外边距+边框+内边距+容器自身的宽高”. 也就是下面这张图,没错这样回答大部门面试官就这样放过你了 这是标准的盒子模型 如果面试官想再深入一下呢,IE的盒子模型和你说的盒子模型有什

2017年前端面试题整理

Javasript 1.请定义一个方法,传入一个string类型的参数,然后将string的每个字符间加个空格返回 spacify('hello world') // => 'h e l l o w o r l d' function spacify(str) { return str.split('').join(' '); } 先使用split把字符串分割成数组,然后使用join给每个数组后面添加一个空格并且拼接成字符串 2.如何把这个方法放入 String 对象上面 'hello worl