css面试题总括

31.有没有必不可少采取translate替代绝对定位,反之亦然? 为何?

position 是为页面布局而生的。

transform是为动画而生的,不会引起浏览器的重绘和重排。

行使 position 时,最小的动画变化的单位是 1px而采用 transform
参与时,可以做到更小(动画效果越来越平缓)

详尽个人博客:https://lixiaoyu2017.github.io/

15.什么优化网页举行打印?

@media print:打印机

7.CSS百事可乐图是何许?如何实现?

译为“CSS图像拼合”或“CSS贴图定位”, CSS
可口可乐s就是把网页中有的背景图片整合到一张图纸文件中,再利用CSS的“background-image”,“background-
repeat”,“background-position”的构成展开背景定位,background-position能够用数字能规范的平素出背景图片的岗位。

亮点:当页面加载时,不是加载每个独立图片,而是一回加载整个组合图片。这是一个高大的改革,它大大裁减了HTTP请求的次数,减轻服务器压力,同时缩小了停止加载图片所急需的日子推迟,使效益更通畅,不会暂停。

症结:做图像拼合的时候很辛勤。

16.为写出高性能的CSS,需要留意如何陷阱?

Bootstrap 1

Bootstrap 2

Bootstrap 3

21.声明一下盒模型,怎么告诉浏览器采取不同的盒模型举办布局渲染?

正规盒模型与IE的怪异盒模型&弹性盒模型 IE怪异形式(无首行文档类型时)

标准:width=content

IE怪异格局:width=border+padding+content

专业浏览器下模仿怪异盒模型

box-sizing:border-box;

弹性盒模型

box-flex是分配剩余空间,针对块级元素有效

用阐明就是专业形式

6.clear属性有什么样?它有如何适用场景?

clear 属性设置一个因素的侧面是否同意任何的变型元素。

left :在左侧不允许浮动元素

right :在右手不同意浮动元素

both :在左右两侧均不容许浮 动元素

none:默认。允许浮动元素出现在两侧。

当一个器皿中的元素全体变迁之后,由于变化会让要素脱离普通文档流,所以对于外界的那一个容器来讲它就从未内容将它撑开,背景设置无法展现,margin设置不能够出示。

9.如何处理特定浏览器的样式问题?

CSShack(利用了那多少个浏览器的漏洞价格,专门用那几个漏洞来缓解兼容性问题):条件hack、属性级hack(_color:IE6;color:IE7;color:#090\9:IE9)、采取符级hack3
html是IE6;*+html是IE7)

14.熟谙怎么为SVG设置样式吗?

矢量图形

19.证实浏览器是何许规定和CSS拔取器相匹配的因素的?

从后往前判断。符合就持续上一步,不符合就删除继续找

12.有没有使用过grid系统?假诺用过,你喜爱哪个?

是CSS为布局新增的一个模块。网格布局特性主假若针对于Web应用程序的开发者。可以用这多少个模块实现无数例外的布局。网络布局可以将应用程序分割成不同的上空,或者定义他们的大小、地点以及层级。

18.如何兑现接纳了非标准字体的网页设计稿?

图片代替, fonts在线字库, 网络字体fonticon使用字体图标

25.relative,fixed,absolute以及static的要素有如何界别?

static 默认

relative相对定位(相对于自己的起来地点),空间不自由,未脱离原先的文档流。

absolute相对定位(相对于上顶级已稳定的父元素),空间释放,脱离文档流。

fixed 固定定位(相对于浏览器),IE6及往日不帮忙。

inherit 继承

22.*{box-sizing: border-box;}什么意思?有怎么着亮点?

相当于以怪异情势解析,border和padding全会在你设置的涨幅内部。

譬如说手机端设置两行并排的布局,宽度各为50%,假使不用这些特性,设置border后左侧的div会下来错位,设置这么些特性,宽度如故50%而不是50%+*px,两行可以并列显示

5.解释一下BFC(block formatting context)和做事原理?

BFC(Block Formatting Context)直译为“块级格式化范围”

个中的Box会在笔直方向,一个接一个地停放。

Box垂直方向的偏离由margin决定。属于同一个BFC的两个相邻Box的margin会暴发重叠

各样元素的margin box的左侧, 与含蓄块border
box的左手相接触(对于从左往右的格式化,否则反而)。固然存在浮动也是如此。

BFC的区域不会与float box重叠。

BFC就是页面上的一个切断的独自容器,容器里面的子元素不会影响到外围的元素。反之也这样。

测算BFC的万丈时,浮动元素也涉足统计

用处:解决子元素浮动,父元素中度塌陷。

两列自适应布局

合并外边距

10.何以配合某种意义受限的浏览器?

13.是不是使用过媒体询问或实现过一定移动端特定布局?

媒体询问,设置页面样式随屏幕宽度的变迁而转变(IE8和IE8以前都不帮助)

“`

传媒询问 media queries:

@media screen:屏幕设备(手机、IPAD之类的)

@media print:打印机

@media projector:投影仪

@media screen and (min-width: 480px) and (max-width: 760px){

body{

1.CSS3 – Media Query(最简单易行的法门)

2.依赖原生的JS(成本高,不引进)

3.第三方开源框架 bootstrap(可以很好的浏览器响应式布局的筹划)

“`

传媒询问 media queries:

@media screen:屏幕设备(手机、IPAD之类的)

@media print:打印机

@media projector:投影仪

