前端面试题收集(css部分)

时间:2022-10-06 13:47:07

2018-03-18

1、css reset 作用 用途

重置浏览器的css默认属性, 浏览器不同,样式不同,然后重置,让它们统一

2、css hack ?

<!--[if IE6]--><![END if]-->
_margin \\ie6
+margin \\ie7
margin: 0 auto \9 所有ie
margin  \0 \\ie8

3、Css引入方式几种?

主要有行内式、内嵌式、导入式和链接式4

行内式:在标记的style属性中设定css样式

内嵌式:写在<head>和</head>之间的

导入式:@import url("testCss.css");

链接式:link标签引入

4、选择器 

ID选择器、元素选择器、关系选择器、属性选择器、伪类 

5、继承

向下传递到子孙元素。例如字体,颜色

6、层叠

层叠指的是样式的优先级,当产生冲突时以优先级高的为准

  •       根据重要性排名   
    • 用户自定义的 !important
    • 开发者带!important
    • 开发者写的normal
    • 用户自定义的
    • 浏览器默认的
  •    根据顺序:  后面覆盖前面的
  •    根据选择器:(权重)

7、清除浮动的方法

  • 父级div定义 height 
  • 结尾处加空div标签 clear:both 
  • 父级div定义 伪类:after 和 zoom (IE兼容)
  • 父级div定义 overflow:hidden 
  • 父级div定义 overflow:auto 
  • 父级div 也一起浮动 
  • 父级div定义 display:table 
  • 结尾处加 br标签 clear:both

8、水平、垂直以及绝对居中

  • text-align:center  文字
  • vertical-align:middle  按钮。单选
  • line-height 
  • margin:auto
  • 绝对定位居中

9、CSS3的新属性

@Font-face 特性可以用来加载字体样式,而且它还能够加载服务器端的字体文件,让客户端显示客户端所没有安装的字体

Text-overflow 则设置或检索当当前行超过指定容器的边界时如何显示

文字渲染(Text-decoration)

边框和颜色(color, border)

Color:rgba

border-radius: 15px;

渐变效果(Gradient)

阴影(Shadow)

盒子模型(弹性盒子)

Transitions, Transforms 和 Animation Transitions