css/3的相关面试题目

来源：互联网发布：java程序异常处理编辑：程序博客网时间：2024/06/18 15:00

我的题目和答案皆来自于网络，不保证正确性哦

1，CSS 选择器有哪些？哪些属性可以继承？优先级算法如何计算？

1.id选择器（#myid） 2.类选择器（.myclassname） 3.标签（元素）选择器（div, h1, p）

关系选择器：4.相邻选择器（h1+p） 5.子选择器（ul>li） 6.后代选择器（li a） 7.兄弟选择器 (ul~li)

8.通配符选择器（ * ） 9.属性选择器（a[rel="external"]）10.伪元素选择器：(E::first-letter)

伪类选择器：11.结构伪类选择器（li:nth-child） 12.UI伪类选择器：(a:hover)

可继承的样式：font、color、cursor、letter-spacing、word-spacing、text-shadow、text-indent等；

不可继承的样式：display、margin、border、padding、background、height、overflow、position等

优先级算法：

1.选择器都有一个权值，权值越大越优先；

2.当权值相等时，后出现的样式表设置要优于先出现的样式表设置；

3.创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式；

4.继承的CSS 样式不如后来指定的CSS 样式；

5.在同一组属性设置中标有“!important”规则的优先级最大；

2，CSS实现垂直水平居中？

一道经典的问题，实现方法有很多种:

// 方法一：已知元素的高宽

CSS：

.content{

background-color:#6699FF;

width:200px;

height:200px;

position: absolute;

top: 50%;

left: 50%;

//二分之一的height，width，或者transform: translate(-50%,-50%)

margin-top:-100px ;

margin-left: -100px;

}

//方法二:未知元素的高宽

CSS：

.content{

background-color:#6699FF;

width:200px;

height:200px;

position: absolute;

margin:auto;

top: 0;

left: 0;

bottom:0;

right: 0;

}

3，列出display的值，说明他们的作用。position的值定位区别？

display 的值的作用：

1.block 象块类型元素一样显示。

2.inline 缺省值。象行内元素类型一样显示。

3.inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。

4.list-item 象块类型元素一样显示，并添加样式列表标记。

position 的值的定位区别：

1.absolute 生成绝对定位的元素，相对于 static 定位以外的第一个祖先元素进行定位。

2.fixed 生成绝对定位的元素，相对于浏览器窗口进行定位（老IE不支持）。

3.relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。

4.static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。

5.inherit 规定从父元素继承 position 属性的值。

4，为什么要初始化CSS样式？

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

最简单的初始化方法就是：

{padding: 0; margin: 0;}

不建议这么书写：因为 *（星号）代表通配符表示了所有的标签。这样的写法是可以的，但会造成所有标签的外部边距和内部边距都变0了。例如<xmp><h1></xmp>标签显示在页面上就变得没有间距了。所以一般是不建议这样写，大家有兴趣可以去查一下淘宝，qq，新浪官网等的初始化样式，代码太多这里就不一一展示了。

5、经常遇到的CSS的兼容性有哪些？原因，解决方法是什么？至少五种css浏览器兼容性的写法。

1.PNG24位的图片在ie6浏览器上出现背景，解决方案是做成PNG8

2.浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}

3.ie6双边距bug:块属性标签float后，又有横行的margin情况下，在IE6显示的margin比设置的大

4.IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用getAttribute()获取自定义的属性；在FireFox下，只能使用getAttribute()获取自定义属性；解决方法：统一通过getAttribute()获取自定义属性

5.IE下，even对象有x,y属性，但是没有pageX,pageY属性；在Firefox下，even对象有pageX,pageY属性，但是没有x,y属性；解决方法：(条件注释)缺点是在IE浏览器下可能会增加额外的HTTP请求数

6.Chrome中文界面下默认会将小于12px的文本强制按照12px显示，可通过加入CSS属性-webkit-text-size-adjust:none解决

6、介绍一下CSS的盒子模型

（1）有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和padding;

（2）盒模型：内容(content)、填充(padding)、边界(margin)、边框(border).

7、行内元素有哪些?块级元素有哪些?

行内元素：a、b、span、img、input、strong、select、label、em、button、textarea

块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote

空元素：即没有内容的HTML元素，例如：br、meta、hr、link、input、img

8、为什么要清除浮动，清除浮动的几种方式，各自的优缺点

浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

1.使用空标签清除浮动clear:both(理论上能清楚任何标签，增加无意义的标签)

2.使用overflow:auto(空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE)

3.是用afert伪元素清除浮动(用于非IE浏览器)，该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素；

4,浮动外部元素

9、什么是CSS Hack,常用的CSS Hack?

不同的浏览器对CSS的解析结果是不同的，因此会导致相同的CSS输出的页面效果不同，这就需要CSS Hack来解决浏览器局部的兼容性问题。而这个针对不同的浏览器写不同的CSS 代码的过程，就叫CSS Hack。

