具体实现方法如下：

首先在html中写出一级菜单列表，然后在每个一级菜单中再嵌套一个列表即可创建一个二级菜单。

index.html

<div class="menu">
        <ul>
            <li><a href="">一级菜单</a>
                <ul>
                    <li><a href="">二级菜单</a></li>
                    <li><a href="">二级菜单</a></li>
                    <li><a href="">二级菜单</a></li>
                    <li><a href="">二级菜单</a></li>
                    <li><a href="">二级菜单</a></li>
                </ul>
            </li>
            <li><a href="">一级菜单</a>
                <ul>
                    <li><a href="">二级菜单</a></li>
                    <li><a href="">二级菜单</a></li>
                    <li><a href="">二级菜单</a></li>
                    <li><a href="">二级菜单</a></li>
                    <li><a href="">二级菜单</a></li>
                </ul>
            </li>
            <li><a href="">一级菜单</a>
                <ul>
                    <li><a href="">二级菜单</a></li>
                    <li><a href="">二级菜单</a></li>
                    <li><a href="">二级菜单</a></li>
                    <li><a href="">二级菜单</a></li>
                    <li><a href="">二级菜单</a></li>
                </ul>
            </li>
        </ul>
    </div>

接着写样式文件，主要是对列表样式和位置进行修改

<style>
	* {
		padding: 0;/*内边距:分别左,上,右,下都为0,这样就不会出现左右上下内间距*/
		margin: 0/*外边距:分别左,上,右,下都为0,这样就不会出现左右上下间距*/
	}
	
	.menu ul li {
		list-style: none;/*列表样式*/
		background-color: burlywood;/*背景颜色*/
		width: 120px;/*宽度*/
		text-align: center;/*文本对齐:居中*/
		height: 40px;/*高度*/
		position: relative/*定位:一般用这个就可以绝对定位*/
	}
	
	.menu ul li a {
		text-decoration: none;/*超链接下划线:无*/
		display: block;/*显示:正常显示用block,隐藏none*/
		line-height: 40px
	}
	
	.menu ul li:hover {
		background-color: aqua
	}
	
	.menu ul li ul {
		display: none;
		position: absolute;
		left: 120px;
		top: 0
	}
	
	.menu ul li:hover ul {
		display: block
	}


		</style>

这里需要注意的是一级菜单列表的定位方式要设置为relative,二级菜单列表的定位方式要设置为absolute，这样二级菜单才会在一级菜单相对的位置出现。

然后通过display这个属性控制二级菜单的显示和隐藏就可以了。

下一个文章：轮播图

TML

src和href的区别

src和href都是用来加载外部资源，区别如下

src当浏览器解析到该元素时，会暂停其他资源的加载和处理，直到该资源加载完成。 它会将资源内容嵌入到当前标签所在的位置，将其指向的资源下载应用到文档内，如js脚本等。常用在img、script、iframe等标签。

href指向外部资源所在的位置，和当前元素位置建立链接，当浏览器解识别到它指向的位置，将其下载的时候不会阻止其他资源的加载解析。常用在a 、 link标签。

HTML5新增特性

• 新增语义化标签，head、footer、nav、main、section等
• 新增表单类型属性，email、number、时间控件、color颜色拾取器、placeholder、autofocus自动获取焦点...
• 新增音视频标签，video、audio
• 新增canvas画布、websocket通信、拖拽等
• 新增本地存储localStorage、sessionStorage

对HTML语义化理解

根据内容来选择合适的标签

• 方便浏览器爬虫更好的识别内容。
• 有利于代码可读性，开发者能清晰的看出网页的结构，便于团队的开发与维护。

DOCTYPE(⽂档类型) 的作⽤

DOCTYPE是HTML5中一种标准通用标记语言的文档类型声明，是用来告诉浏览器的解析器，该用什么样的方式去加载识别文档。

iframe 有那些优点和缺点？

iframe通常用来加载外部链接，不会影响网页内容的加载。

优点

• 可以将网页原封不动的加载进来
• 增加代码的可用性
• 用来加载显示较慢的内容，如广告、视频等

