具體實現方法如下：

首先在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