CSS面试须知,哪些需要掌握得CSS技巧

2021-03-12 19:58:42 字数 4965 阅读 3428

1楼:云南新华电脑学校

主要都围绕知识点的理解与css兼容性问题上,请参考下面的

2.1 link和@import都可以为页面引入css文件,其区别是?

将样式定义在单独的.css的文件里,link和@import都可以在html页面引入css文件。有link和@import两种方式,导入方式如下:

link方式:

@import方式:

2.11 在设置文本的字体时,为什么建议设置替换字体?

可以使用font-family属性来指定文本的字体,**如下所示:font-family:name/inherit;

此时,name为首选字体的名称。如果字体名称有多个单词,即中间有空格,则需要将字体名称用一对单引号或者双引号包围起来。

但是,如果用户机器上并没有安装name所指定的字体,则会显示默认字体。因此,如果可以指定一种替代字体,替代字体可以和指定字体不完全相同,相似且不会影响页面的布局,就可以解决问题了。

我们可以为font-family属性指定多种字体,且多种字体之间用逗号隔开,这样可以为页面指定一个字体列表。如果用户机器没有第一种字体,则浏览器会查找字体列表中的下一种字体替代默认字体显示。如果找遍了字体列表还是没有可以使用的字体,浏览器才会使用默认字体显示页面。

**如下所示:

h1此时,如果用户机器上没有安装ge***ia,但安装了times字体(serif字体系列中的一种字体),浏览器就可能对元素使用times。尽管times与ge***ia并不完全匹配,但至少足够接近。

因此,我们建议在所有font-family规则中都提供一个通用字体系列。这样就提供了一条后路,在用户机器无法提供与规则匹配的特定字体时,就可以选择一个通用字体作为替换。

2.12 内联元素可以实现浮动吗?

在css中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。因此,对于内联元素,如果设置为浮动,会产生和块级框相同的效果。

2.13 什么情况下需要额外设置**的显示规则?

默认情况下(不额外设置**的显示规则时),**按照自动**布局进行显示,即浏览器在显示表之前查看每一个单元格,然后基于所有格的设置计算表单大小,而列的宽度是由列段元个中没有折行的最宽的内容设定的。此时,单元格的大小会适应内容的大小。

自动**布局的算法在**复杂时会比较慢,这是由于它需要在确定最终的布局之前访问**中多有的内容。在不能提前确定每一列的大小时,这种方式会非常适用。

如果额外设置**的显示规则,即设置table-layout属性的值为fixed,则称为固定**布局。在固定**布局中,水平布局仅取决于**宽度,列宽度,**边框宽度,单元格间距,而与单元格的内容无关。浏览器将使用某列指定的宽度来计算布局,并使用该宽度计算该列中所有其他单元格的宽度。

固定**布局与自动**布局相比,允许浏览器更快地对**进行布局。因为如果指定使用固定**布局,浏览器在接收到第一行后就可以显示**。如果**庞大且已经指定了大小,则会加速表的显示。

2.14 简要描述css中content属性的作用

content属性与:before及:after伪元素配合使用,来插入生成内容,可以在元素之前或之后放置生成的内容。

可以插入文本、图像、引号,并可以结合计数器为页面元素插入编号。比如,查看如下**:

body

h1:before

h1 使用content属性,并结合:before选择器和计数器counter,可以在每个元素前插入新的内容。

2.15 css sprite是什么,谈谈这个技术的优缺点

css sprite是一种网页**应用处理方式,就是把网页中一些背景**整合到一张**文件中,再利用css的”background-image”,”background-repeat”,”background-position”的组合进行背景定位。

其优点在于:①减少网页的http请求,提高性能,这也是css sprite最大的优点,

也是其被广泛传播和应用的主要原因;

②减少**的字节,多张**合并成1张**的字节小于多张**的字节总和;

③较少了命名困扰,只需对一张集合的**命名,不需要对每一个小元素进行命名提高制作效率;

④更换风格方便。只需要在一张或少张**上修改**的颜色或样式,整个网页的风格就可以改变,维护起来更加方便;

但是css sprite也存在一些不可忽视的缺点:

①**合成比较麻烦;

②背景设置时,需要得到每一个背景单元的精确位置;

③维护合成**时,最好只是向下加**,而不是更改已有**。

2.16 对css3有了解吗?列举几个css3的新特性并简要描述

css3作为css技术的升级版本,着力于模块化发展,将规范分解为一些小的模块,如选择器、盒子模型、列表模块、背景和边框等;并加入了很多新的模块和属性,比如赋值选择器、文字阴影、边框圆角、边框阴影、渐变、过渡、多栏布局、2d/3d转换、动画等。

其中,css3提供了一些复杂选择器,用于实现页面复杂情况下的元素选择,如属性选择器,一些伪类和伪元素选择器;渐变用于为元素设置渐变效果的背景;转换可以实现元素的变换,比如位移、缩放、旋转等;过渡可以实现简单的动画效果;动画属性则可以实现复杂的动画,可以实现逐帧制作动画。

2.17 过渡与动画的区别是什么?

过渡属性transition可以在一定的事件内实现元素的状态过渡为最终状态,用于模拟一种过渡动画效果,但是功能有限,只能用于制作简单的动画效果;

动画属性animation可以制作类似flash动画,通过关键帧控制动画的每一步,控制更为精确,从而可以制作更为复杂的动画。

2.18 什么是css reset?

css reset,又叫做css重写或者css重置,用于改写html标签的默认样式。

有些html标签在浏览器里有默认的样式,例如p标签有上下边距,li标签有列表标识符号等。这些默认样式在不同浏览器之间也会有差别,例如ul默认带有缩进的样式,在ie下,它的缩进是通过margin实现的,而firefox下,它的缩进是由padding实现的。着必然会带来浏览器兼容问题。

