【前端面试题】元素分类、文本溢出、优先级

元素分类【面试题】

1. 块级元素: 独占一整行，是一个完整的盒子，可以设置宽高

2. 行级元素【行内元素】：有多宽占多宽，不是一个完整的盒子，不可以设置宽高以及垂直方向的外边距。

3. 行内块元素：有多宽 占据多宽，是一个完整的盒子，可以设置宽高等。【input img td】

4. 可变元素

   非常规分类：

   置换元素：浏览器要解析标签和属性，才能决定显示什么内容 【input img button】

   非置换元素：不是置换元素

   元素嵌套规则：

   0. 块级元素可以有任何元素。行级元素只能有行级元素。
   1. a标签里面可以有块级元素
   2. ul/ol里面只能有li，li外面只能有ul/ol
   3. p标签里面只能有行级元素

块级元素：常用的有：　div、p、ul、ol、li、dl、dt、dd、fieldset、
form、h1~h6、hr、table,另外还有：address、isindex、menu、noframes、
noscript、pre、blockquote、center、dir、

单行文本溢出显示省略号操作[面试题]

1. 设置宽度 width: *px;
2. 强制不换行 white-space:nowrap;
3. 超出隐藏 overflow:hidden;
4. 溢出的标识为省略号 text-overflow:ellipsis;

优先级（面试题）

一个元素指定多个选择器，就会产生优先级

-   选择器相同，则执行层叠性

-   选择器不同，则按权重

    权重： ***（即是全局）** 0，0，0，0

    **元素选择器（标签选择器）** 0，0，0，1

    **类，伪类选择器** 0，0，1，0

    **ID选择器** 0，1，0，0

    **行内样式style=”“** 1，0，0，0

    **！important** 无穷大

    ！important>style>ID>类>标签>*>继承>默认。

注意：权重可以叠加，但不能进位(本质上可以进位，但需要几百个才能进一位，一般不可能叠)

0.  `div ul li`----------> 0,0,0,3
0.  `.nav ul li` -------------->0,0,1,2
0.  `a:hover` ---------------->0,0,1,1 /* 伪类选择器*/
0.  `.nav a`-------------------->0,0,1,1

权重一致，后者覆盖前者。

a的默认样式优先级高于继承下来的样式