參考：https://blog.csdn.net/zhaolandelong/article/details/88544298

知識點

盒模型
選擇器優先級
水平垂直居中
浮動與清除浮動
flex佈局
H5新特性
CSS動畫
CSS預處理器（Autoprefixer）

真題

請說出3個H5新增的塊元素，並介紹他們的應用場景

aside:表示article元素內容之外，與article元素內容相關的輔助信息。（當前文章的其他引用，備註，側邊欄，廣告等有別於主要內容的部分）

figure:代表一個塊級圖像，還可以包含說明。figure添加標題時，與figcaption元素結合使用。

dialog:表示幾個人直接的對話。與dt和dd元素結合使用，dt表示講話者，dd表示講話內容


    <dialog id="dialo">
        <dt>老師</dt>
        <dd>樂樂，5+3等於多少</dd>
        <dt>樂樂</dt>
        <dd>等於8</dd>
        <dt>老師</dt>
        <dd>答對了！樂樂棒極了</dd>
    </dialog>
    <button id="open">open</button>
    <button id="close">close</button>
    <script>
    var dialog = document.getElementById('dialo');
    var openBtn = document.getElementById('open');
    var closeBtn = document.getElementById('close');
    openBtn.addEventListener('click',function(){
        dialog.show();
    })
    closeBtn.addEventListener('click',function(){
        dialog.close();
    });
</script>

thead：表格表頭

tfoot:表格頁腳

行內元素和塊元素的區別

塊元素可以設置寬高

行內元素不可以。

HTML元素分爲行內、塊狀、行內塊元素三種。

1、三者是可以通過display屬性任意轉換的

inline 行內元素 block 塊狀元素 inline-block行內塊元素

 <style>
        span {
            display: block;
            width: 100px;
            height: 38px;
            background-color: red;
        }

        div {
            display: inline;
            width: 100px;
            height: 38px;
            background-color: green;
        }

        i {
            display: inline-block;
            width: 100px;
            height: 38px;
            background-color: yellow;
        }
    </style>

    <span>行內轉塊</span>
    <div>塊轉行</div>
    <i>行轉行內塊</i>

block：獨佔一行，可以設置寬高

inline: 寬高由內容撐開

inline-block:可以設置寬高

行內元素特徵: （span、b、i）

1、設置寬高無效

2、設置margin的上下無效，左右有效，設置padding上下左右都有效（並且會撐大空間）

3、不會自動換行

附： 55的9次方

  <sub>55</sub>
  <sup>9</sup>

塊級元素特徵：（p nav aside header footer section article ul-li address）

1、可以設置寬高

2、設置margin、padding的上下左右都有效

3、獨佔一行

4、多個塊狀元素一起寫，默認排列從上至下

行內塊元素

1、能設置寬高

2、不會自動換行

3、多個行內塊一起寫，默認從左至右排列

（在html5中，可以自定義標籤，在任意標籤加上display屬性就好。）

請說出3個CSS瀏覽器前綴

-ms- 兼容IE瀏覽器
-moz-兼容firefox
-o-兼容opera
-webkit- 兼容chrome和safari

div {
    -ms-transform: rotate(0);
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
}

CSS前綴補全：autoprefixer

請介紹下盒子模型

標準盒模型 width = content
怪異盒模型(IE5.X 和 6 ) width = content+ padding + border (不要給元素添加具有指定寬度的內邊距，而是嘗試將內邊距或外邊距添加到元素的父元素和子元素。)
解決IE8及更早版本不兼容問題可以在HTML頁面聲明 <!DOCTYPE html>即可。

實例：margin:20px,border:10px,padding:10px;width:200px;height:50px;
標準盒模型佔用寬：margin2+padding2+border2+width=202+102+102+200 = 280
標準盒模型佔用高：margin2+padding2+border2+height=202+102+102+50 = 130
盒子的實際寬度大小爲:padding2+border2+width = 240
實際高度：padding2+border2+height = 90