@media screen and (min-width: 480px) and (max-width: 760px){

body{

1.CSS3 – Media Query(最简便的主意)

2.凭借原生的JS(成本高,不引进)

3.第三方开源框架 bootstrap(可以很好的浏览器响应式布局的设计)

em相对与父元素单位大小的;rem相对与html根元素单位大小的;

30.有没有采用过retina图像?如果运用过,在什么意况下利用的什么样技能?

与几倍图有关

23.历数你所知晓的display属性值?

Bootstrap 4

24.inline和inline-block有咋样分别?

inline:元素不会把持一行,六个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而生成。

安装宽高无效,水平方向的padding-left, padding-right, margin-left,
margin-right都爆发边距效果; 但竖直方向的padding-top, padding-bottom,
margin-top, margin-bottom不会发出边距效果。

inline-block:将目标展现为inline对象,然则对象的内容作为block对象显示

既具备block的幅度中度特性又独具inline的同行特性。

8.你最欣赏的图样替换技术是什么样?你会在怎么时候使用?

设计师可以用一张背景图像取代某元素中的原始文字,以期显示出更美妙的书体意义:而图像替换技术则保留了被替换元素中的原有文本,因而无论是对何种客户而言,理解页面内容都不成问题。首尽管考虑SEO,而非视觉上的效益。

1.class和id有哪些不同?

id类名唯一,在页面中只可以冒出两回,更多地被用来贯彻宏伟布局和设计带有块,或含有框的体制。

id是先确定页面的社团和内容,然后再为它定义样式

class类名不唯一,被频繁调用,先确定样式在确定结构和内容

17.CSS预处理器的利弊是什么样?描述您采用过的CSS预处理器中您喜爱的和不爱好的地点?

预处理器例如:LESS、Sass、Stylus,用来预编译Sass或less,

缺点:简单的话CSS预处理器语言较CSS玩法变得更尖端了,但还要降低了和谐对最后代码的控制力。进步了门道,上手门槛,维护门槛,再来是团伙完全品位和标准的门路。这也招致了初学学习成本的高昂。

优点:增强了css代码的复用性,
还有层级、mixin、变量、循环、函数等,具有很有益于的UI组件模块化开发力量,极大的增强工作功效

20.叙述一下伪元素及它的用处?

Bootstrap 5

1、利用 after 清除浮动

.clearfix:after {content:”.”; display:block; height:0;
visibility:hidden; clear:both; }

.clearfix { *zoom:1; }

Bootstrap,2、伪元素与 css sprites Pepsi-Cola图

3、作为列表序号

4.超链接特效

5.划线

26.‘C’代表级联。CSS末了规则是按怎么样优先级确定的?(能不可以举一些例证)如何充分利用这几个总括规则?

权重值:!important > 内联 > id(100) > class(10)
>标签(1)

css选择器: id class >(子代) ’ ‘(后代),(分组) :(伪类) [
](属性)

4.解释一下z-index和叠加上下文是哪些形成的?

负边距
margin为负值时元素会依参考线向外偏移,没有测算好会折叠,position会爆发折叠,且有z-index属性

同级元素的z-index值尽管相同,则堆叠顺序由元素在文档中的先后地方决定,后出现的会在上头,

z-index值只控制同一父元素中的同级子元素的堆叠顺序。父元素的z-index值(倘若有)为子元素定义了堆叠顺序(css版堆叠“拼爹”)

2.CSS resetting和CSS normalizing 有什么样不同?你赞成于选取哪一类方案?

normalize相对温和,注重通用方案,重置掉该重置的样式,保留有用的 user
agent 样式,同时开展一些 bug 的修补,他是模块化的,有详细的文档

Reset
相对暴力,不管你有没有用,统统重置成一样的功用,且影响的限制很大,讲求跨浏览器的一致性。

几乎拥有的元素施加默认样式

3.叙述一下float,并解释一下它的效用格局?

float属性定义了元素是否变动及在哪个方向变化,在CSS中任何因素都足以生成,且变动元素会转变一个块级框,而不论它自己是何种元素。并且盒子的小幅不在伸展,而是遵照盒子里面的始末的宽窄来确定。
浮动属性会使得浮动的要素脱离文档流,所以文档的平常流中的块框会表现的像浮动框不存在同样

28.研究过CSS的新属性 flex和grid吗?

flex弹性布局flex | inline-flex

当即安装flex布局之后,子元素的 float、clear、vertical-align
的习性将会失灵。

有上面六种属性可以设置在容器上,它们分别是:

flex-direction :决定主轴的大势(即项目标排列方向)

flex-wrap:决定容器内项目是否可换行

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

justify-content:定义了连串在主轴的对齐模式。

align-items:定义了项目在交叉轴上的对齐情势

align-content:定义了多根轴线的对齐形式,如若项目只有一根轴线,那么该属性将不起效率

grid—–见12题

27.应用过怎样CSS框架?你是咋样改变/立异它的?

Bootstrap三种动态css语言LESS和SASS,给css提供了变量,mixin,运算符等功效,让写出模块化的css框架成为可能

(以下是祥和在网络上总括的css基础面试题,欢迎补充和纠正)

11.从视觉旅长内容隐藏有什么方法?(内容对屏幕阅读器可见)

display:none可以让网页中具有情节不出示

visibility:hidden 被埋伏掉的情节依旧占据空间

overflow:hidden那种模式得以隐蔽掉固定区域外的情节

29.响应式设计和自适应设计有怎么着区别?

自适应是为着缓解什么才能在不同尺寸的设备上显现均等的网页

响应式正是为精晓决自适应在小屏幕查看过于拥堵而衍生出来的概念。它可以自动识别屏幕宽度、并做出相应调整的网页设计,布局和显示的情节可能会拥有改变。

相关文章