4.7日前端面试题（森果）_森果云前端-CSDN博客

本文链接：https://blog.csdn.net/kq975/article/details/115495962

1. css中行内元素和块级元素有哪些？
行内元素和块级元素的区别：
行内元素：　　
与其他行内元素并排
不能设置宽高，默认的宽度就是文字的宽度
块级元素：
霸占一行，不能与其他任何元素并列。
能接受宽高，如果不设置宽度，那么宽度将默认变为父级的100%。
行内元素：

a - 锚点
abbr - 缩写
acronym - 首字
b - 粗体(不推荐)
bdo - bidi override
big - 大字体
br - 换行
cite - 引用
code - 计算机代码(在引用源码的时候需要)
dfn - 定义字段
em - 强调
font - 字体设定(不推荐)
i - 斜体
img - 图片
input - 输入框
kbd - 定义键盘文本
label - 表格标签
q - 短引用
s - 中划线(不推荐)
samp - 定义范例计算机代码
select - 项目选择
small - 小字体文本
span - 常用内联容器，定义文本内区块
strike - 中划线
strong - 粗体强调
sub - 下标
sup - 上标
textarea - 多行文本输入框
tt - 电传文本
u - 下划线
var - 定义变量
块级元素：
address - 地址
blockquote - 块引用
center - 举中对齐块
dir - 目录列表
div - 常用块级容易，也是css layout的主要标签
dl - 定义列表
fieldset - form控制组
form - 交互表单
h1 - 大标题
h2 - 副标题
h3 - 3级标题
h4 - 4级标题
h5 - 5级标题
h6 - 6级标题
hr - 水平分隔线
isindex - input prompt
menu - 菜单列表
noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容
noscript - ）可选脚本内容（对于不支持script的浏览器显示此内容）
ol - 排序表单
p - 段落
pre - 格式化文本
table - 表格
ul - 非排序列表
2. block和inline-block有什么区别
display:block
block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
block元素可以设置margin和padding属性。
display:inline
inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
inline元素设置width,height属性无效。
inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
display:inline-block
简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。
3. 如何让元素垂直居中
1.通过verticle-align:middle实现CSS垂直居中。
通过vertical-align:middle实现CSS垂直居中是最常使用的方法，但是有一点需要格外注意，vertical生效的前提是元素的display：inline-block。
2.通过display:flex实现CSS垂直居中。
随着越来越多浏览器兼容CSS中的flexbox特性，所以现在通过“display:flex”实现CSS水平居中的方案也越来越受青睐。
通过display:flex实现CSS垂直居中的方法是给父元素display:flex;而子元素align-self:center;
这个跟CSS水平居中的原理是一样的，只是在flex-direction上有所差别，一个是row(默认值)，另外一个是column。
3.通过伪元素:before实现CSS垂直居中。
具体方式是为父元素添加伪元素:before，使得子元素实现垂直居中。
4. css隐藏元素
css隐藏元素的方法
1、利用opacity透明度来隐藏，opacity设置为0，它只是一种视觉隐藏，元素本身依旧占用它的位置并对网页的布局起到作用，它也同样影响用户交互。在读屏软件中会被识别。

2、visibility：规定元素是否可见，一般设置为hidden，它可以很好的隐藏，不会影响用户的交互，在读屏软件中不会被识别。（visibility可能的值）

3、display：当display设置为none，任何对该元素直接打用户交互操作都不可能生效，被隐藏的元素完全不会占用空间，仿佛元素完全不存在一样。（display可能的值）

