web前端面试题后续更新 7.11

因为前两天是周末嘛 所以可能就是比较懒 就没有更新了 然后就是今天恢复营业 接着更新面试过程中会碰到html、css的面试题:

1:css选择器有哪些，选择器的权重的优先级

选择器类型

(1)、ID #id

(2)、class .class

(3)、标签　　p

(4)、通用　　*

(5)、属性　　[type="text"]

(6)、伪类　　a: hover

(7)、伪元素　　li: nth - child

(8)、子选择器（ul < li） 、相邻选择器（h1 + p）、后代选择器（li a）

权重计算规则

一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。

!important 比 内联优先级高

(1). 第一等：代表内联样式，如: style=””，权值为1000。

(2). 第二等：代表ID选择器，如：#content，权值为0100。

(3). 第三等：代表类，伪类和属性选择器，如.content，权值为0010。

(4). 第四等：代表标签和伪元素选择器，如div p，权值为0001。

(5). 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。

(6). 继承的样式没有权值。

(7).相同权重

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

继承性

可继承： font-size font-family color;

不可继承 ：border padding margin width height ;

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，单选框或复选框被选中。

2:css中，对DOM元素设置不显示的方式

display:none；隐藏，并且不占位 ，宽高各种属性值，都‘丢失’
visibility：hidden;隐藏，占位，仅是视觉上‘看不见’
width:0;height:0;overflow:hidden;这只是通过设置元素的大小使元素不显示

3:超链接访问过后，hover样式就不出现的问题是什么，如何解决

问题是：a标签的四种状态，排序出问题了。

正确排序：L-V-H-A

love hate原则，即l（link）ov（visited）e h（hover）a（active）te。

a:link 普通的、未被访问的链接

a:visited 用户已访问的链接

a:hover 鼠标指针位于链接的上方

a:active 链接被点击的时刻

4: 什么是 Css Hack？ie6,7,8 的 hack 分别是什么？

针对不同的浏览器写不同的 CSS code 的过程，就是 CSS hack。

5. 行内元素和块级元素的具体区别是什么？行内元素的 padding 和 margin 可设置吗？

(1):块级元素(block)特性：

总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;

宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

(2):内联元素(inline)特性：

宽度(width)、高度(height)、内外边距的上下都不可设置，内外边距的左右可设置，其大小就是里面文字或图片的大小。

(3):inline-block 元素

拥有内在尺寸，可设置高宽,但不会自动换行

<input> 、<img> 、<button> 、<texterea> 、<label>。

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

外边距重叠就是 margin-collapse。

折叠外边距 :在 CSS 当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。

折叠结果遵循下列计算规则：

两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。

两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。

两个外边距一正一负时，折叠结果是两者的相加的和。

7:rgba()和opacity的区别

opacity作用于元素，以及元素内的所有内容的透明度(元素会继承其属性)
而rgba()只作用于元素的颜色或其背景色(设置rgba透明的元素的子元素不会继承透明效果)

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

垂直方向：line-height

水平方向：letter-spacing 增加或减少字符间距。

可用于消除 inline-block 元素间的换行符空格间隙问题。

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

方法一：.child{

  height: 100px;

position: absolute;//父元素相对定位

top:50%;

left:50%;

transform: translate(-50%,-50%);

}

方法二：.child{

width: 100px;

height: 100px;

position: absolute;

top:50%;

left:50%;

margin-top: -50px;

margin-left: -50px;

}

方法三：child {

width: 100px;

height: 100px;

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: auto

}