缺点

• 加载的内容无法被浏览器引擎识别，对SEO不友好
• 会阻塞onload事件加载
• 会产生很多页面，不利于管理

Canvas和SVG的区别

• canvas画布，是通过javascript来绘制2d图，是逐像素进行渲染。
• SVG矢量图，是基于XML描述的2D图形语言，每个元素都是可用的，可以为其添加事件。

script标签中defer和async的区别

他俩都是表示异步加载外部JS脚本，不会阻碍页面的加载解析。 区别

• 执行顺序：有多个async标签不能保证先后加载顺序，而多个defer标签可以按先后顺序加载。
• 是否立即执行：async加载完脚本后会立即执行，defer是要等文档解析完成后才执行。

行内元素、块级元素、空（void）

• 行内： a、b、span、input、img、select、 strong
• 块：p、div、h1、ul、ol、li、dl、dt、dd
• 空：<hr>、<br>、<img>、<input>、<link>、<meta>

怎样添加、移除、移动、复制、创建和查找节点

• 添加节点document.appendChild(dom)
• 移除节点document.removeChild(dom)
• 移动节点document.appendChild(targetDom)
• 复制节点dom.cloneNode(true)，参数true表示是否复制子节点
• 创建节点document.createElement(dom)
• 查找节点: document.getElementById("elementId") document.getElementsByClassName("className") document.getElementsByTagName("tagName") document.querySelector("selector") document.querySelectorAll("selector")

CSS

CSS3新增特性

• 新增CSS选择器、伪类
• 特效：text-shadow、box-shadow
• 线性渐变: gradient
• 旋转过渡：transform、transtion
• 动画: animation
• 圆角: border-radius

盒模型

盒模型都是由四个部分组成的，分别是margin、border、padding和content。

标准盒模型和IE盒模型的区别在于设置width和height时，对应的范围不同。

• 标准盒模型的width、height只包含了content
• IE盒模型的的width、height除了content本身，还包含了border、padding

通过修改元素的box-sizing属性来改变元素的盒模型

• box-sizeing: content-box表示标准盒模型（默认值）
• box-sizeing: border-box表示IE盒模型（IE盒模型)

CSS选择器和优先级

选择器

优先级

• !important
• 内联样式
• ID选择器
• 类选择器/伪类选择器/属性选择器
• 标签选择器/伪元素选择器
• 关系选择器/通配符选择器

CSS可继承属性和不可继承属性

可继承

• font-weight
• color
• font-size
• line-height
• cursor
• ...

不可继承

• margin、padding、border
• display
• background
• overflow
• width、height
• position
• ...

dislpay的属性和作用

隐藏元素的方式

• display：none：元素在文档中不存在，不会占据位置。
• visibility： hidden：元素在文档中的位置还保留，仍然占据空间。
• opacity：0：将透明度设置为0。
• z-index：负值：直接将元素放置在最下层，利用其他元素来遮盖。
• position：absolute：将元素定位到可视区域以外。

单行、多行文本溢出

单行

css

复制代码

overflow: hidden; // 溢出隐藏 text-overflow: ellipsis; // 溢出用省略号显示 whtie-space: nowrap; //规定段落中的文本不进行换行

多行

CSS

复制代码

overflow:hidden text-overflow: ellipsis; // 溢出用省略号显示 display:-webkit-box; // 作为弹性伸缩盒子模型显示。 -webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列 -webkit-line-clamp:3; // 显示的行数

有了使用过Sass、Less 吗？他们的区别是什么？

他们都是 CSS 预处理器，是 CSS 上的一种抽象层。他们是一种特殊的语法/语言编译成 CSS。 增加了 CSS代码的复用性，层级，mixin， 变量，循环， 函数等对编写以及开发UI组件都极为方便。 区别

1. 编译环境不一样 Sass是在服务端处理的，以前是Ruby，现在是Dart-Sass或Node-Sass 而Less是需要引入less.js来处理Less代码输出CSS到浏览器，也可以在开发服务器将Less语法编译成css文件，输出CSS文件到生产包目录
2. 变量符不一样，Less是@，而Scss是$。
3. Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持

