前端面试—CSS面试题汇总
<!-- more -->
博客阐明
文章所波及的材料来自互联网整顿和集体总结，意在于集体学习和教训汇总，如有什么中央侵权，请分割自己删除，谢谢！
1、flex常见面试题
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
1 flex-direction:属性决定主轴的方向； row 程度方向，终点在左端 row-reverse 程度方向，终点右端 column 纵向方向，终点在上 column 纵向方向，终点在下2 flex-wrap:决定是否换行，默认都是排在一行 no-wrap;(默认)不换行 wrap; //换行，第一行在上方 wrap-reverse;//换行；第二行在上方3 flex-flow:flex-direction和flex-wrap的缩写，默认为row nowrap flex-flow:<flex-direction> ||<flex-wrap>4 justify-content:定义在item在主轴上的对齐形式 flex-start 从左到右 flex-end 从右到左 center 居中 space-between 两端对齐 space-around 每个item两侧两头相等5 justify-content:定义在item在主轴上的对齐形式左中右三等分
给父元素增加display:flex
左右布局，一侧定宽，一侧自适应撑满
<div style="display:flex; height:100%; width:100%;"> <div style="width:300px; background:red;"> sss </div> <div style="width:100%; background:green;"> ssssss </div></div>未知高宽上下左右居中
//csshtml,body { height: 100%}.main { display: flex; height: 100%; justify-content: center; align-items: center}.box { width: 300px; border: 1px solid red;}//html <div class="main"> <div class="box">未知高度上下左右居中</div></div>2、盒模型面试题
什么是盒模型
页面就是由一个个盒模型堆砌起来的，每个HTML元素都能够叫做盒模型，盒模型由外而内包含：边距（margin）、边框（border）、填充（padding）、内容（content）。它在页面中所占的理论宽度是margin + border + paddint + content 的宽度相加。
规范盒模型和IE的盒模型的区别
不同之处就是规范盒模型的内容大小就是content的大小，而IE的则是content + padding +border 总的大小
怎么设置规范盒模型和IE的盒模型
通过设置 box-sizing:content-box(W3C)/border-box(IE)就能够达到自在切换的成果
BFC面试题
BFC的基本概念
BFC就是“块级格式化上下文”的意思，也有译作“块级格式化范畴”。它是 W3C CSS 2.1 标准中的一个概念，它决定了元素如何对其内容进行定位，以及与其余元素的关系和相互作用。艰深的讲，就是一个非凡的块，外部有本人的布局形式，不受外边元素的影响。
BFC原理
- BFC外部的盒子，会在垂直方向，一个接一个地搁置。垂直方向上也会产生边距重叠。
- BFC就是页面上的一个独立容器，容器外面的子元素不会影响到里面的元素，外边的也不会影响里边的。
- BFC的区域不会与float box重叠。
- 计算BFC的高度时，浮动元素也被计算在内。
BFC如何产生
overflow: auto/ hidden;position: absolute/ fixed;float: left/ right;display: inline-block/ table-cell/ table-caption/ flex/ inline-flex在属性值为这些的状况下，都会让所属的box产生BFC。
CSS布局面试题
有哪些布局
float布局的兼容性比拟好。解决办法：给橙色块增加overflow: hidden（生成了一个BFC）。浮动元素父元素还存在高度塌陷问题，解决办法： 父元素生成一个BFC。absolute布局的有点是简略间接，兼容性好。毛病，脱离了文档流。flex布局的长处，布局简略、灵便，挪动端敌对；毛病是ie8以下不兼容。table布局的长处是兼容性好，有时候布局绝对简略。毛病是它是对TABLE标签的不正规应用，始终以来被大家所诟病。当须要内容高度不统一时并不适应。grid布局长处，是第一个基于二维方向的布局模块。它是第一个基于网格的原生布局零碎。毛病是对低版本浏览器兼容性不好。
CSS预处理器
Less（基于Node写的）、Sass（基于Ruby写的）
CSS预处理器性能
1.嵌套 反映层级和束缚
2.变量和计算 缩小反复代码
3.Extend和Mixin 代码片段复用
4.循环 实用于简单有法则的款式
5.import CSS文件模块化
CSS新个性
css3的新选择器
E:nth-child(n) 选择器匹配其父元素的第n个子元素，不管元素类型，n能够使数字，关键字，或公式
E:nth-of-type(n) 抉择与之其匹配的父元素的第N个子元素
E:frist-child 绝对于父级做参考，“所有”子元素的第一个子元素，并且“地位”要对应
E：frist-of-type 绝对于父级做参考，“特定类型”（E）的第一个子元素
E：empty 抉择没有子元素的每个E元素
E:target 抉择以后流动的E元素
::selection 抉择被用户选取的元素局部
属性选择器
E[abc*="def"] 抉择adc属性值中蕴含子串"def"的所有元素
2、文本
text-shadow:2px 2px 8px #000;参数1为向右的偏移量，参数2为向左的偏移量，参数3为突变的像素，参数4为突变的色彩
text-overflow:规定当文本溢出蕴含元素时产生的事件 text-overflow:ellipsis(省略)
text-wrap:规定文本换行的规定
word-break 规定非中日韩文本的换行规定
word-wrap 对长的不可分割的单词进行宰割并换行到下一行
white-space: 规定如何解决元素中的空白 white-space:nowrap 规定段落中的文本不进行换行
3、边框
border-raduis:50%边框的圆角
border-image 边框图片
.border-image {
border-image-source:url(images/border.png);
boder-image-slice:27;
border-image-width:10px;
border-iamge-repeat:round; (round平铺) 平铺成果不作用于四角，只适应与四边
}
4、背景
rgba
backgrounnd-size:cover/contain，其中background-size：cover，会使“最大”边进行缩放，另一边同比缩放，铺满容器，超出局部会溢出。background-size:contain，会使“最小”边进行缩放，另一边同比缩放，不肯定铺满容器，会残缺显示图片
5、突变
linear-gradient
background-image:linear-gradient(90deg,yellow 20%,green 80%)
radial-gradient
background-iamge:radial-gradient(120px at center center,yellow,green)
6、多列布局
column-count
column-width
column-gap
column-rule
7、过渡
transition
transition-property:width //property为定义过渡的css属性列表，列表以逗号分隔
transition-duration:2s; //过渡继续的工夫
transition-timing-function:ease;
transition-delay:5s //过渡提早5s进行
8、动画、旋转
animation
transform ：translate（x,y) rotate(deg) scale(x,y)
translate
scale
rotate
skew（歪斜）
9、flex布局
10、@media媒体查问
display的几种罕用取值
1、none 此元素不会被显示，并且不占据页面空间，这也是与visibility:hidden不同的中央，设置visibility:hidden的元素，不会被显示，然而还是会占据原来的页面空间。
2、inline 行内元素 元素会在一行内显示，超出屏幕宽度主动换行，不能设置宽度和高度，元素的宽度和高度只能是靠元素内的内容撑开。
示例元素：span,b,i,a,u,sub,sup,strong,em
3、block 块级元素 会独占一行，如果不设置宽度，其宽度会主动填满父元素的宽度，能够设置宽高，即便设置了宽度，小于父元素的宽度，块级元素也会独占一行。
示例元素：div,h1-h6,ul,ol,dl,p
4、inline-block 行内块元素 与行内元素一样能够再一行内显示，而且能够设置宽高，能够设置margin和padding。
示例元素：input,button,img
5、list-item 列表元素
示例元素：li
6、table 会作为块级表格来显示(相似于<table>)，表格前后带有换行符。
7、inline-table 会作为内联表格来显示(相似于<table>)，表格前后没有换行符。
8、flex 多栏多列布局，火狐能够间接应用，谷歌和欧朋须要在属性值后面加-webkit-前缀，比拟适宜挪动端开发应用。
相邻的两个inline-block节点为什么会呈现距离，该如何解决
元素被当成行内元素排版的时候，原来HTML代码中的回车换行被转成一个空白符，在字体不为0的状况下，空白符占据肯定宽度，所以inline-block的元素之间就呈现了空隙。这些元素之间的间距会随着字体的大小而变动，当行内元素font-size:16px时，间距为8px。
解决：
1、font-size
2、扭转书写形式
3、应用margin负值
4、应用word-spacing或letter-spacing
Viewport面试题
手机浏览器会把页面放入到一个虚构的“视口”（viewpoint）中，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域大，也可能比浏览器的可视区域小。通常这个虚构的“视口”（viewport）比屏幕宽，会把网页挤到一个很小的窗口。
如果不显示地设置viewport，那么浏览器就会把width默认设置为980。但结果是浏览器呈现横向滚动条，因为浏览器可视区域的宽度比默认的viewport的宽度小。
而后浏览器引进了 viewport 这个 meta tag，让网页开发者来管制 viewport 的大小和缩放。
<meta name="viewport" content="width=device-width, initial-scale=1.0">CSS实现宽度自适应100%，宽高16:9的比例的矩形
第一步先计算高度，假如宽100%，那么高为h=9/16=56.25%
第二步利用之前所说设置padding-bottom办法实现矩形
html<div class="box"> <div class="scale"> <p>这是一个16：9的矩形</p> </div></div>css.box { width: 80%;}.scale { width: 100%; padding-bottom: 56.25%; height: 0; position: relative;}.item { width: 100%; height: 100%; background-color: aquamarine; position: absolute;}rem布局的优缺点
长处：能让咱们在手机各个机型的适配方面；大大减少咱们代码的重复性，是咱们的代码更兼容。
毛病：目前ie不反对 对pc页面来讲应用次数不多；
数据量大：所有的图片，盒子都须要咱们去给一个精确的值；能力保障不同机型的适配；
实现一个简略的三角形
元素的border是由三角形组合而成
div { width: 0; height: 0; border: 40px solid; border-color: transparent transparent red;}如何解决1px问题（1像素边框问题）
1. 媒体查问利用设备像素比缩放，设置小数像素
IOS8下曾经反对带小数的px值, media query对应devicePixelRatio有个查问值-webkit-min-device-pixel-ratio, css能够写成这样
.border { border: 1px solid #999 }@media screen and (-webkit-min-device-pixel-ratio: 2) { .border { border: 0.5px solid #999 }}@media screen and (-webkit-min-device-pixel-ratio: 3) { .border { border: 0.333333px solid #999 }}【毛病】对设施有要求，小数像素目前兼容性较差。
2. viewport + rem 计划
该计划是对上述计划的优化，整体思路就是利用viewport + rem + js 动静的批改页面的缩放比例，实现小于1像素的显示。在页面初始化时，在头部引入原始默认状态如下：
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <meta name="viewport" id="WebViewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> 接下来的工作就是js的动静批改缩放比 以及 实现rem根元素字体大小的设置。
var viewport = document.querySelector("meta[name=viewport]")if (window.devicePixelRatio == 1) { viewport.setAttribute('content', 'width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no')} if (window.devicePixelRatio == 2) { viewport.setAttribute('content', 'width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no')} if (window.devicePixelRatio == 3) { viewport.setAttribute('content', 'width=device-width, initial-scale=0.333333333, maximum-scale=0.333333333, minimum-scale=0.333333333, user-scalable=no')} var docEl = document.documentElement;var fontsize = 10 * (docEl.clientWidth / 320) + 'px';docEl.style.fontSize = fontsize;【毛病】认为缩放波及全局的rem单位，比拟适宜新我的项目，对于老我的项目可能要波及到比拟多的改变。
3. 设置 border-image 计划
.border-image-1px { border-width: 1px 0px; -webkit-border-image: url("border.png") 2 0 stretch; border-image: url("border.png") 2 0 stretch;}【解释】border-width 指定边框的宽度，能够设定四个值，别离为上右下左border-width: top right bottom left。border-image 该例意为：间隔图片上方2px（属性值上没有单位）裁剪边框图片作为上边框，下方2px裁剪作为下边框。间隔左右0像素裁剪图片即没有边框，以拉伸形式展现
联合起来就是：在边框图片中，裁剪图片上下方的2个像素宽度作为高低边框，并展现在宽度为1个像素的边框空间里。左右没有边框。 留神这里的1个像素是非凡的，专指物理像素，而平时设定的长宽1px则示意逻辑像素，当然，这种形式引入了图片，咱们还能将图片装换成base64模式体现
.border-image-1px { border-width: 1px 0px; -webkit-border-image: url("data:image/png;base64,xxx") 2 0 stretch; border-image: url('如上');}【毛病】须要制作图片，圆角可能呈现含糊
4. background-image 突变实现
除了应用图片外，当然也能应用纯css来实现，百度糯米团就是采纳的这种计划。
.border { background-image:linear-gradient(180deg, red, red 50%, transparent 50%), linear-gradient(270deg, red, red 50%, transparent 50%), linear-gradient(0deg, red, red 50%, transparent 50%), linear-gradient(90deg, red, red 50%, transparent 50%); background-size: 100% 1px,1px 100% ,100% 1px, 1px 100%; background-repeat: no-repeat; background-position: top, right top, bottom, left top; padding: 10px; }【思路】将本来1个物理像素的边框大小利用线性突变宰割成几个局部（百分比管制），实现小于1像素成果
【解释】linear-gradient指定线性突变，承受大于等于3个参数，第一个为突变旋转角度，第二个开始为突变的色彩和到哪个地位（百分比）全副变为该色彩，该例子中，第一句就是，突变方向旋转180度，即从上往下（默认为0度从下往上），从红色开始突变，到50%的地位还是红色，再突变为继承父元素色彩。
【毛病】因为每个边框都是线性突变色彩实现，因而无奈实现圆角
5. box-shadow 计划
利用暗影也能够实现，长处是没有圆角问题，毛病是色彩不好管制
div { -webkit-box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.5);}【了解】来回顾一下box-shadow属性的用法。
box-shadow: h-shadow v-shadow [blur] [spread] [color] [inset];
参数别离示意: 程度暗影地位，垂直暗影地位，含糊间隔， 暗影尺寸，暗影色彩，将内部暗影改为外部暗影，后四个可选。该例中为何将暗影尺寸设置为正数？设置成-1px 是为了让暗影尺寸稍小于div元素尺寸，这样左右两边的暗影就不会裸露进去，实现只有底部一边有暗影的成果。从而实现分割线成果（单边边框）。
6. transform: scale(0.5) 计划 - 举荐: 很灵便
在以上的用法种，无非逃不开一种思维，就是将1px放大为0.5px来展现，然而。0.5px并不是所有的设施或浏览器都反对，就思考用媒体查问或viewport将其缩放比例。其实1像素问题的产生根本产生在设置边框或分割线的时候，场景并不笼罩全局款式，因而，间接缩放须要设置的元素，才是咱们真正须要的。tranform就能实现这个需要。
- 设置
height: 1px，依据媒体查问联合transform缩放为相应尺寸。
div { height:1px; background:#000; -webkit-transform: scaleY(0.5); -webkit-transform-origin:0 0; overflow: hidden;}2.用::after和::befor,设置border-bottom：1px solid #000,而后在缩放-webkit-transform: scaleY(0.5);能够实现两根边线的需要
div::after{ content:'';width:100%; border-bottom:1px solid #000; transform: scaleY(0.5);}3.用::after设置border：1px solid #000; width:200%; height:200%,而后再缩放scaleY(0.5); 长处能够实现圆角，京东就是这么实现的，毛病是按钮增加active比拟麻烦。
.div::after { content: ''; width: 200%; height: 200%; position: absolute; top: 0; left: 0; border: 1px solid #bfbfbf; border-radius: 4px; -webkit-transform: scale(0.5,0.5); transform: scale(0.5,0.5); -webkit-transform-origin: top left;}7. 媒体查问 + transfrom 对计划1的优化
/* 2倍屏 */@media only screen and (-webkit-min-device-pixel-ratio: 2.0) { .border-bottom::after { -webkit-transform: scaleY(0.5); transform: scaleY(0.5); }}/* 3倍屏 */@media only screen and (-webkit-min-device-pixel-ratio: 3.0) { .border-bottom::after { -webkit-transform: scaleY(0.33); transform: scaleY(0.33); }}感激
万能的网络以及勤奋的本人，集体博客，GitHub