CSS Hack常见的有三种形式：CSS属性Hack、CSS选择符Hack以及IE条件注释Hack， Hack主要针对IE浏览器。 1、属性级Hack：比如IE6能识别下划线”_”和星号” * “，IE7能识别星号” * “，但不能识别下线”_”，而firefox两个都不能认识。

2、选择符级Hack：比如IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html.class{}

3、IE条件注释Hack：IE条件注释是微软从IE5开始就提供的一种非标准逻辑语句。比如针对所有IE：<!–[if IE]><!–您的代码–><![endif]–>，针对IE6及以下版本：<!–[if lt IE 7]><!–您的代码–><![endif]–>，这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

PS：条件注释只有在IE浏览器下才能执行，这个代码在非IE浏览下被当做注释视而不见。可以通过IE条件注释载入不同的CSS、JS、HTML和服务器代码等。

CSS Hack书写顺序:先写FF等非IE浏览器所需样式，其次写IE8所需样式，接着是IE7的，再接着才是IE6的！

一些常用的CSS Hack:

/* CSS属性级Hack */

color:red; /* 所有浏览器可识别*/

_color:red; /* 仅IE6 识别 */

*color:red; /* IE6、IE7 识别 */

+color:red; /* IE6、IE7 识别 */

*+color:red; /* IE6、IE7 识别 */

