前端面试 前端笔试整理
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
结果