link和@import的区别

• link是HTML提供的标签，不仅可以加载CSS文件，还可以定义RSS、rel连接属性等
• @import是CSS提供等语法规则，只有导入样式表带作用。
• link标签引入的CSS被同时加载，而@import引入的CSS将在页面加载完毕后被加载
• @import是CSS2.1才有的语法，存在兼容性，而link作为HTML标签不存在兼容性问题

常见的CSS单位

• px像素 CSS像素 物理像素
• 百分比%，作用于父元素， 当浏览器的宽度或者高度发生变化时，当前元素依据比例发生变化。
• em和rem，相对长度单位，它们之间的区别：em相对于父元素，rem相对于根元素。
• vw/vh是与视图窗口有关的单位，代表视图窗口的宽高。

px、em、rem的区别

• px 固定像素单位，不能随其它元素的变化而变化
• em是相对于父元素的单位，会随着父元素变化而变化
• rem是相对于根元素html，它会随着html元素变化而变化

两栏布局

• 利用浮动，将左边元素宽度设置为200px，并且设置向左浮动。将右边元素的margin-left设置为200px，宽度设置为auto（默认为auto，撑满整个父元素）。

CSS

复制代码

.outer { height: 100px; } .left { float: left; width: 200px; background: tomato; } .right { margin-left: 200px; width: auto; background: gold; }

• 利用浮动，左侧元素设置固定大小，并左浮动，右侧元素设置overflow: hidden; 这样右边就触发了BFC，BFC的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠。

CSS

复制代码

.left{ width: 100px; height: 200px; background: red; float: left; } .right{ height: 300px; background: blue; overflow: hidden; }

• 利用flex布局，将左边元素设置为固定宽度200px，将右边的元素设置为flex:1。

CSS

复制代码

.outer { display: flex; height: 100px; } .left { width: 200px; background: tomato; } .right { flex: 1; background: gold; }

• 利用绝对定位，将父级元素设置为相对定位。左边元素设置为absolute定位，并且宽度设置为200px。将右边元素的margin-left的值设置为200px。

CSS

复制代码

.outer { position: relative; height: 100px; } .left { position: absolute; width: 200px; height: 100px; background: tomato; } .right { margin-left: 200px; background: gold; }

三栏布局

• 利用绝对定位，左右两栏设置为绝对定位，中间设置对应方向大小的margin的值。
• 利用flex布局，左右两栏设置固定大小，中间一栏设置为flex:1。
• 利用浮动，左右两栏设置固定大小，并设置对应方向的浮动。中间一栏设置左右两个方向的margin值，注意这种方式，中间一栏必须放到最后：
• 圣杯布局，利用浮动和负边距来实现。父级元素设置左右的 padding，三列均设置向左浮动，中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行，通过设置 margin 负值将其移动到上一行，再利用相对定位，定位到两边。
• 双飞翼布局，双飞翼布局相对于圣杯布局来说，左右位置的保留是通过中间列的 margin 值来实现的，而不是通过父元素的 padding 来实现的。本质上来说，也是通过浮动和外边距负值来实现的。

水平垂直居中

• 利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过translate来调整元素的中心点到页面的中心。该方法需要考虑浏览器兼容问题。

CSS

复制代码

.parent { position: relative; } .child { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }

• 利用绝对定位，设置四个方向的值都为0，并将margin设置为auto，由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上的居中。该方法适用于盒子有宽高的情况：

CSS

复制代码

.parent { position: relative; } .child { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }

• 利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过margin负值来调整元素的中心点到页面的中心。该方法适用于盒子宽高已知的情况。

CSS

复制代码

.parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; margin-top: -50px; /* 自身 height 的一半 */ margin-left: -50px; /* 自身 width 的一半 */ }

• 使用flex布局，通过align-items:center和justify-content:center设置容器的垂直和水平方向上为居中对齐，然后它的子元素也可以实现垂直和水平的居中。该方法要考虑兼容的问题，该方法在移动端用的较多：

CSS

复制代码

