面试遇到的问题

目录

一.css选择器有哪些，选择器的权重的优先级

二.css中，对DOM元素设置不显示的方式

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

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

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

---

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

二.css中，对DOM元素设置不显示的方式

display:none；隐藏，并且不占位 ，宽高各种属性值，都‘丢失’

visibility：hidden;隐藏，占位，仅是视觉上‘看不见’

width:0;height:0;overflow:hidden;这只是通过设置元素的大小使元素不显示

三.超链接访问过后，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 链接被点击的时刻

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

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

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

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

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

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

(3):inline-block 元素

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

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

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

外边距重叠就是 margin-collapse。

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

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

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

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

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