前端面试题系列一(css)

---

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

外边距重叠就是 margin-collapse。
在 CSS 当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合 成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为 折叠外边距。

折叠结果遵循下列计算规则：
1. 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
2. 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值
3. 两个外边距一正一负时，折叠结果是两者的相加的和。

---

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

rgba()和 opacity 都能实现透明效果，但最大的不同是 opacity 作用于元素，以及元素 内的所有内容的透明度，
而 rgba()只作用于元素的颜色或其背景色。（设置 rgba 透明的元素的子元素不会继承 透明效果！）

---

如何垂直居中一个浮动元素？

方式一：已知元素的高度

#div1{
	background-color:#6699FF; 
	width:200px; 
	height:200px; 
	position: absolute; //父元素需要相对定位 
	top: 50%; 
	left: 50%; 
	margin-top:-100px ; //二分之一的 height，width 
	margin-left: -100px; 
}

方式二：未知元素的高度

#div2{
	width: 200px;
	height: 200px;
	background-color: #6699FF;
	margin:auto;
	position: absolute; //父元素需要相对定位 
	left: 0;
	top: 0;
	right: 0;
	bottom: 0; 
}

如何垂直居中img

#imgcontainer{
	display:table-cell;
	text-align:center;
	vertical-align:middle;
}

哪些 css 属性可以继承？

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

css 优先级算法如何计算？

!important > id > class > 标签
!important 比 内联优先级高

• 优先级就近原则，样式定义最近者为准;
• 以最后载入的样式为准;

浏览器的内核分别是什么?

IE 浏览器的内核 Trident、
Mozilla浏览器的内核 Gecko、
google 浏览器的内核 WebKit、
Opera 浏览器的内核 Presto；

CSS3 新增 伪类有那些？

p:first-of-type 选择属于其父元素的首个 p 元素的每个 p 元素。
p:last-of-type 选择属于其父元素的最后 p 元素的每个 p 元素。
p:only-of-type 选择属于其父元素唯一的 p 元素的每个 p 元素。
p:only-child 选择属于其父元素的唯一子元素的每个 p 元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 p 元素。
:enabled、:disabled 控制表单控件的禁用状态。
:checked，单选框或复选框被选中。