From 84d9eea3fc0e21214fdc78a39e53c804d6ef46c0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BC=8D=E6=99=BA=E8=BE=89?= <“2523870233@qq.com”>
Date: Wed, 24 Nov 2021 19:59:58 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 "H5+Css3/\344\274\252\347\261\273/Taiji.html" |  65 ++++++
 .../Index.html"                               | 149 +++++++++++++
 .../index_2.html"                             | 206 ++++++++++++++++++
 "H5+Css3/\345\270\203\345\261\200/index.html" |  53 +++++
 .../index.html"                               | 185 ++++++++++++++++
 .../index.html"                               | 110 ++++++++++
 6 files changed, 768 insertions(+)
 create mode 100644 "H5+Css3/\344\274\252\347\261\273/Taiji.html"
 create mode 100644 "H5+Css3/\345\200\274\344\270\216\345\215\225\344\275\215/Index.html"
 create mode 100644 "H5+Css3/\345\200\274\344\270\216\345\215\225\344\275\215/index_2.html"
 create mode 100644 "H5+Css3/\345\270\203\345\261\200/index.html"
 create mode 100644 "H5+Css3/\345\274\271\346\200\247\347\233\222\345\255\220/index.html"
 create mode 100644 "H5+Css3/\350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210/index.html"
diff --git "a/H5+Css3/\344\274\252\347\261\273/Taiji.html" "b/H5+Css3/\344\274\252\347\261\273/Taiji.html"
new file mode 100644
index 0000000..d466d38
--- /dev/null
+++ "b/H5+Css3/\344\274\252\347\261\273/Taiji.html"
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<style>
+    * {
+        margin: 0px;
+        padding: 0px;
+    }
+
+    body {
+        background-color: rgb(160, 160, 160);
+    }
+    #center {
+        position: relative; /*相对定位 */
+        left: auto;  /**/
+        top: 250px;
+        margin: auto;
+        height: 300px;
+        width: 150px;
+
+        border: 5px solid #000000;
+        background-color: #ffffff;
+
+        border-width:0px 0px 0px 150px;
+        border-radius: 50%;
+        
+    }
+    #center::before{
+        content: '';  /*伪类加content*/
+
+        height: 30px;
+        width: 30px;
+
+        background-color: #fff;
+        border-radius: 50%;
+        border: 60px solid #000;
+        position: absolute;
+        top: 0%;
+        left: -70px;
+    }
+    #center::after{
+        content: '';
+
+        height: 30px;
+        width: 30px;
+
+        background-color: #000;
+        border-radius: 50%;
+        border: 60px solid #fff;
+        position: absolute;  /*绝对定位*/
+        bottom: 0%;
+        left: -70px;
+    }
+</style>
+
+<body>
+    <div id="center"></div>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/H5+Css3/\345\200\274\344\270\216\345\215\225\344\275\215/Index.html" "b/H5+Css3/\345\200\274\344\270\216\345\215\225\344\275\215/Index.html"
new file mode 100644
index 0000000..33b9688
--- /dev/null
+++ "b/H5+Css3/\345\200\274\344\270\216\345\215\225\344\275\215/Index.html"
@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<style>
+    *{
+        margin: 0;
+        padding: 0;
+    }
+    body{
+        background-color: rgb(243, 243, 243);
+    }
+    /* :root{
+        --red:130;
+        --green:130;
+        --blue:130;
+    } */
+    .Box {
+        position: relative;
+        /*相对定位 */
+        left: auto;
+        top: 70px;
+        margin: auto;
+        height: 250px;
+        width: 500px;
+        border: solid 1px #000000;
+    }
+    .Box p{
+        /* display: inline-block;
+        text-align: center; */
+        margin-top: 90px;
+        margin-left: 120px;
+        font-size: 40px;
+    }
+    .RGB {
+        width: 120px;
+        top: 100px;
+        left: -120px;
+        margin: auto;
+        position: relative;
+    }
+    .RGB span{
+        margin-left: 60px;
+    }
+    .A{
+        margin-left: 120px;
+    }
+    .A_span{
+        margin-left: 180px;
+    }
+    .HSL {
+            box-sizing: border-box;
+            float: left;
+            width: 120px;
+            margin: auto;
+            top: -175px;
+            left: 270px;
+            position: relative;
+        }
+    .HSL span{
+        margin-left: 60px;
+    }
+</style>
+
+<body>
+    <div class="Box">
+        <P>我是一个文字</P>
+    </div>
+    <div class="RGB">
+        <p><input type="range" name="T" min="0" max="255" value=""><span>R</span><br></p> 
+        <p><input type="range" name="T" min="0" max="255" value=""><span>G</span><br></p> 
+        <p><input type="range" name="T" min="0" max="255" value=""><span>B</span><br></p> 
+        <p><input type="range" name="T" class="A" value=""><a class="A_span">A</a><br></p>
+
+            <div class="HSL">
+                <p><input type="range" name="T" min="0" max="360" value=""><span>H</span><br></p> 
+                <p><input type="range" name="T"  value=""><span>S</span><br></p> 
+                <p><input type="range" name="T"  value=""><span>L</span><br></p> 
+            </div>
+
+    </div>
+    
+    <script>
+
+        let R , G , B, A;
+
+        R = document.querySelectorAll('input')[0]
+        G = document.querySelectorAll('input')[1]
+        B = document.querySelectorAll('input')[2]
+        A = document.querySelectorAll('input')[3]
+
+         let div = document.querySelector('.Box')
+
+        function RGB_colocr(){
+            div.style.backgroundColor = `rgba(${Number(R.value)}, ${Number(G.value)}, ${Number(B.value)}, ${Number(A.value) / 100})`
+            div.innerHTML = `<p>rgba(${Number(R.value)}, ${Number(G.value)}, ${Number(B.value)})</p>`
+        }
+        R.onchange = function (e){
+            // console.log(Number(e.target.value));
+            console.log(div);
+            div.style.backgroundColor = `rgba(${Number(R.value)}, ${Number(G.value)}, ${Number(B.value)}, ${Number(A.value) / 100})`
+                
+            // div.style.backgroundColor = "#ffffff"
+                console.log(Number(A.value) / 100);
+            div.innerHTML = `<p>rgba(${Number(R.value)}, ${Number(G.value)}, ${Number(B.value)})</p>`
+            
+        }
+        
+        G.onchange = function (e){
+           RGB_colocr()
+        }
+
+        B.onchange = function (e){
+            RGB_colocr
+        }
+
+            let H, S, L;
+            H = document.getElementsByName('T')[4]
+            console.log(H);
+            function HSL_color(){
+                div.style.backgroundColor = `hsl(${Number(R.value)}, ${S.value+"%"}, ${L.value+"%"}, ${Number(A.value) / 100})`
+                div.innerHTML = `<p>hsla(${Number(R.value)}, ${S.value+"%"}, ${L.value+"%"}, ${Number(A.value) / 100})</p>`
+            }
+
+                H.onchange = function (e){
+                    
+                    console.log(S.value+"%");
+                    HSL_color()
+                    }
+
+                S = document.getElementsByName('T')[5]
+                
+                    S.onchange = function (e){
+                        HSL_color()
+                    }
+                
+                L = document.getElementsByName('T')[6]
+                
+                    L.onchange = function (e){
+                        HSL_color()
+                    }
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/H5+Css3/\345\200\274\344\270\216\345\215\225\344\275\215/index_2.html" "b/H5+Css3/\345\200\274\344\270\216\345\215\225\344\275\215/index_2.html"
new file mode 100644
index 0000000..3cc1c93
--- /dev/null
+++ "b/H5+Css3/\345\200\274\344\270\216\345\215\225\344\275\215/index_2.html"
@@ -0,0 +1,206 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+
+<body>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+        }
+
+        body {
+            background-color: rgb(243, 243, 243);
+        }
+
+        :root {
+            --red: 44;
+            --green: 135;
+            --blue: 255;
+        }
+
+        .Box {
+            position: relative;
+            /*相对定位 */
+            left: auto;
+            top: 70px;
+            margin: auto;
+            height: 250px;
+            width: 500px;
+            border: solid 1px #000000;
+        }
+
+        .Box p {
+            /* display: inline-block;
+            text-align: center; */
+            margin-top: 90px;
+            margin-left: 100px;
+            font-size: 40px;
+        }
+
+        .RGB {
+            width: 120px;
+            top: 100px;
+            left: -120px;
+            margin: auto;
+            position: relative;
+        }
+
+        .RGB span {
+            margin-left: 60px;
+        }
+
+        .A {
+            margin-left: 120px;
+        }
+
+        .A_span {
+            margin-left: 180px;
+        }
+
+        .HSL {
+            box-sizing: border-box;
+            float: left;
+            width: 120px;
+            margin: auto;
+            top: -175px;
+            left: 270px;
+            position: relative;
+        }
+
+        .HSL span {
+            margin-left: 60px;
+        }
+    </style>
+
+    <body>
+        <div class="Box">
+            <P>我是一个文字</P>
+        </div>
+        <div class="RGB">
+            <p><input type="range" name="T" min="0" max="255" value=""><span>R</span><br></p>
+            <p><input type="range" name="T" min="0" max="255" value=""><span>G</span><br></p>
+            <p><input type="range" name="T" min="0" max="255" value=""><span>B</span><br></p>
+            <p><input type="range" name="T" class="A" value=""><a class="A_span">A</a><br></p>
+
+            <div class="HSL">
+                <p><input type="range" name="T" min="0" max="360" value=""><span>H</span><br></p>
+                <p><input type="range" name="T" value=""><span>S</span><br></p>
+                <p><input type="range" name="T" value=""><span>L</span><br></p>
+            </div>
+        </div>
+
+        <script>
+
+            let R, G, B, A;
+
+            R = document.querySelectorAll('input')[0]
+            G = document.querySelectorAll('input')[1]
+            B = document.querySelectorAll('input')[2]
+            A = document.querySelectorAll('input')[3]
+
+            let div = document.querySelector('.Box')
+
+            function RGB_colocr() {
+                /** 
+                 *  console.log(Number(e.target.value));
+                 console.log(div);
+                div.style.backgroundColor = `rgba(${Number(e.target.value)}, ${Number(G.value)}, ${Number(B.value)}, ${Number(A.value) / 100})`
+                    
+                        div.style.backgroundColor = "#ffffff"
+                            /*console.log(Number(A.value) / 100);
+
+                        div.innerHTML = `<p>rgba(${Number(e.target.value)}, ${Number(G.value)}, ${Number(B.value)})</p>`
+                            var lightness = (R.value * 0.2126 + G.value * 0.7152 + B.value * 0.0722) / 255
+                            var threshold = 0.5
+                            {color: hsl(0, 0%, calc((lightness - threshold) * -99999%));}
+
+                            let Box_P = document.querySelector('.Box > p')
+
+                            Box_P.style.color = `hsl(${0}, ${0+"%"}, (${lightness} - ${threshold}), ${"*"}, ${-99999+"%"})`
+                            console.log(Box_P);
+                */
+                div.style.backgroundColor = `rgba(${Number(R.value)}, ${Number(G.value)}, ${Number(B.value)}, ${Number(A.value) / 100})`
+                div.innerHTML = `<p>rgba(${Number(R.value)}, ${Number(G.value)}, ${Number(B.value)})</p>`
+            }
+
+            R.onchange = function (e) {
+                RGB_colocr()
+                if ((Number(R.value) + Number(B.value)) >= 306) {
+                    let Box_P = document.querySelector('.Box > p')
+                    Box_P.style.color = "#fff"
+                }else{
+                    Box_P.style.color = "#000"
+                }
+            }
+
+            G.onchange = function (e) {
+                RGB_colocr()
+                if ((Number(R.value) + Number(B.value)) >= 312) {
+                    let Box_P = document.querySelector('.Box > p')
+                    Box_P.style.color = "#fff"
+                }else{
+                    Box_P.style.color = "#000"
+                }
+            }
+
+            B.onchange = function (e) {
+                RGB_colocr()
+                if ((Number(R.value) + Number(B.value)) >= 500) {
+                    let Box_P = document.querySelector('.Box > p')
+                    Box_P.style.color = "#000"
+                }else{
+                    Box_P.style.color = "#fff"
+                }
+            }
+
+            let H, S, L;
+
+            H = document.getElementsByName('T')[4] 
+            S = document.getElementsByName('T')[5] 
+            L = document.getElementsByName('T')[6]
+            // console.log(H);
+
+            function HSL_color() {
+                console.log(S.value + "%");
+                div.style.backgroundColor = `hsl(${Number(H.value)}, ${S.value + "%"}, ${L.value + "%"}, ${Number(A.value) / 100})`
+                div.innerHTML = `<p>hsla(${Number(H.value)}, ${S.value + "%"}, ${L.value + "%"}, ${Number(A.value) / 100})</p>`
+            }
+
+            H.onchange = function (e) {
+                HSL_color()
+                if (Number(H.value) >= 0 || Number(H.value) <= 128) {
+                    let Box_P = document.querySelector('.Box > p')
+                    Box_P.style.color = "#fff"
+                }else{
+                    Box_P.style.color = "#000"
+                }
+            }
+            S.onchange = function (e) {
+                HSL_color()
+                if ((Number(H.value) + Number(S.value)) >= 300) {
+                    let Box_P = document.querySelector('.Box > p')
+                    Box_P.style.color = "#fff"
+                }else{
+                    Box_P.style.color = "#000"
+                }
+            }
+            L.onchange = function (e) {
+                HSL_color()
+                if (Number(H.value) >= 0 || Number(H.value) <= 128) {
+                    let Box_P = document.querySelector('.Box > p')
+                    Box_P.style.color = "#fff"
+                }else{
+                    Box_P.style.color = "#000"
+                }
+            }
+        </script>
+    </body>
+
+</html>
\ No newline at end of file
diff --git "a/H5+Css3/\345\270\203\345\261\200/index.html" "b/H5+Css3/\345\270\203\345\261\200/index.html"
new file mode 100644
index 0000000..d83f709
--- /dev/null
+++ "b/H5+Css3/\345\270\203\345\261\200/index.html"
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+    <style>
+        .parent { 
+                  -moz-column-count:3; /* Firefox */
+                  -webkit-column-count:3; /* Safari 和 Chrome */
+                  column-count:3;
+                  -moz-column-gap: 2em;
+                  -webkit-column-gap: 2em;
+                  column-gap: 2em;
+                  width: 80%;
+                margin:2em auto;
+        }
+        .childern { 
+                 padding: 2em;
+                 margin-bottom: 2em;
+                 /* -moz-page-break-inside: avoid; */
+                 -webkit-column-break-inside: avoid;
+                 break-inside: avoid;
+                 background: #f60;
+        }
+    </style>
+<body>
+    <div id="parent">
+        <!-- div.c*6 -->
+        <div class="childern">
+            <img src="/img/1.jpg" alt="">
+        </div>
+        <div class="childern">
+            <img src="/img/2.jpg" alt="">
+        </div>
+        <div class="childern">
+            <img src="/img/3.jpg" alt="">
+        </div>
+        <div class="childern">
+            <img src="/img/4.jpg" alt="">
+        </div>
+        <div class="childern">
+            <img src="/img/5.jpg" alt="">
+        </div>
+        <div class="childern">
+            <img src="/img/6.jpg" alt="">
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/H5+Css3/\345\274\271\346\200\247\347\233\222\345\255\220/index.html" "b/H5+Css3/\345\274\271\346\200\247\347\233\222\345\255\220/index.html"
new file mode 100644
index 0000000..d9ac7c3
--- /dev/null
+++ "b/H5+Css3/\345\274\271\346\200\247\347\233\222\345\255\220/index.html"
@@ -0,0 +1,185 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+    <style>
+        *{
+            box-sizing: border-box;
+        }
+        html,
+        body{
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background-color: #eaeaea;
+        }
+        [class$="box"] {
+            margin: 16px;
+            padding: 4px;
+            background-color: #E0EEE8;
+            width: 104px;
+            height: 104px;
+            object-fit: contain;
+            box-shadow: inset 0 5px white, inset 0 -5px #bbb, inset 5px 0 #d7d7d7, inset -5px 0 #d7d7d7;
+            border-radius: 10%;
+        }
+        .item{
+            display: block;
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+            margin: 4px;
+
+            background-color: black;
+            box-shadow: inset 0 3px black,inset 0 -3px #555555;
+        }
+        .box_one{
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .two_box{
+            display: flex;
+            justify-content: space-between;
+        }
+        .two_box .item:nth-of-type(2){
+            display: flex;
+            align-self: flex-end;
+        }
+        .three_box {
+            /* display: flex;
+            justify-content: center;
+            align-items: center; */
+            display: flex;
+            justify-content: space-between;
+        }
+        .three_box .item:nth-of-type(2){
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            align-self:center;
+        }
+        .three_box .item:nth-of-type(3){
+            align-self: flex-end;
+        }
+        
+        .four_box,
+        
+        .five_box{
+            display: flex;
+            justify-content: space-between;
+        }
+        .four_box .column,
+        /* .four_box .column {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+        } */
+        /* .five_box .column .item:nth-of-type(2){
+            justify-content: center;
+        } */
+        .five_box .column{
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+        }
+        /* .five_box .column .item:nth-of-type(2){
+            justify-content: center;
+        } */
+        .five_box .column:nth-of-type(2){
+            justify-content: center;
+        }
+        .six_box {
+            display: flex;
+            justify-content: space-between;
+        }
+        .six_box .column{
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+        }
+
+        .seven_box{
+            display: flex;
+            justify-content: space-between;
+        }
+        .seven_box .column{
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+        }
+    </style>
+<body>
+
+    <div class="one_box">
+        <span class="item"></span>
+    </div>
+    <div class="two_box">
+        <span class="item"></span>
+        <span class="item"></span>
+    </div>
+    <div class="three_box">
+        <span class="item"></span>
+        <span class="item"></span>
+        <span class="item"></span>
+    </div>
+    <div class="four_box">
+        <div class="column">
+            <span class="item"></span>
+            <span class="item"></span>
+        </div>
+        <div class="column">
+            <span class="item"></span>
+            <span class="item"></span>
+        </div>
+    </div>
+    <div class="five_box">
+        <div class="column">
+            <span class="item"></span>
+            <span class="item"></span>
+        </div>
+        <div class="column">
+            <span class="item"></span>
+        </div>
+        <div class="column">
+            <span class="item"></span>
+            <span class="item"></span>
+        </div>
+    </div>
+    <div class="six_box">
+        <div class="column">
+            <span class="item"></span>
+            <span class="item"></span>
+            <span class="item"></span>
+        </div>
+        <div class="column">
+            <span class="item"></span>
+            <span class="item"></span>
+            <span class="item"></span>
+        </div>
+        <!-- <div class="column"></div> -->
+    </div>
+    <div class="seven_box">
+        <div class="column">
+            <span class="item"></span>
+            <span class="item"></span>
+            <span class="item"></span>
+        </div>
+        <div class="column">
+            <span class="item"></span>
+            <span class="item"></span>
+            <span class="item"></span>
+        </div>
+        <div class="column">
+            <span class="item"></span>
+            <span class="item"></span>
+            <span class="item"></span>
+        </div>
+    </div>
+
+</body>
+</html>
\ No newline at end of file
diff --git "a/H5+Css3/\350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210/index.html" "b/H5+Css3/\350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210/index.html"
new file mode 100644
index 0000000..187732d
--- /dev/null
+++ "b/H5+Css3/\350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210/index.html"
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<style>
+    p {
+        white-space: nowrap,
+    }
+
+    p.test1 {
+        width: 11em;
+        border: 1px solid #000000;
+        word-break: hyphenate;
+    }
+
+    p.test2 {
+        width: 11em;
+        border: 1px solid #000000;
+        word-break: break-all;
+    }
+
+    p.test {
+        width: 11em;
+        border: 1px solid #000000;
+        word-wrap: break-word;
+    }
+
+    p.spread {
+        word-spacing: 30px;
+    }
+
+    p.tight {
+        word-spacing: -0.5px;
+    }
+
+    h1 {
+        letter-spacing: -0.5em
+    }
+
+    h4 {
+        letter-spacing: 20px
+    }
+</style>
+    <script>
+        /** 
+    1   white-space 属性设置如何处理元素内的空白。
+        使用：----------------
+        normal	默认(文本自动处理换行，到达容器边界的内容会自动转到下一行)。空白会被浏览器忽略。
+        pre	空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
+        nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
+        pre-wrap	保留空白符序列，但是正常地进行换行。
+        pre-line	合并空白符序列，但是保留换行符。
+        inherit	规定应该从父元素继承 white-space 属性的值。
+    2
+        word-break 属性规定自动换行的处理方法。
+        使用：----------------
+        normal	使用浏览器默认的换行规则。
+        break-all	允许在单词内换行。
+        keep-all	只能在半角空格或连字符处换行。
+
+    3
+        word-wrap 属性允许长单词或 URL 地址换行到下一行。
+        使用：----------------
+        normal	只在允许的断字点换行（浏览器保持默认处理）。
+        break-word	在长单词或 URL 地址内部进行换行。
+    
+    4
+        word-spacing 属性增加或减少单词间的空白（即字间隔）。
+        使用：----------------
+        normal	默认。定义单词间的标准空间。
+        length	定义单词间的固定空间。
+        inherit	规定应该从父元素继承 word-spacing 属性的值。
+
+    5
+        letter-spacing 属性增加或减少字符间的空白（字符间距）。
+        使用：----------------
+        normal	默认。规定字符间没有额外的空间。
+        length	定义字符间的固定空间（允许使用负值）。
+        inherit	规定应该从父元素继承 letter-spacing 属性的值。
+
+        px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
+        em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
+        rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。
+            这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。
+    */
+    </script>
+<body>
+    <p>这是一些文本                           。</p>
+    <p>这是一些文本。</p>
+    <p>这是一些文本。</p>
+    <p>这是一些文本。</p>
+    <p>这是一些文本。</p>
+    <p>这是一些文本。</p>
+
+    <p class="test1">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>
+    <p class="test2">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>
+
+    <p class="spread">This is some text. This is some text.</p>
+    <p class="tight">This is some text. This is some text.</p>
+
+    <h1>This is header 1</h1>
+    <h4>This is header 4</h4>
+
+</body>
+
+</html>
\ No newline at end of file
-- 
Gitee