ie佔用寬：margin2+width=240
ie佔用高：margin2+height=90
盒子的實際寬度大小爲:width = 200
實際高度：height = 50

box-sizing都有哪些值？他們的寬高分別如何計算？

box-sizing: content-box(標準盒模型)|border-box(怪異盒模型)|inherit(繼承父元素);

content-box的寬高由content決定

border-box的寬高由content+padding+border決定

什麼是邊界塌陷（或邊界重疊）？

BFC（塊狀格式化上下文，獨立的盒子，佈局不受外部影響，但是如果同一個BFC中，同級塊狀元素的margin-top和margin-bottom會重疊）

1、兄弟div（上下margin塌陷）

2、父子div（如果父級div沒有padding\border\inlinecontent, 子級div的margin會向上查找邊界塌陷的div，直到找到某個標籤包括border\padding\inline content的其中一個，然後按此div進行margin）

<style>
        .parent {
            width: 300px;
            height: 150px;
            background-color: yellow;
            margin: 20px;
            /* overflow: hidden; */
        }

        .parent>div {
            width: 100px;
            height: 50px;
            background-color: red;
            overflow: hidden;

        }

        .sm {
            width: 10px;
            height: 10px;
            background-color: blue;
            margin: 10px;
        }
    </style>

  <div class="parent">
        <div>
            <div class="sm">cc</div>
        </div>
    </div>

解決辦法： overflow:hidden; 防止溢出部分，隱藏溢出部分。

overflow:auto .製作一條滾動條，當元素溢出，用滾動條將溢出部門展示出來。

什麼是BFC（格式化上下文）？如何實現？

具有BFC特徵的元素可以看做是隔離了的獨立容器，容器裏面的元素不會在佈局上影響到外面的元素。

只要元素滿足下面的任一條件，都會觸發BFC特徵。

1、body根元素

2、position: fixed|absolute(絕對定位元素)

3、float(浮動元素) 除了none

4、overflow: hidden|auto|scroll (除了visible之外的值)

5、display: inline-block\ table-cells\flex （具有table-的屬性）

問題：

1、解決邊界塌陷問題

2、解決浮動元素導致父元素高度塌陷問題

3、解決阻止元素被浮動元素覆蓋問題

多個inline元素之間會有空隙，爲什麼？如何解決？

元素被當成行內元素排版時，元素直接的空白符會被瀏覽器處理，根據white-spack的處理方式（默認是normal,合併多餘空白），Html代碼在回車換行時被轉成一個空白符，在字體不爲0的情況下，空白符佔據一定寬度，所以inline-block元素之間就出現了空隙。

這些元素之間的間距會隨字體的大小而變化，當行內元素font-size:16px是，間距爲8px。

解決辦法：1、多個inline元素寫在同一行

2、將父級元素的font-size:0

3、給inline元素添加float的樣式

4、設置子元素的margin爲負值

5、設置父元素display:table和word-spacing:-1em

請實現三列布局，要求：背景色分別爲red、green、blue；左右各定寬200px；中間隨屏幕大小變化；內容互不遮擋；方法越多越好(順便複習一下三角形)

