前言本文需要对CSS、Vue、ElementUI有基本的了解。本文基于ElementUI提供的导航菜单组件。本文希望基于该组件实现如下内容：将导航栏用中间的空白分隔为左右两部分，并在导航栏上添加一个搜索框，但不会被的样式污染el-菜单项。先学习ElementUI的css样式，制作一个简单的网页，其中使用了ElementUI的导航菜单组件。使用Chrome（F12/Ctrl+Shift+I）等工具检查网页后，从元素选项卡中找到网页中导航菜单组件的最后一个实现元素。在检查器下方有一个样式工具，它将显示所选元素的相关样式。提取对元素位置有影响且我不熟悉的属性。el-menu解压后发现，与元素margin位置相关的设置有：0;padding-left:0;margin-block-start:1em;margin-block-end:1em;margin-inline-start:0px;margin-inline-end:0px;padding-inline-start:40px;border-bottom:solid1px#color;border-right:none;display:block;position:relative;-webkit-box-direction:normal;list-style:none;//使用::before和::after创建伪元素（注意，不是伪类。）::before{display:table;内容：“”；}::之后{显示：表格；内容：””;clear:both;}对于上面代码中出现但不熟悉或确认其功能的属性，将其作为关键字（记得加引号，以免被搜索引擎错误解析）并添加css进行搜索，你基本都能找到满意的答案。margin-block-start等属性的作用-影响不大::before和::after-伪类clear:both就明白为什么这里要用一个::after的伪元素，下面的子元素element可以预测的元素都是浮动元素。因此，如果放任不管，浮动元素的高度将不会被父元素计算出来，导致父元素的高度为零，直接崩溃。所以使用这样一个伪类，因为这个伪类不能让元素左右浮动，所以会让它的上下边框碰到那一行浮动元素的下边框（理想情况下应该是对齐的）,而这一行的高度（也就是浮动元素的高度）会被计算为父元素的高度。实际上，如果伪类本身有高度比如60px，浮动元素行的最大高度是60px，那么父元素的高度就是120px。box-direction——影响不大解决了有问题的style属性后，发现整个el-menu的最终实现其实很简单：使用positive:relative但是没有lefttop等属性，所以元素保留在地方。这里之所以设置positive为relative，应该是辅助后子元素的定位，即导航栏里面的item(position:absolute，如果relative元素是position:static，默认值会被忽略).el-menu-itemfloat:left;position:relative;display:list-item;margin:0;padding:020px;height:60px;line-height:60px;font-size:14px;box-sizing:border-box;text-align:-webkit-match-parent;white-space:nowrap;cursor:pointer;float:leftanddisplay:list-item一开始可能看不懂，自己来个更简单的例子吧test，可以这样理解：先执行float:left确定自己的位置，再执行position:relative，即相对定位的相对“原始位置”就是float:left之后的位置。并且因为没有topleftset等属性，如果里面放了其他组件，可以认为这是辅助定位。display:list-item——来自官方文档，意思是配置了list-item的display属性的元素显示
- 的子元素
- 的样式，这样就可以配置list-style了it，而this是基于没有
- 这样显示的父元素。其实它的父元素确实是display:block。white-space—white-spaceCSS属性用于设置如何处理元素中的空白。cursor-cursor属性指定要显示的光标的类型（形状）。然后分析了这两个最基本的组件最终生成的元素的CSS。让我们开始动手吧。目标中间的空白将导航栏分为左右两部分。在导航栏上添加一个搜索框，但是没有被el-menu-item的样式污染。目标1我的第一个想法是创建一个el-menu-item并为其指定宽度但不指定内容并使其disable="true"