[color:red; /* IE6、IE7 识别 */

color:red9; /* IE6、IE7、IE8、IE9 识别 */

color:red; /* IE8、IE9 识别*/

color:red9; /* 仅IE9识别 */

color:red ; /* 仅IE9识别 */

color:red!important; /* IE6 不识别!important*/

-------------------------------------------------------------

/* CSS选择符级Hack */

*html #demo { color:red;} /* 仅IE6 识别 */

*+html #demo { color:red;} /* 仅IE7 识别 */

body:nth-of-type(1) #demo { color:red;} /* IE9+、FF3.5+、Chrome、Safari、Opera 可以识别 */

head:first-child+body #demo { color:red; } /* IE7+、FF、Chrome、Safari、Opera 可以识别 */

:root #demo { color:red9; } : /* 仅IE9识别 */

--------------------------------------------------------------

/* IE条件注释Hack */

10、css中可以让文字在垂直和水平方向上重叠的两个属性是什么？

垂直方向：line-height

水平方向：letter-spacing

那么问题来了，关于letter-spacing的妙用知道有哪些么？

答案:可以用于消除inline-block元素间的换行符空格间隙问题。

11、CSS3有哪些新特性？

1.CSS3实现圆角（border-radius），阴影（box-shadow），对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform），transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜

2.增加了更多的CSS选择器、多背景 rgba

3.在CSS3中唯一引入的伪元素是::selection.

4.媒体查询，多栏布局

5.border-image

12、有哪些的隐藏内容的方法 (同时还要保证屏幕阅读器可用)

1.display:none;的缺陷

搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略屏幕阅读器（是为视觉上有障碍的人设计的读取屏幕内容的程序）会忽略被隐藏的文字。

2. visibility: hidden ;的缺陷

这个大家应该比较熟悉就是隐藏的内容会占据他所应该占据物理空间

3.overflow:hidden;一个比较合理的方法

.texthidden { display:block;/*统一转化为块级元素*/ overflow: hidden; width: 0; height:0; }

就像上面的一段CSS所展示的方法，将宽度和高度设定为0，然后超过部分隐藏，就会弥补上述一、二方法中的缺陷，也达到了隐藏内容的目的。

13、px、rem和em的区别

px像素（Pixel）,相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

em是相对长度单位。相对于当前对象内文本的字体尺寸,会继承父级元素的字体大小。

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

选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用调整所有字体大小。

14、请用div+css写出右侧固定(width：200px)，左侧自适应的页面布局。

<style>

*{margin:0;padding:0;}

#box{width:100%;height:200px;position:relative;}

#left{height:100%;margin-right:200px;background-color:orange;}

#right{width:200px;height:100%;top:0;background-color:green;position:absolute;right:0;}

</style>

</head>

<body>

</div>

15、一般用到哪些布局方式？

1.div+css

2.table布局

3.框架

16、CSS引入的方式有哪些?css的基本语句构成是?

有 4 种方式可以在 HTML 中引入 CSS。其中有 2 种方式是在 HTML 文件中直接添加 CSS 代码，另外两种是引入外部 CSS 文件。

1，内联方式，指的是直接在 HTML 标签中的 style 属性中添加 CSS；

2，嵌入方式，是在 HTML 头部中的 <style> 标签下书写 CSS 代码；

3，链接方式，是使用 HTML 头部的 <head> 标签引入外部的 CSS 文件；

4，导入方式，是使用 CSS 规则引入外部 CSS 文件。

17、box-sizing常用的属性有哪些？分别有什么作用？

box-sizing 属性主要用来控制元素的盒模型的解析模式。默认值是 content-box。

content-box ：让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding +

content的宽度/高度决定，设置width/height属性指的是content部分的宽/高

border-box ：让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置width/height属性指的是border + padding + content

标准浏览器下，按照W3C规范对盒模型解析，一旦修改了元素的边框或内距，就会影响元素的盒子尺寸，就不得不重新计算元素的盒子尺寸，从而影响整个页面的布局

18、描述CSS Reset的作用和用途。

Reset重置浏览器的CSS默认属性，浏览器的品种不同，样式不同，然后重置，让他们统一。例如有最简单的

*{margin:0 ; padding:0}；

19、浮动产生的问题和解决办法？

（1）父元素的高度无法被撑开，影响与父元素同级的元素

（2）与浮动元素同级的非浮动元素会跟随其后

（3）若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

使用CSS中的clear:both;属性来清除元素的浮动可解决2、3问题，对于问题1，添加如下样式，给父元素添加clearfix样式：

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

.clearfix{display: inline-block;} /* for IE/Mac */

20、png8和png24有什么区别?如何区别？

1.png8和png24的根本区别，不是颜色位的区别，而是存储方式不同。

2.png8有1位的布尔透明通道（要么完全透明，要么完全不透明，不支持半透明），png24则有8位（256阶）的布尔透明通道（所谓半透明）。png-8和 gif 有一些相似之处，模式都是索引颜色，只支持像素级的纯透明，不支持 alpha 透明。

如何判断图片是png8还是24：

1.在ps里看图像---模式，png8当然只有8位/通道了。（png24有其他的通道可供选择）

2.当打开png8的图片时，ps会默认给它的图片标题上后面加上“索引”两字，png24的则没有。

21、CSS的基本定位方式

CSS的基本定位方式：正常流（static）、浮动（float）、相对定位（relative）、绝对定位（absolute）、固定定位（fixed）。

HTML元素默认采取正常流的方式进行布局，而浮动是HTML布局中最常用的定位方式。

22、写出几种IE6 BUG的解决方法

①.双边距BUG float引起的使用display：inline；

②.3像素问题使用float引起的使用dislpay:inline -3px或者margin-right:-3px

③.超链接hover点击后失效使用正确的书写顺序link visited hover active；

④.IE z-index问题给父级添加position:relative；

⑤.png 透明使用js代码改；

⑥.min-height 最小高度！Important解决’；

⑦.select 在ie6下遮盖使用iframe嵌套；

⑧.为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）；

23、IE和标准下有哪些兼容性的写法？

Var ev = ev || window.event

document.documentElement.clientWidth || document.body.clientWidth

Var target = ev.srcElement||ev.target

24、link 和 @import的区别是？

引用CSS的两种方式：

1.link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

2.link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

3.link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

4.link支持使用Javascript控制DOM去改变样式；而@import不支持。

25、position的值relative和absolute定位原点是？

absolute

生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位。

fixed （老IE不支持）

生成绝对定位的元素，相对于浏览器窗口进行定位。

relative

生成相对定位的元素，相对于其正常位置进行定位。

static

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

inherit

规定从父元素继承 position 属性的值。

26、::before和:after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用。

双冒号是在当前规范中引入的，单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。所以，如果你的网站只需要兼容webkit、firefox、opera等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容IE浏览器，还是用CSS2的单冒号写法比较安全。

27、position:absolute和float属性的异同

A：共同点：

对内联元素设置`float`和`absolute`属性，可以让元素脱离文档流，并且可以设置其宽高。

B：不同点：

float仍会占据位置，position会覆盖文档流中的其他元素。

28、div+css的布局较table布局有什么优点？

改版的时候更方便只要改css文件。

页面加载速度更快、结构化清晰、页面显示简洁。

表现与结构相分离。

易于优化（seo）搜索引擎更友好，排名更容易靠前。

29、知道的网页制作会用到的图片格式有哪些？

png-8，png-24，jpeg，gif，svg。

但是上面的那些都不是面试官想要的最后答案。面试官希望听到是Webp。（是否有关注新技术，新鲜事物）

科普一下Webp：WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。

在质量相同的情况下，WebP格式图像的体积要比JPEG格式图像小40%

30、折叠结果遵循下列计算规则：

两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。

两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。

两个外边距一正一负时，折叠结果是两者的相加的和。

31.rgba()和opacity的透明效果有什么不同？

rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，

而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）

32、a链接的顺序

l-v-f-h-a 既：link-visited-focus-hover-active 这里可能大家很少用到的就是focus，这个其实也是一种链接状态，就是当你在键盘上按Tab键时获得焦点的那个链接的即时状态，遗憾的是ie并不支持（ie中按Tab键显示的效果为a:active时的状态），只有在FF,Opera等浏览器下才能看到效果。就经常性我们就会用成L-V-H-A，这个东西其实还真有点不好记，好多人觉得老是混淆特别是那个A，这里有高人把它比如成“由爱生恨” Love Hate（LV-HA），哈哈好记了吧！

33、CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？

最基本的：

设置display属性为none，或者设置visibility属性为hidden（会占据原来的空间）；

技巧性：

设置display:block,设置宽高为0，设置透明度为0，设置z-index位置在-1000或更；

设置display:block,设置宽高为0，设置透明度为0，设置overflow:hidden；

34、什么是替换元素与非替换元素？

替换元素：

以前对替换元素没有概念，今天查了下资料：替换元素是浏览器根据其标签的元素与属性来判断显示具体的内容。

img、input、textarea、select、object 等都是替换元素，这些元素都没有实际的内容。

替换元素可以增加行框高度，但不增加line-height，内容区高度值 = padding-top + padding-bottom + margin-top + margin-bottom + height。要想替换元素居中，可以设置line-height = height， vertral-align = middle。

非替换元素：

大多数元素是不可替换元素，他们将内容直接告诉浏览器，将其显示出来。比如 p的内容、label的内容；浏览器将把这段内容直接显示出来。

非替换元素添加padding-top或padding-bottom，不影响行框高度，但内容区高度会变化，margin-top，margin-bottom对行框没有任何影响。

添加左右边距会影响非替换元素水平位置。要使非替换元素在父元素框内居中，可以设定line-height = 父元素框的高度。

35、子选择器与后代选择器的区别？

子选择器仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。但由于继承的关系，许多情况下两者效果会差不多。

总结：>作用于元素的第一代后代，空格作用于元素的所有后代。

36、什么是CSS Sprite？CSS Sprites优缺点

CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。

优点

1.利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；

2.CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。

3.解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。

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

诚然CSS Sprites是如此的强大，但是也存在一些不可忽视的缺点，如下：

1.在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景；这些还好，最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂；

2.CSS Sprites在开发的时候比较麻烦，你要通过 photoshop或其他工具测量计算每一个背景单元的精确位置，这是针线活，没什么难度，但是很繁琐；幸好腾讯的鬼哥用 ADOBE AIR开发了一个CSS Sprites 样式生成工具，虽然还有一些使用上的不灵活，但是已经比photoshop测量来的方便多了，而且样式直接生成，复制，拷贝就OK！

3.CSS Sprites在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的地方最好不要动，这样避免改动更多的 css，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动css。

4.CSS Sprites非常值得学习和应用，特别是页面有一堆ico（图标）。总之很多时候大家要权衡一下利弊，再决定是不是应用CSS Sprites。

37、IE和DOM事件流的区别？

1.执行顺序不一样、

2.参数不一样

3.事件加不加on

4.this指向问题

38、css的content属性。

css的content属性专门应用在 before/after 伪元素上，用来插入生成内容。最常见的应用是利用伪类清除浮动。

//一种常见利用伪类清除浮动的代码

.clearfix:after {

content:"."; //这里利用到了content属性

display:block;

height:0;

visibility:hidden;

clear:both;

}

.clearfix {

*zoom:1;

}

after伪元素通过 content 在元素的后面生成了内容为一个点的块级素，再利用clear:both清除浮动。

39、css定义的权重
以下是权重的规则：标签的权重为1，class的权重为10，id的权重为100。如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现。

40、display:inline-block 什么时候会显示间隙？(携程)

移除空格、使用margin负值、使用font-size:0、letter-spacing、word-spacing

41、<meta>标签

举例：

表示该html文档编码格式为UTF-8。

表示3秒后刷新至百度网页。

其中，keywords用于定义针对搜索引擎的关键词，description用于定义针对搜索引擎的描述。

42、在不同浏览器中用空格符“&nbsp”的兼容性问题

解决办法：在空格那一行设置一下字体，把字体设置成任意一种字符等间距的字体就行了。

如：<div style="border:1px #FF0000 solid;font-family:'宋体';white-space:pre;">间距  一个中文字符</div>

43、什么是repaint(重绘)和reflow(渲染)，display:none和visibility:hidden会发生重绘和渲染吗？

repaint(重绘) ，repaint发生更改时，元素的外观被改变，且在没有改变布局的情况下发生，如改变outline,visibility,background color，不会影响到dom结构渲染。

reflow(渲染)，与repaint区别就是他会影响到dom的结构渲染，同时他会触发repaint，他会改变他本身与所有父辈元素(祖先)，这种开销是非常昂贵的，导致性能下降是必然的，页面元素越多效果越明显。

所以display:none会产生reflow，visibility:hidden会出发repaint。

0 0