CSS前端面试集锦,找这些面试题,也是为了查漏补缺,加强一下基础

Link标记:
css使用这个标记来链接样式表和文档
注:link必须放在head元素中
属性:
Type:总是text/css
Href:样式表的URL
Media:说明这个样式表要应用于所有表现媒体
候选样式表:
将rel属性的值设置为alternate stylesheet,就可以定义候选样式表,只有用户选择这个样式表时才会用于文档表现
通过js和这个属性结合可以实现风格转换

Style元素:
一定要有type属性,值为”text/css”。(没有好像也行)
可以使用@import指令指示浏览器加载一个外部样式表,在style容器内使用,且放在其他css规则之前

1.关于浮动和清除浮动
原理:浮动元素脱离文档流,但没有脱离文本流。不占据空间,但是文本不会被覆盖,也就是字围效果。
引发的问题:
(1)父元素的高度无法被撑开,影响与父元素同级的元素
(2)与浮动元素同级的非浮动元素会跟随其后
(3)若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构。
解决办法:
(1)增加一个样式为clear:both的空标签放在浮动元素的父元素的最后。。(强烈不建议,增加代码的同时,如果多层嵌套很容易造成结构紊乱,产生意想不到的问题。)
(2)父元素设置浮动(不建议,如果有嵌套,它的父元素也要设置浮动,无限循环)
(3)使用overrflow,zoom属性: .fix(overflow:hidden;zoom:1;}设置该fix类的标签的内容超出该标签的时候会被隐藏
(4)父元素设置position:这种方式在父元素原本就需要设置position为fixed或absolute的时候可以优先采用。
(5)使用:after:原理类似新的标签然后设置clear:both。但使用伪类的方法没有多余的标签,这个是最常见的方法
.parent:after{
content: ‘’;
height:0;
display:block;
clear:both;
}

2.关于z-index和层叠上下文的形成
z-index:其实指的就是元素在z轴上的呈现顺序。z轴就是人眼看向屏幕的那条线,越靠近人眼越大。
注:z-index只能应用于定位元素(即设置了position属性为非static值)
层叠顺序:
正z-index>z-index:0/auto>inline/inline-block盒子>float盒子>block盒子>负z-index>background/border
注:层叠顺序的前提是在同一个层叠上下文元素中。
层叠上下文的形成:
(1)margin负边距
(2)Position的relative/absolute/fixed定位

3.请问”resetting”和”normalizing”的css之间的区别?如何选择?为什么?
Normalizing注重通用方案,重置掉该重置的样式,保留有用的user agent样式,同时会进行一些bug的修复。
Resetting相对暴力,会将所有元素添加默认样式,影响范围很大,讲求跨浏览器的一致性。 后面需要对所有公共的排版元素重新设置样式,很麻烦。
选择normalizing,因为它是模块化的,拥有详细的文档,保护了有价值的默认值,修复了浏览器的bug

4.盒模型
内容(content),填充(padding),边界(margin),边框(border)
两种,IE盒子模型,标准W3C盒子模型,IE的content部分包含了border和padding

5.BFC(Block Formatting Context)
具有BFC特性的元素可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素。
如何触发BFC(满足下面任一条件就会触发):
(1)body根元素
(2)浮动元素:float除none以外的值
(3)绝对定位和固定定位
(4)Display为inline-block,table-cells,flex
(5)Overflow(除了visible)
常见问题及解决:
(1)同一个BFC下上下外边距会发生重叠(放在不同的BFC容器中)
(2)元素浮动后父元素高度塌陷(清除浮动)
(3)元素被浮动元素覆盖(第二元素触发BFC,可用于左列定宽,右列自适应的两列布局)

6.css sprites
其实就是精灵图,将多个图片融合到一张图里,然后通过css布局到网页上。
好处:图片少了就减少了http请求,提高性能,优化网站。
省去了图片命名的烦恼
缺点:
在自适应的页面可能会出现问题;
后期维护比较麻烦

7.图片替换文字方案
(1)将文本和span标签一起放在父元素中,然后使用这个空白的span覆盖文本,并将背景图应用到span上
缺点:图像不能透明,不然会透出文字
(2)将span元素隐藏起来,在其父元素上添加背景图
(3)使用text-indent属性将文本推出屏幕

8.如何解决浏览器的样式问题
使用通配符*设置。
创建一个初始样式的css文件。将一些基本的样式,和兼容问题写进去

9.有哪些隐藏内容的方法
(1)display:none缺点:搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略
(2)Visibility:hidden缺点:隐藏的内容会占据物理空间
(3)Overflow:hidden

10.栅格系统
栅格系统多用于做响应式布局。一个基本的栅格系统有container(容器),rows(行),columns(列),gutters(列宽),需要考虑在不同的分辨率下,赋予不同的行数和列数。

11.在书写高效css时应该考虑的问题
注意选择器,id选择器效率最高
抽取可重用的代码
考虑布局,先全局后局部

12.使用css预处理器的优缺点
优点:代码优化效率提高,代码结构更清晰优雅,提升开发者体验
缺点:多使用了一个编译器,牺牲了网页加载速度

13.如何实现设计中使用的非标准字体
1.使用图片替换
2.使用在线字体库
3.使用css3中的@font-face

14.css中伪类和伪元素
伪类有:
:active,:focus,:hover,:link,:visited,:first-child,:lang
伪元素有:
:before,:after,:first-letter,:first-line
可以用它们做出好看的交互效果。
两者的区别:
根本区别在于他们是否创造了新的元素(抽象)
一个元素可以同时添加多个伪类,而每一次只能对一个伪元素进行操作

加粗样式

猜你喜欢

转载自blog.csdn.net/weixin_44457144/article/details/87879332