法一：筆者真的無地自容，廢了九牛二虎之力寫了一個

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>請實現三列布局，要求：背景色分別爲red、green、blue；左右各定寬200px；中間隨屏幕大小變化</title>
    <style>
        .container{
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            font-size: 0px;
        }
        .left{
            display: inline-block;
            width: 200px;
            height: 100%;
            background-color: red;
        }
        .main{
            display: inline-block;
            width: calc(100% - 400px);
            height: 100%;
            background-color: green;
        }
        .right{
            display: inline-block;
            width: 200px;
            height: 100%;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="main"></div>
        <div class="right"></div>
    </div>
</body>
</html>

法二：Flex佈局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>請實現三列布局，要求：背景色分別爲red、green、blue；左右各定寬200px；中間隨屏幕大小變化</title>
    <style>
        .container{
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
        }
        .left{
            width: 200px;
            background-color: red;
        }
        .main{
            flex: 1;
            background-color: green;
        }
        .right{
            width: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <!-- 
flex:1的含義
flex-grow : 1; // 這意味着div將以與窗口大小相同的比例增長
flex-shrink : 1; // 這意味着div將以與窗口大小相同的比例縮小
flex-basis : 0; // 這意味着div沒有這樣的起始值，並且將根據可用的屏幕大小佔用屏幕。例如： - 如果包裝器中有3個div，則每個div將佔用33％。 -->
    <div class="container">
        <div class="left"></div>
        <div class="main"></div>
        <div class="right"></div>
    </div>
</body>
</html>

法三：BFC

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>請實現三列布局，要求：背景色分別爲red、green、blue；左右各定寬200px；中間隨屏幕大小變化</title>
    <style>
        .container{
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
        .left{
            float: left;
            width: 200px;
            height: 100%;
            background-color: red;
        }
        .right{
            float: right;
            width: 200px;
            height: 100%;
            background-color: blue;
        }
        .main{
            width: auto;
            height: 100%;
            overflow: hidden;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
        <div class="main"></div>
    </div>
</body>
</html>

法四：table\table-cell

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>請實現三列布局，要求：背景色分別爲red、green、blue；左右各定寬200px；中間隨屏幕大小變化</title>
    <style>
        .container{
            width: 100%;
            height: 400px;
            display: table;
        }
        .left{
            width: 200px;
            height: 100%;
            background-color: red;
            display: table-cell;
        }
        .right{
            width: 200px;
            height: 100%;
            background-color: blue;
            display: table-cell;
        }
        .main{
            width: auto;
            height: 100%;
            background-color: green;
            display: table-cell;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="main"></div>
        <div class="right"></div>
    </div>
</body>
</html>

浮動會出現什麼問題，如何清除浮動？

1、浮動會導致父元素高度塌陷

2、會覆蓋其他元素

清楚浮動：

1、父元素加上overflow:hidden

2、在浮動元素的後面（同級），添加一個div，屬性是clear:both

3、在父元素添加一個僞元素

.clearfix:after {
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
    content: '';
}

 .clearfix{  //IE6模式下
      zoom:1;
}

4、在父元素添加雙僞元素

.clearfix:before, .clearfix:after {
    display: table;
    content: '';
}
.clearfix:after {
    clear: both;
}
.clearfix {
    zoom: 1; //兼容IE6下
}

如何實現中間部分最先加載？

使用聖盃佈局。

基礎：

margin和padding的百分比都是相對父元素的寬度來設置的。
absolute和float兩個元素，默認絕對定位覆蓋在浮動元素上面。設置z-index:-1後，浮動元素在絕對定位元素的上面。
設置position:relative後，元素相對於自身進行定位。（相對於元素在文檔中的初始位置）
↑注意：使用相對定位，無論是否移動，元素仍然佔據原來的空間。因此，移動元素會導致它覆蓋其他框。
position:absolute，如果沒有已定位的元素，就會找到body。
↑注意：absolute和float不能寫在同一個元素（relative和float可以），absolute或者float會隱式改變display的類型（display:none除外）。設置position:absolute,float:left,float:right任意一個值，都會使元素變成display:inline-block。即使設置display:inline,display:block也無效。
float在IE6下的雙邊距bug就是用display:inline來解決的。position：relative不會隱式改變display。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 100%;
            height: 500px;
            padding: 0 300px 0 200px;
            box-sizing: border-box;
            /* box-sizing差點忘了 border-box的寬度是內容+border+padding 而content-box的寬度只是內容 */
        }

        .container>div {
            float: left;
            height: 100%;
        }

        .main {
            width: 100%;
            background-color: green;
        }

        .left {
            width: 200px;
            margin-left: -100%;
            position: relative;
            left: -200px;
            background-color: red;
        }

        .right {
            width: 300px;
            margin-left: -300px;
            position: relative;
            left: 300px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="main"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

</html>

寫一個雙飛翼佈局：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 100%;
            height: 500px;
        }

        .container>div {
            float: left;
            height: 100%;
        }

        .main {
            width: 100%;
        }

        .submain {
            height: 100%;
            /* 浮動元素的子元素不給高度，相當於高度爲0 */
            background-color: green;
            margin: 0 300px 0 200px;
        }

        .left {
            width: 200px;
            margin-left: -100%;
            background-color: red;
        }

        .right {
            width: 300px;
            margin-left: -300px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="main">
            <div class="submain"></div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

</html>

最簡易的佈局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 100%;
            height: 500px;
        }

        .container>div {
            height: 100%;
        }

        .main {
            margin: 0 300px 0 200px;
            background-color: green;
        }

        .left {
            width: 200px;
            float: left;
            background-color: red;
        }

        .right {
            width: 300px;
            float: right;
            position: relative;
            top: -500px;
            /* 添加上面兩行的原因是，main是塊級元素，獨佔一行，right元素會在第二行顯示。 */
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="left"></div>
        <div class="main"></div>
        <div class="right"></div>
    </div>
</body>

</html>

如何保證三列等高，並隨着最高的一列變化？

html:

<div class="container">
        <div class="left">
            <p>aaa</p>
        </div>
        <div class="main">
            <p>bbb</p>
            <p>bbb</p>
            <p>bbb</p>
        </div>
        <div class="right">
            <p>ccc</p>
            <p>ccc</p>
        </div>
    </div>

法一：table、table-cell（父元素的display爲table,子元素爲table-cell）

<style type="text/css">
        .container {
            display: table;
            margin: 0 auto;
            border: 1px solid black;
        }

        .container>div {
            width: 200px;
            display: table-cell;
        }

        .left {
            background-color: red;
        }

        .main {
            background-color: orange;
        }

        .right {
            background-color: yellow;
        }
    </style>

法二：Flex佈局（父元素設置display:flex; 子元素設置flex:1;）

 <style type="text/css">
        .container {
            display: flex;
            width: 600px;
            margin: 0 auto;
            border: 1px solid black;
        }

        .container>div {
            flex: 1;
            /* flex-grow:1; flex-shrink 1;flex-basis:0; 
                div與窗口大小相同的比例增長、縮小，div沒有起始值，並且將根據可用屏幕大小佔用屏幕
            */
        }
    </style>

法三： margin/padding互補（子元素的margin設爲-999em,padding設爲999em）

    <style type="text/css">
        .container {
            width: 600px;
            margin: 0 auto;
            border: 1px solid black;
            overflow: hidden;
        }

        .container>div {
            float: left;
            width: 200px;
            margin-bottom: -999em;
            padding-bottom: 999em;
        }
    </style>

position都有哪些值？是針對包裹元素定位嗎？

relative 相對定位（相對元素在文檔中的初始位置定位）
absolute絕對定位（相對於定位元素定位，最頂級是body）
fixed 固定定位（相對窗口定位）
static 文檔流

一個220x220的元素A，一個20x20的元素B，B中有一個文字“C”，字體大小15px。要求，A在屏幕中央，B在A中央，文字“C”在B中央，中央即爲水平垂直都居中。不限方法，越多越好


     <div class="container">
        <div class="a">
            <div class="b">C</div>
        </div>
    </div>

法一：flex

 <style type="text/css">
        .container {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .a {
            width: 200px;
            height: 200px;
            background-color: red;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .b {
            width: 20px;
            height: 20px;
            font-size: 15px;
            background-color: yellow;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>

法二：定位（left:50%; top:50%； transform: translateX(-50%) translateY(-50%)）

    .container {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }

        .a,
        .b {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
        }

        .a {
            width: 200px;
            height: 200px;
            background-color: red;
        }

        .b {
            width: 20px;
            height: 20px;
            font-size: 15px;
            background-color: yellow;

        }
    </style>

若A的寬度隨屏幕寬度變化，並滿足左右邊距各20px，如何實現？

```
.a{
     width: calc(100% - 40px);
}
```

.container {
    margin: 0 20px;
}
.a {
    width: 100%;
}

若A的高度等於A寬度的50%，如何實現？

    .a {
            width: calc(100vw - 40px);
            height: calc((100vw - 40px)/2);
        }

寬度不一定，但是想讓box爲正方形;

比如width:50%;之後設置該box爲正方形設置height:0;padding-bottom:50%;

CSS的選擇器有哪些？優先級高低如何判斷？

id、class、tag、屬性（a[href=""] ）派生選擇器

不同級優先級：

！important>內聯>id>class = 屬性 = 僞類 >標籤 = 僞元素 > 通配符（*）

同一級別：

後來居上（後寫覆蓋先寫）
內聯樣式 > 內部樣式表 > 外部樣式表 > 導入樣式 @import

優先級相同時會發生什麼？

樣式被覆蓋

列舉幾條常用的CSS reset，是否瞭解normalize.css？

* { margin:0; padding:0;}
ol, ul { list-style:none;}
body {line-height:1;}

normalize.css是一個css reset的替代方案。

保護有用的瀏覽器默認樣式而不是完全去掉
一般化樣式：爲大部分html元素提供
修復瀏覽器自身的bug
優化css可用性
解釋代碼

如何做到一個list中奇數和偶數行的背景色不一樣？

   ul>li:nth-child(2n+1) {
         background-color: red;
    }

   ul>li:nth-child(2n) {
         background-color: yellow;
   }

如何做到一個list的第一行沒有上邊框？

  ul>li:first-child {
      border-top: none;
  }

請描述一下瀏覽器從開始解析HTML到渲染結束都經歷了什麼？

解析HTML文件，創建DOM樹
解析CSS，形成CSS對象模型
將CSS與DOM合併，構建渲染樹（rendering tree）
佈局和繪製

瀏覽器解析CSS是從左開始還是從右？爲什麼？

從右。

因爲從右向左的匹配在第一步就篩選掉了大量的不符合條件的最右節點（葉子節點）；

而從左向右的匹配規則的性能都浪費在了失敗的查找上面。

什麼是reflow和repaint？

repaint:重繪（改變不影響元素在網頁中的位置的元素樣式時，根據瀏覽器新屬性重新繪製一次。不會帶來重新佈局）

例如：bg-c border-color ......

reflow:重排（改變元素在網頁中的佈局和位置）

例如：瀏覽器放大縮小、DOM元素的增刪改、內容變化，包括表單內的文本變化、CSS屬性的計算和改變、添加或者刪除樣式表、僞類激活（懸停）、更改類屬性

display:none; 重排（不佔空間）

visibility: hidden; 重繪（佔空間）

overflow:hidden; 重繪+重排（佔空間，超出隱藏）

HTML的解析會因爲什麼阻塞？靜態文件引用如何放置合理？

css加載不會堵塞html解析
css加載會堵塞dom樹渲染
css加載會堵塞js語句的執行
js的加載會堵塞html解析

css文件放前面，js文件放在html和css的後面

爲了讓用戶減少看到白屏的時間，做一下這個優化。

cdn加速
css代碼壓縮
合理使用瀏覽器緩存（設置cache-control,expires,E-tag。注意，文件更新後，緩存帶來的影響。可以在文件名字後面加一個版本號）
減少http請求

爲什麼要用語義化標籤？

增加代碼的可讀性，以及便於代碼維護
便於SEO
讓瀏覽器或者網絡爬蟲更好地解析以及分析內容

如何適配移動端？（https://www.jianshu.com/p/43dea9fc2eb1）

meta viewport

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximun-scale=1.0; minimun-scale=1.0; user-scalable=no">

圖片適配

//使用這個
img {max-width:100%} //最大寬度顯示爲自身的100% 

//不用這個
img {width: 100%} //寬度爲外層容器的寬度 圖片會被無情地拉伸

media 媒體查詢

media screen and (min-width:1000px) {
    body{
        background:red;
    }
}

動態rem方案（跟媒體查詢配合，實現響應式佈局）
· 爲html設置基準值 font-size:100px
·頁面上的使用，margin:500px 400px; => margin:5rem 4rem; 因爲rem是相對根html計算的 x/100 = ?rem
·根據當前屏幕的寬度和設計稿的寬度，算出html的基準值假設當前屏幕寬度爲375px 設計稿上是640px
當前屏幕寬度/設計稿寬度 = x / 100 => x = 當前屏幕寬度/設計稿寬度*100 = 58.59375 px
動態計算 js代碼
```
(function (){
    const desWid = 640
    const winWid = document.documentElement.clientWidth
    const oMain = document.getElementById('main')
    const ratio = winWid / desWid
    if(winWid > desWid) {
        oMain.style.width = desWid + 'px'
        oMain.style.margin = '0 auto'
        return
    }

    oMain.style.fontSize = ratio*100 + 'px' 
} ())
```

除了px還有什麼單位？都如何計算？

任意瀏覽器的默認字體高都是16px。

px：相對於顯示屏分辨率而言
em: 相對於父元素 .father{font-size:16px;} .son{font-size:2em} 2em = 2*16
爲了簡化演算，在body上設置font-size:62.5%,1em = 16*62.5% = 10px , 12px = 1.2em, 16px = 1.6em
重新計算那些被放大的字體的em數值。避免字體大小的重複聲明。（例如，#content{font-size:1.2em} #content p {font-size:1em // 1.2*1 = 1.2em = 12px 第一個em是繼承font-size:62.5% 第二個是繼承#content的}）
rem：相對於html根元素 html{font-size:20px;} .div{font-size:2rem} 2rem = 2*20
rpx: 微信小程序（規定屏幕寬爲750rpx）

如何實現0.5px的邊框？

用transform:scale(0.5)

下邊框有線

<style>
       <style>
        div{
            width: 200px;
            height: 200px;
            position: relative;
            background-color: pink;
        }
        div::before{
            content: '';
            position: absolute;
            top: -50%;
            bottom: -50%;
            left: -50%;
            right: -50%;
            border-bottom: 1px solid black;
            transform: scale(0.5);
        }
    </style>
    </style>

    <div>11</div>

四條邊都有線

<style>
        div{
            width: 200px;
            height: 200px;
            position: relative;
            background-color: pink;
        }
        div::before{
            content: '';
            width: 200%;
            height: 200%;
            position: absolute;
            top: 0;
            left: 0;
            border: 1px solid black;
            transform-origin: 0 0;  
            /* 設置元素基點 x和y座標 */
            transform: scale(0.5);
        }
    </style>

用漸變寫一個

 <style>
        div{
            width: 200px;
            height: 200px;
            position: relative;
            background-color: pink;
        }
        div::after{
            content: ' ';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 1px;
            background-image:linear-gradient(0deg, transparent 50%, black 50%)
        }
    </style>

寫個波浪線

<style>
           div{
            height: 0.25em;
            width: 20rem;
            background-size: 0.5em 0.5em;
            background-image: linear-gradient(45deg, transparent 45%, red 55%, transparent 60%),  linear-gradient(135deg, transparent 45%, red 55%, transparent 60%);
            background-repeat: repeat-x;
        }

        </style>

如何禁止用戶縮放？

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

縮放係數是0.0-1.0 用戶縮放選項是yes|no

ios10之後不接受meta標籤，監聽gesturestart,阻止默認事件

document.addEventListener('gesturestart',function(e) {
    e.preventDefault()
})

如何禁止用戶全選文字內容？

法一： css

body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

法二： js

在需要禁止的dom加上這句

ontouchstart="return false;"

備註：手機uc瀏覽器，meta標籤的name=browsermode content= application 這樣就無法調起長菜單

前端開發必會的HTML/CSS硬知識

知識點

真題