css 面试题

1.区分弹性布局 ，浮动布局，table 布局的定义？

2.简述css3 选择器优先级以及计算？

3.详细说明css 3 新特性？

4.padding 和 margin  有什么区别？

5.简述行内元素有哪些？块级元素有哪些？

6.css 引入的方式有哪些？ link 和 import  区别是？

7.简述css 选择符有哪些？

8.描述css  reset 的作用和用途？

9.css清除浮动的几种方式，各自的优缺点？

10.简述css 隐藏元素的几种方法？

11.css 居中（包括水平居中和垂直居中）的方法？

12.解释css 的盒子模型？

13.css选择符有哪些？哪些属性可以继承？

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

15.解释什么是css hack？

16.css  position:absolute 和 float 属性的异同？

17.请阐述css3 新增伪类举例？

18.为什么要初始化css 样式？

19.css 属性position 的属性值有哪些，描述他们的作用？

20.阐述css 的加载权重？

21.使用css 预处理器的优缺点有哪些？

22.假若你有5个不同的css文件，加载进页面的最好方式是？

在main.js 中引入所有的css 文件。

23.列出display的值，说明他们的作用。position 的值，relative 和absolute 定位原点是？

24.用过媒体查询，或针对移动端的布局/css 吗？

25.如何优化网页的打印样式？

26.简述写高效css 时 会有那些问题需要考虑？

27.解释下浏览器是如何判断元素是否匹配某个css选择器？

28.css 的基本语句构成是？

29.css 如何隐藏网页内容，只让他们在屏幕阅读器上使用？

使用aria-hidden

<div aria-hidden="true">这段内容会被隐藏，但对屏幕阅读器可见。</div>

30.css有哪些基本选择器？他们的权重是如何表示的？

31.css浮动元素引起的问题和解决方法是什么？

32.简述css 的哪些样式可以继承？哪些不可以继承？

33.如何用div+css 实现3栏布局（左右固定100px,中间自适应）

34.解释一下css sprite，以及如何在页面或网站中使用它？

35.简要描述css 中content 属性的作用？

36.css 如何定义高度很小的容器？

37.如何在图片下方设置几像素的空白空隙？

38.如何解决ie6 双倍margin 的bug ?

39.如何让超出宽度的文字显示为省略号？

40.css 如何使英文单词发生词内断行？

overflow-wrap:break-word

41.如何实现ie6 下的position:fixed

42.css如何让min-height 兼容ie6?

43.如何将已知高度的容器如何在页面中水平垂直居中？

44.简述网页制作会用到哪些图片格式？

45.对行内元素设置margin-top和margin-bottom 是否起作用？

46.简述div+css 的布局较table 布局有什么优点？

47.简述你对ifc 规范的理解？

48.简述gfc规范的理解？

49.简述对ffc 规范的理解？

50.访问超链接后hover 样式就不出现的原因是什么？应该如何解决？

51.简述css 什么是外边距重叠？重叠的结果是什么？

52.简述css 什么是外边距重叠？重叠的结果是什么？

53.解释rgba 和 opacity 的透明效果有什么不同？

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

55.简述有什么方式可以对一个dom 设置他的css ?

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

1. ‌display: none‌：这个属性会使元素完全从文档树中隐藏，不占据任何空间‌12。
2. ‌visibility: hidden‌：这个属性会使元素隐藏，但仍然占据页面布局空间，只是不可见‌12。
3. ‌opacity: 0‌：通过将元素的透明度设置为0，使其完全透明但仍然占据空间并可交互‌12。
4. ‌position: absolute; left: -9999px‌：通过将元素绝对定位并移出可视区域，使其不可见但占据空间‌13。
5. ‌clip-path: inset(100%)‌：通过裁剪元素内容至完全不可见区域‌1。
6. ‌设置宽高为0‌：将元素的宽度和高度设置为0，使其不可见但占据空间‌45。
7. ‌z-index: -1000em‌：通过设置z-index为负值，使元素在堆叠顺序中位于其他元素之下，从而不可见‌45。

57.简述常用的块属性标签及其特征有哪些？

58.如何避免文档流中的空白符 合并现象？

    CSS 的 white-space 属性可以控制空白符的处理方式。常用值包括：

• normal：默认，合并空白符。
• nowrap：合并空白符，但禁止换行。
• pre：保留空白符，不合并。
• pre-wrap：保留空白符，允许换行。
• pre-line：合并空白符，但保留换行符。

59.透明度具有继承性，如何取消透明度的继承性？

使用rgba

60.简述css中，自适应的单位有哪些？

百分比  rem vw vh   em 

61.简述rem 和em 的区别？

62.解释first-child 和first-of-type 的区别是什么？

63.简述当使用transform:translate 属性时会出现闪缩现象，如何解决？

64.css3 动画如何在动作结束时保持该状态不变？

65.简述用两种方式实现某div 元素以每秒50px 的速度左移100px?

66.简述content-box 盒模型？

67.简述padding-box 盒模型？

68.简述border-box 盒模型？

69.简述css3 动画的特点？

70.简述animation 和 transition 的异同？

71.简述animation 属性值有哪些？

72.解释媒体查询的使用方法？

73.如何设置css3 文本阴影？

74.如何把元素从左侧移动50像素，从顶端移动100像素？

75.css 如何把一个元素旋转30度？

76.如何利用css3 制作淡入淡出的动画效果？

77.简述css 盒阴影的原理？

78.简述css 如何为盒子添加蒙版？

79.如何通过css3 实现背景颜色线性渐变？

80.简述如何实现css3 倒影？

81.css当元素不面向屏幕时其可见性如何定义？

82.简述css3 中 transition 属性值及含义？

83.css 如何相对于内容框定义图像？

84.简述css 中background-clip  和 background-origin   的区别？

85.解释为了把文本分隔为4列并使两列之间间隔30px 应该如何实现？

div{

-moz-column-count：3；

/* Firefox /-webkit-column-count：3；

/* Safari和 Chrome*/

column-count：3；

-moz-column-gap：40px；

/*Firefox*/

-webkit- column-gap：40px；

/* Safar1和 Chrome*/

column-gap：40px；

width：600px；

}

87.css3 如何用省略号显示超出文本的内容？

88.css 如何实现文本换行？

89.css 如何实现自适应布局？

90.如何解决通过transform 进行skew 变形，rotate 旋转会出现锯齿现象的问题？

91.css 如何禁止复制或选中文本？

92.简述什么是css 预处理器/后处理器？

93.以css3 标准定义一个webkit 内核浏览器识别的圆角（尺寸随意）？

94.简述css 如何实现超出隐藏省略？

95.css  position 有哪些值，他们的作用和定位原点是什么？

96.简述css3 实现动画的方式？

97.简述css 怎么画一个大小为父元素一半的正方形？

98.简述css 实现自适应正方形，等宽高比矩形？

99.简述css 实现两栏布局的方法？

100.简述bfc 会与float 元素相互覆盖吗 为什么？举例说明？