4.position：元素的定位。把position：absolutely；top：-4555px；left：-45545px；top和left设置成足够大的负数，相当于把元素放到可视区域外，它不会影响布局，能够让元素保持可操作性，在读屏软件上可以被识别。(position可能的值）

5、clip-path：可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径，或者作为一个形状例如circle().。clip-path属性代替了现在已经弃用的剪切 clip属性。它只是一个实验中的功能，兼容性并不是很好。
5. Vue指令
使用Vue的过程就是定义MVVM（Model-View-ViewModel）各个组成部分的过程的过程。
Vue.js提供了一些常用的内置指令，接下来我们将介绍以下几个内置指令：
•v-if指令•v-show指令•v-else指令•v-for指令•v-bind指令•v-on指令：
1.v-if指令：
v-if = “表达式”
本质是通过操纵dom元素来进行切换显示
表达式的值为true的时候元素存在于dom树中，为false的时候从dom树中移除。
满足条件是会渲染到html中，不满足条件时是不会渲染到html中的，是通过操纵dom元素来进行切换显示
2.v-show指令：
元素始终被渲染到HTML，它只是简单的伪元素设置css的style属性，当不满足条件的元素被设置style=“display：none”的样，是通过修改元素的的CSS属性(display)来决定实现显示还是隐藏
3.v-else指令：
v-if=“条件” 条件成立 v-else 条件不成立，有没有发现 v-else离不开v-if，如果没有v-if的存在 v-else将变得毫无意义。
4.v-for指令：
v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名
5.v-bind指令
v-bind指令可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute）
6.v-on指令：
v-on是用来绑定事件监听器，用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。
1.v-on指令的作用是：为元素绑定事件
2.事件名不需要写on
3.指令可以简写为@
4.绑定的方法定义在methods属性中
7.v-model指令
v-model在表单控件元素上创建双向数据绑定

6.伪类和伪元素
css引入伪类和伪元素概念是为了格式化文档树以外的信息，也就是说。伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者列表中的第一个元素。

伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的，比如说，当用户悬停在指定的元素时，我们可以用:hover来描述这个元素的状态。虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。

伪元素用户创建一些不在文档树中的元素，并为其添加样式，比如说，我们可以通过：before来在一个元素前增加一些文本
在这里插入图片描述
伪类-状态
:link 选择未访问的链接
:visited 选择已访问的链接
:hover选择鼠标指针浮动在其上的元素
:active选择活动的链接
:focus 选择获取焦点的输入字段
伪类-结构化
:not 一个否定伪类，用于匹配不符合参数选择器的元素
:first-child 匹配元素的第一个子元素
:last-child 匹配元素的最后一个子元素
:first-of-type 表示一组兄弟元素中其类型的第一个元素
:last-of-type 表示一组兄弟元素中其类型的最后一个元素
:nth-child 根据元素的位置匹配一个或者多个元素，它接受一个an+b形式的参数
:nth-last-child 与:nth-child相似，不同之处在于它从最后一个子元素开始计数
:nth-of-type与nth-child相似，不同之处在于它是只匹配特定类型的元素
:nth-last-type 与nth-of-type相似，不同之处在于它是从最后一个子元素开始计数的。
:only-child 当元素是其父元素中唯一的子元素时，:only-child匹配该元素
:only-of-type 当元素是其父元素中唯一特定类型的子元素时，:only-child匹配该元素
:target 当url带有瞄名称，指向文档内某个具体的元素时:target匹配该元素
伪类-表单相关
:checked 匹配被选中的input元素，这个input元素包裹radio和checkbox.
:default 匹配默认选中的元素
:disabled 匹配禁用的表单元素
:empty 匹配没有子元素的元素，如果元素中含有文本节点，html元素或者一个空格，则:empty不能匹配这个元素
:enabled 匹配没有设置disabled属性的表单元素
:in-range 匹配在指定区域内元素，
:out-of-range 匹配不在指定区域内的元素
:indetermimate 当某组中的单选框或复选框还没有选取状态时，：indeterminate匹配该组中所有的单选框或复选框
:valid 匹配条件验证正确的表单元素
:invalid 匹配提交验证错误的表单元素
:optional :required匹配设置有无设置required属性的表单元素
:read-only 匹配设置了只读属性的元素
：read-write匹配处于编辑状态的元素
伪类-其他关
:root 匹配文档的跟元素
:fullscreen 匹配处于全屏模式下的元素
伪元素
在这里插入图片描述
有时你会发现伪元素使用了两个冒号 (:😃 而不是一个冒号 (😃. 这是CSS3的一部分，并尝试区分伪类和伪元素. 大多数浏览器都支持这两个值。