因此,在css**中,可以使用css**去掉这些默认样式,即重新定义标签样式,从而覆盖浏览器的css默认属性,即css reset。

需要注意的是,在进行样式重写时,不建议使用 * 选择器进行重写,这样会降低效率,影响性能。

2.19 如何清除浮动元素所带来的影响?

浮动定位是指将元素排除在普通流之外,并且将它放置在包含框的左边或者右边,但是依旧位于包含框之内。也就是说,浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中,所以元素浮动之后,其原有位置不再保留,其他元素的位置会受到影响。

如果需要清除左侧或者右侧浮动元素带来的影响,则可以使用clear属性来设置。另外,包含框呃逆的子元素浮动后,如果包含框没有设置具体的高度,则其高度会发生变化,此时,可以使用overflow属性来清除子元素浮动后带来的影响。

2.20 谈谈你对浏览器兼容性问题的理解

浏览器的类型及版本的不同会造成css效果不尽相同,因此需要实现浏览器兼容,也可以针对不同的浏览器编写不同的css。

目前,各主流浏览器的新版本,对应w3c的标准支持很好,因此,首先保证**符合w3c的标准,这是解决浏览器兼容问题的前提。

其次,对于某些支持受限的属性,针对不同的浏览器添加相应的前缀,比如-webkit-、-o-、-moz-。

第三,对于ie的低版本,可以编写带有特定前缀的**,实现版本识别。比如:

.bb另外,对于特定的兼容性问题,特殊解决。常见的特殊问题有:

1.使用css reset:对于有些html标签,浏览器默认的margin和padding不同,可以使用css**改写默认的样式效果,从而实现统一

2.ie低版本中,不能使用auto关键字实现块级元素居中显示,可以改用设置父元素的text-align;

3.子元素设置上外边距时,父元素需要设置边框或者外边距;

4.外边距合并问题。

2楼:杭州千峰

css是前端三要素之一,通过使用css样式设置页面的格式,可将页面的内容与表现形式分离。对于每一个参加杭州web前端学习的人来说,css是他们必须要掌握的技能之一,不仅要牢记理论知识,还要熟练应用。

1、文字居中兼容

正常处理文字上下居中的手段是让元素height和line-height相等,但是安卓环境下当字体大小<14px/0.7rem的时候会出现居中失效的情况。

解决方法:

1)判断系统环境(安卓/ios)分别作微调;

2)font-size、height、width全部放大为2倍,利用transform进行缩放

2、**自适应占位方式

当**未正确加载,或加载完成前,由于**高度为0,其容器会因为没有内容,导致容器无法撑高而塌陷,而如果加载较慢则会再**加载完成后出现闪烁的情况。

css中,当padding-top/bottom值为百分比时,其值都是以其父元素的宽度为参照对象。因此对于宽高比例固定的情况,可以利用padding-top/bottom用于**自适应占位,解决页面闪烁的问题。

如果仅设置值padding-top/bottom为百分比,会出现一个问题,就是该方法容器的max-height属性会失效,就无法限制容器的最大高度了。因此,可以给容器添加一个伪元素的子元素用于撑起内容,该子元素拥有一个padding-top:100%,同时给容器一个max-height尝试限制容器的高度,最后内容用绝对定位的方式添加即可。

3、使用currentcolor来简化css

设置border-color、background-color等颜色的时候,可以使用currentcolor[与当前元素的字体颜色相同]来简化css。

.div

4、曲线阴影的实现

多个阴影重叠,就是正常阴影+曲线阴影。

正常情况下,有个矩形有正常的阴影,作为主投影,这时候再定义一个有一定弧度圆角的圆角矩形,然后放在正常矩形的下面,并露出一点点底部有弧度的阴影,这样的话就可以形成曲线投影的效果。

5、翘边阴影的实现

利用:before和:after,加上绝对定位的性质,可以形成一个矩形,这个时候结合css3的倾斜属性skew和旋转属性rote。

就可以形成一个有旋转角度的平行四边形,这个时候再和原来的矩形重叠,则可产生翘边效果。

做前端的PS必须会的知识是哪些,学web前端必须掌握哪些需要掌握ps吗?

1楼 儒雅的田子 系统版面工具的认识 熟悉每项工具的使用方法 2楼 熙泛 切图吧。 基本功能了解就不用说了。 至少要保证能把要用到的 弄出来 简单的 处理要会些,如果你的前端工作性质基本是敲 写脚本做开发的话,一般可以给设计和美工去处理。 如果你是偏向设计的。那就要会比较多了。效果处理,设计,调色等...

骑马的技巧是什么?应该注意什么,骑马需要掌握哪些技巧

1楼 来生泪归羽 生手骑马技巧 1 永远不要站在马的后方和侧后方,防止被踢。。 2 上马前一定让领队或马主检查一下肚带是否系紧,系紧后才能上马,肚带不系紧容易转鞍,这是最危险的。骑行中每隔一段时间也要检查一下肚带的松紧程度。 3 选择鞍上带铁环的马,铁环帮助你保持平衡。 4 正确的骑马姿势是 脚前半...

大学生人际交往中需要掌握哪些基本的交往技巧

1楼 魔法的力量 我上大学之前,本来是想着跟室友和平相处,但是没有想到还就是会碰到矛盾,不过这个是不可避免的,在大学期间,我担任过宿舍长 班长,也见过了形形色色的人,对此我总结了以下几点,希望能都帮助到大家。 1 别人的东西能不拿就不拿,别人买东西给你也就拿一点点,因为人家不是真的想要给你吃,只是出...