前端面试—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>
未知高宽上下左右居中
//css
html,
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