CSS——面试题第一篇

目录

1、有哪些选择符，优先级的计算公式是什么？行内样式和！important哪个优先级高？

2、CSS 的盒模型由什么组成？

3、哪些 css 属性可以继承？

4、css 优先级算法如何计算？ 

5、什么是外边距重叠？重叠的结果是什么？

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

7、html 常见兼容性问题？

8、CSS 的盒子模型有哪两种？

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

10、inline-block 标签元素有哪些？

---

1、有哪些选择符，优先级的计算公式是什么？行内样式和！important哪个优先级高？

#id > .class > 标签选择符     

!important 优先级高

---

2、CSS 的盒模型由什么组成？

内容，border ,margin，padding

---

3、哪些 css 属性可以继承？

 可继承： font-size font-family color  ul li dl dd dt
 不可继承 ：border padding margin width height 

---

4、css 优先级算法如何计算？ 

!important > id > class > 标签
!important 比 内联优先级高
* 优先级就近原则，样式定义最近者为准;
* 以最后载入的样式为准;

---

5、什么是外边距重叠？重叠的结果是什么？

答案：
 外边距重叠就是 margin-collapse。
 在 CSS 当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结
合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距
称为折叠外边距。
 折叠结果遵循下列计算规则：
1. 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
2. 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
3. 两个外边距一正一负时，折叠结果是两者的相加的和

---

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

 设置 display 属性为 none，或者设置 visibility 属性为 hidden

 设置宽高为 0，设置透明度为 0，设置 z-index 位置在-1000

---

7、html 常见兼容性问题？

1.双边距 BUG float 引起的 使用 display
2.3 像素问题 使用 float 引起的 使用 dislpay:inline -3px 
3.超链接 hover 点击后失效 使用正确的书写顺序 link visited hover active
4.Ie z-index 问题 给父级添加 position:relative
5.Png 透明 使用 js 代码
6.Min-height 最小高度 ！Important 解决
7.select 在 ie6 下遮盖 使用 iframe 嵌套
8. 为 什 么 没 有 办 法 定 义 1px 左 右 的 宽 度 容 器 （ IE6 默 认 的 行 高 造 成 的 ， 使 用
over:hidden,zoom:0.08 line-height:1px）
9.IE5-8 不支持 opacity，解决办法：
.opacity {
 opacity: 0.4
 filter: alpha(opacity=60); /* for IE5-7 */
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/
}
10. IE6 不支持 PNG 透明背景，解决办法: IE6 下使用 gif 图片

---

8、CSS 的盒子模型有哪两种？

IE盒子模型、标准 W3C 盒子模型；IE 的 content 部分包含了 border 和
pading;
盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)

---

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

 1. block 像块类型元素一样显示。
 none 缺省值。向行内元素类型一样显示。
 inline-block 像行内元素一样显示，但其内容像块类型元素一样显示。
 list-item 像块类型元素一样显示，并添加样式列表标记。
 2. position 的值
 *absolute
 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
 *fixed （老 IE 不支持）
 生成绝对定位的元素，相对于浏览器窗口进行定位。
 * relative
 生成相对定位的元素，相对于其正常位置进行定位。
 * static 默认值。没有定位，元素出现在正常的流中
 *（忽略 top, bottom, left, right z-index 声明）。
 * inherit 规定从父元素继承 position 属性的值。

---

10、inline-block 标签元素有哪些？

 <input> 、<img> 、<button> 、<textarea> 、<label>等

---

---

---

 记得有人说过，平安夜发信息给别人，不仅能给别人带来快乐，更能带来好运。

认识你是我此生最大的快乐，愿你快乐不断，好运连连。