前端面试题系列一(css)

小灰灰 2022-10-17 10:48 184阅读 0赞

### 文章目录 ###

*   *  什么是外边距重叠？重叠的结果是什么？
     *  rgba()和 opacity 的透明效果有什么不同？
     *  如何垂直居中一个浮动元素？
     *  哪些 css 属性可以继承？
     *  css 优先级算法如何计算？
     *  浏览器的内核分别是什么?
     *  CSS3 新增 伪类有那些？

--------------------

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

外边距重叠就是 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，单选框或复选框被选中。