前端面试 前端笔试整理 css板块

前端面试 前端笔试整理

css板块

1. 行内元素，块元素有哪些？分别有什么不同？

行内元素：

span、img、a、label、code、input、em、b、i、textarea、select、sub、sup

块元素：

div、p、h1-h6、form、ul、ol、dl、dt、dd、li、table、
tr、td、th、hr、blockquote、address、table、menu、pre
（HTML5：header、section、article、footer）

行内元素的特点：

总是和相邻的行内元素在同一行上（物以类聚）
设置宽高无效，水平方向的padding和margin属性可以设置，但是垂直方向上的无效。
默认宽度是他自身内容的宽度。
行内元素只能容纳其他行内元素或者文本。

块级元素特点：

总是另起一行（特立独行）
可以设置其宽度、高度，内外边距
在不手动设置宽度的情况下，宽度默认为所在容器的100%（即容器宽度）
可以容纳行内元素和其他块元素。

行内块元素的特点：

行内元素中就有那么几个特殊标签，比如//,可以给他们设置宽高、对齐属性，我们把这样特殊的一类标签称为行内块元素。行内块元素综合了块元素和行内元素的不同特点

和相邻行内元素在同一行，但是之间会有空白缝隙。
默认宽度是他本身内容的宽度。
宽度、高度、行高、外边距以及内边距都可以手动设置。

2. nth-child() nth-type()的区别？

1 :nth-child() 选择器
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型，n 可以是数字、关键词或公式。

2 :nth-of-type(n)
:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素，n 可以是数字、关键词或公式。

3具体区别
首先看代码

p:nth-of-type(7) 选择的 p元素所在的父元素，下的第7个P元素 即：

第7个p

p:nth-child(6) 选择的 p元素所在的父元素，下的第6个子元素，且该元素是P元素 即：

第5个p

结果