.parent { display: flex; justify-content:center; align-items:center; }

flex布局理解

flex布局是CSS3新增的一种布局方式，能够根据不同屏幕尺寸的变化来自适应大小。

常用的属性：

• flex-direction属性决定主轴的方向（即项目的排列方向）。
• flex-wrap属性定义，如果一条轴线排不下，如何换行。
• flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
• justify-content属性定义了项目在主轴上的对齐方式。
• align-items属性定义项目在交叉轴上如何对齐。
• align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

flex: 1表示什么

flex: 1是flex-grow、flex-shrink、flex-basis的缩写，默认值是0 1 auto。flex：1也表示flex： 1 1 auto。

1. flex-grow定义项目发大比例，默认为0，即存在剩余空间，也不放大。
2. flex-shrink定义项目收缩比例，默认为1，即空间不足，也会进行缩小。
3. flex-basis定义项目给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小。

对BFC的理解，如何创建BFC

BFC是块级格式上下文（Block Formatting Context，BFC），是CSS布局的一个概念，在BFC布局里面的元素不受外面元素影响。

创建BFC条件

• 设置浮动：float有值并不为空
• 设置绝对定位： position（absolute、fixed）
• overfilow值为：hidden、auto、`scroll
• display值为：inline-block、table-cell、table-caption、flex等

BFC作用：

• 解决margin重叠问题：由于BFC是一个独立的区域，内部元素和外部元素互不影响，将两个元素变为BFC，就解决了margin重叠问题
• 创建自适应两栏布局：可以用来创建自适应两栏布局，左边宽高固定，右边宽度自适应。
• 解决高度塌陷问题：在子元素设置浮动后，父元素会发生高度的塌陷，也就是父元素的高度为0解决这个问题，只需要将父元素变成一个BFC。

什么是margin重叠，如何解决

两个块级元素分别设置上下margin时可能会导致边距合并为一个边距，合并到边距取最大的那个值。需要注意的是，浮动的元素和绝对定位这种脱离文档流的元素的外边距不会折叠。重叠只会出现在垂直方向。

计算规则

• 都是正数，取最大的。20px 40px ---> 40px
• 一正一负，用正数减去负数后。20px -50px ---> -30px
• 都是负数，用0减去两个中绝对值大的那个。-30px -10px ---> -20px

解决方案 对于重叠的情况，主要有两种：兄弟之间重叠（margin合并） 和 父子之间重叠（margin塌陷）

• 兄弟之间重叠 底部元素变为行内盒子：display: inline-block 底部元素设置浮动：float 底部元素的position的值为absolute/fixed
• 父子之间重叠 父元素加入：overflow: hidden 父元素添加透明边框：border:1px solid transparent 子元素变为行内盒子：display: inline-block 子元素加入浮动属性或定位

position 常用属性 默认值是什么

• static 默认值，没有定位，元素正常在文档流中显示
• relative 相对定位，相对于原来的位置进行定位
• absolute 绝对定位，相对于static定位意外以外的一个父元素进行定位。
• fixed 绝对定位，相对于浏览器窗口
• sticky 粘性定位，基于用户滚动位置

实现一个三角形

通过设置不同方向边框来实现

CSS

复制代码

div { width: 0; height: 0; border-top: 50px solid red; border-right: 50px solid transparent; border-left: 50px solid transparent; }

画一条0.5px的线

• 使用transform: scale()的方式，该方法用来定义元素的2D 缩放转换：

CSS

复制代码

transform: scale(0.5,0.5);

• 采用meta viewport的方式，这样就能缩放到原来的0.5倍，如果是1px那么就会变成0.5px。viewport只针对于移动端，只在移动端上才能看到效果。

如何解决1px

1px 问题指的是：在一些 Retina屏幕 的机型上，移动端页面的 1px 会变得很粗，呈现出不止 1px 的效果。原因很简单——CSS 中的 1px 并不能和移动设备上的 1px 划等号。

• 直接写0.5px
• 利用伪元素，先放大再缩小
• 使用viewport缩放来解决

原文章链接：https://juejin.cn/post/7269794410573512758