整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
、CSS簡(jiǎn)介
1.CSS是什么
CSS，指的是Cascading Style Sheet（層疊樣式表），它是用來(lái)控制網(wǎng)頁(yè)外觀的一門技術(shù)。“HTML控制網(wǎng)頁(yè)的結(jié)構(gòu)，CSS控制網(wǎng)頁(yè)的外觀，JavaScript控制網(wǎng)頁(yè)的行為”
2.CSS引入方式
外部樣式表
內(nèi)部樣式表
行內(nèi)樣式表
3.外部樣式表——指的是把CSS代碼和HTML代碼單獨(dú)放在不同的文件中，然后在HTML文檔中使用link標(biāo)簽來(lái)引用CSS樣式表。
語(yǔ)法< link rel="stylesheet" type="text/css" href="文件路徑" />
說(shuō)明：rel的取值是固定的，即"stylesheet"，表示引入的是一個(gè)樣式表文件（即CSS文件），type屬性的取值也是固定的，即“text/css”，表示這是標(biāo)準(zhǔn)的CSS，href屬性表示CSS文件的路徑
注意：link標(biāo)簽是放在head標(biāo)簽內(nèi)的
4.內(nèi)部樣式表——指的是把HTML代碼和CSS代碼放到同一個(gè)HTML文件中，其中，CSS代碼放在style標(biāo)簽內(nèi)，并且style標(biāo)簽是放在head標(biāo)簽內(nèi)部的
語(yǔ)法
type=“text/css” 是必須添加的，表示這是標(biāo)準(zhǔn)的CSS
5.行內(nèi)樣式表——與內(nèi)部樣式表類似，也是把HTML代碼和CSS代碼放到同一個(gè)HTML文件中。不同的是內(nèi)部樣式表的CSS是在“style標(biāo)簽”內(nèi)定義的，而行內(nèi)樣式表的CSS是在“標(biāo)簽的style屬性”中定義的
兩段代碼的實(shí)現(xiàn)效果是一樣的，都是定義三個(gè)div元素的顏色為紅色。
如果使用內(nèi)部樣式表，樣式只需要寫一遍；但是如果使用行內(nèi)樣式表，每個(gè)元素則必須單獨(dú)寫一遍
行內(nèi)樣式表的缺點(diǎn)：代碼冗余
二、CSS選擇器
1.選擇器是什么——用一種方式把你想要的那個(gè)元素選中
只有把它選中了，你才可以為這個(gè)元素添加CSS樣式
2.最實(shí)用的五種選擇器
CSS選擇器的格式：
3.元素選擇器——選擇指定的相同的元素，而不會(huì)選擇其他元素，然后給相同的元素定義同一個(gè)CSS樣式
語(yǔ)法div { width:100px; height:100px; }
上面例子中的p元素和span元素沒(méi)有被選中
4.id選擇器——為元素設(shè)置一個(gè)id屬性，然后針對(duì)設(shè)置了這個(gè)id的元素定義CSS樣式。注意：在同一個(gè)頁(yè)面中，不允許出現(xiàn)兩個(gè)相同的id。
說(shuō)明：對(duì)于id選擇器，id名前面必須要加上前綴#，否則該選擇器無(wú)法生效
5.class選擇器——也就是“類選擇器”，可以對(duì)相同或者不同的元素定義相同的class屬性，然后針對(duì)擁有同一個(gè)class的元素進(jìn)行CSS樣式操作
語(yǔ)法.box { width:100px; height:100px; }
class名前面必須要加上前綴.（英文點(diǎn)號(hào)），否則該選擇器無(wú)法生效
上面的例子是為不同的元素定義相同的class，從而可以同時(shí)操作它們的CSS樣式
6.后代選擇器——選擇元素內(nèi)部中所有的某一元素，包括子元素和其他后代元素（如孫元素）
語(yǔ)法h3 p {width:100px; height:100px;}
說(shuō)明：父元素和后代元素必須要用空格隔開(kāi)，從而表示選中某個(gè)元素內(nèi)部的后代元素
7.群組選擇器——同時(shí)對(duì)幾個(gè)選擇器進(jìn)行相同的操作（效率高）
語(yǔ)法h3,p {width:100px; height:100px;
說(shuō)明：對(duì)于群組選擇器，兩個(gè)選擇器之間必須要用英文逗號(hào)（,）隔開(kāi)，不然群組選擇器就無(wú)法生效
三、字體樣式
1.字體樣式
類似于Word軟件中對(duì)于字體樣式的設(shè)置，我們可以知道CSS字體樣式的屬性有以下五種：
font-family——字體類型
font-size——字體大小
font-weight——字體粗細(xì)
font-style——字體風(fēng)格
color——字體顏色
2.字體類型（font-family）
語(yǔ)法：font-family：字體1，字體2，...，字體N；
說(shuō)明：font-family可以指定多種字體。使用多種字體時(shí)，將按從左到右的順序排列，并且以英文逗號(hào)（,）隔開(kāi)。瀏覽器默認(rèn)的字體類型一般是“宋體”
舉例：設(shè)置一種字體
舉例：設(shè)置多種字體
為元素設(shè)置多種字體的原因是：在有些字體沒(méi)有安裝的情況下，可以使用下一個(gè)字體，優(yōu)先使用左邊的字體。
3.字體大小（font-size）——采用px為單位
語(yǔ)法font-size：像素值；
說(shuō)明：實(shí)際上，font-size屬性取值有兩種，一種是“關(guān)鍵字”，如small，medium，large等。另外一種是“像素值”，如10px、16px、21px等。不過(guò)在實(shí)際開(kāi)發(fā)中，關(guān)鍵字這種方式基本不會(huì)用
4.字體粗細(xì)（font-weight）
語(yǔ)法font-weight：取值;
font-weight屬性取值有兩種：一種是100~900的“數(shù)值”；另外一種是“關(guān)鍵字”。
其中關(guān)鍵字取值有：normal（正常）、lighter（較細(xì)）、bold（較粗）、bolder（很粗）。對(duì)于實(shí)際開(kāi)發(fā)來(lái)說(shuō)，一般我們只會(huì)用到bold這一個(gè)屬性值，其他的幾乎用不上。
在實(shí)際開(kāi)發(fā)中，不建議使用數(shù)值作為font-weight的屬性取值，一般使用關(guān)鍵字的bold屬性值
5.字體風(fēng)格（font-style）
語(yǔ)法font-style：取值；
font-style屬性取值有：normal（正常）、italic（斜體）、oblique（斜體）
從預(yù)覽效果可以看出，font-style屬性值為italic或oblique時(shí)，頁(yè)面效果是一樣的
但其實(shí)它們的區(qū)別在于：italic是字體的一個(gè)屬性，但并非所有的字體都有這個(gè)屬性。因此對(duì)于有italic屬性的字體，我們使用font-style：italic來(lái)實(shí)現(xiàn)斜體效果；對(duì)于沒(méi)有italic屬性的字體，我們使用font-style：oblique來(lái)實(shí)現(xiàn)。
6.字體顏色（color）
語(yǔ)法color：顏色值;
color屬性取值有兩種：關(guān)鍵字 & 16進(jìn)制RGB值
關(guān)鍵字 如red、green、blue等
16進(jìn)制RGB值——類似于#FBF9D0形式的值
單純靠“關(guān)鍵字”，滿足不了實(shí)際開(kāi)發(fā)的需求。因此引入了“16進(jìn)制RGB值”
記：#000000是黑色，#FFFFFF是白色
7.CSS注釋
語(yǔ)法/* 注釋的內(nèi)容*/
注意：
小技巧：瀏覽器解析CSS是有一定順序的，后面樣式的會(huì)覆蓋前面的樣式。
四、文本樣式
文本樣式和字體樣式的區(qū)別：字體樣式針對(duì)的是“文字本身”的型體效果，而文本樣式針對(duì)的是“整個(gè)段落”的排版效果。字體樣式注重個(gè)體，文本樣式注重整體。
文本樣式屬性
text-indent ——首行縮進(jìn)
text-align ——水平對(duì)齊
text-decoration ——文本修飾
text-transform ——大小寫
line-height ——行高
letter-spacing、word-spacing ——字母間距、詞間距
1.首行縮進(jìn)（text-indent）
p元素的首行是不會(huì)自動(dòng)縮進(jìn)的，在HTML中我們常常使用空格代碼 來(lái)實(shí)現(xiàn)首行縮進(jìn)，但是這種方式冗余代碼很多；在CSS中，我們可以使用text-indent屬性來(lái)定義p元素的首行縮進(jìn)。
語(yǔ)法text-indent：像素值；
說(shuō)明：初學(xué)CSS，建議使用像素（px）作為單位。
中文段落首行一般需要縮進(jìn)兩個(gè)字符，設(shè)置首行縮進(jìn)的像素值是字體大小的兩倍即可
2.水平對(duì)齊（text-align）——控制文本在水平方向上的對(duì)齊方式
語(yǔ)法 text-align：取值；
text-align屬性取值有：
left——左對(duì)齊（默認(rèn)值）
center——居中對(duì)齊
right——右對(duì)齊。
在實(shí)際開(kāi)發(fā)中，我們只會(huì)用到center這一個(gè)，其他兩個(gè)幾乎用不上。另外，text-align屬性不僅對(duì)文本有效，對(duì)圖片（img元素）也有效
3.文本修飾（text-decoration）——定義文本的修飾效果（下劃線、中劃線、頂劃線）
語(yǔ)法text-decoration：取值；
text-decoration屬性取值：
none——去除所有的劃線效果（默認(rèn)值）
underline——下劃線（一般用于強(qiáng)調(diào)文章中的重點(diǎn)）
line-through——中劃線（一般用于促銷）
overline——頂劃線（極少用）
超鏈接（a元素）默認(rèn)樣式有下劃線，可以使用text-decoration:none去除a元素的下劃線
4.大小寫（text-transform）——針對(duì)英文而言，中文不存在大小寫之分
語(yǔ)法 text-transform：取值；
text-transform屬性取值
none——無(wú)轉(zhuǎn)換（默認(rèn)值）
uppercase——轉(zhuǎn)換為大寫
lowercase——轉(zhuǎn)換為小寫
capitalize——將每個(gè)英文單詞首字母轉(zhuǎn)換為大寫
5.行高（line-height）——控制每行文本的高度，與“行間距”是完全不一樣的概念
語(yǔ)法line-height：像素值；
6.間距（letter-spacing & word-spacing）
字間距（letter-spacing）——調(diào)整兩個(gè)字之間的距離
語(yǔ)法letter-spacing：像素值；
注意：每個(gè)中文漢字都被當(dāng)成一個(gè)“字”，而每個(gè)英文字母也當(dāng)做一個(gè)“字”
詞間距（word-spacing）——定義兩個(gè)單詞之間的距離（只針對(duì)英文單詞而言）
語(yǔ)法word-spacing：像素值；
在實(shí)際開(kāi)發(fā)中，我們很少去定義中文網(wǎng)頁(yè)中的字間距以及詞間距，letter-spacing和word-spacing只會(huì)用于英文網(wǎng)頁(yè)。這兩個(gè)我們平時(shí)幾乎用不上
五、邊框樣式
1.邊框樣式屬性
邊框?qū)挾龋╞order-width）：取值是一個(gè)像素值
邊框外觀（border-style）：none（無(wú)樣式）、dashed（虛線）、solid（實(shí)線）
邊框顏色（border-color）：關(guān)鍵字、16進(jìn)制RGB值
想要為一個(gè)元素定義邊框樣式，必須要同時(shí)設(shè)置這三個(gè)屬性才會(huì)有效果
簡(jiǎn)寫形式：border：2px solid red；
2.局部樣式
一個(gè)邊框元素其實(shí)有四條邊（上、下、左、右）前面我們學(xué)習(xí)的是四條邊的整體樣式，現(xiàn)在來(lái)學(xué)習(xí)對(duì)某一條邊進(jìn)行單獨(dú)設(shè)置。
上邊框（border-top）
border-top-width: 2px;
border-top-style: solid;
border-top-color: red;
下邊框（border-bottom）
border-bottom-width: 2px;
border-buttomstyle: solid;
border-buttom-color: red;
左邊框（border-left）
border-left-width: 2px;
border-left-style: solid;
border-left-color: red;
右邊框（border-right）
border-right-width: 2px;
border-right-style: solid;
border-right-color: red;
簡(jiǎn)寫形式：border-right：2px solid red;
去除下邊框：（以下三個(gè)是等價(jià)的）
六、列表樣式
1.列表項(xiàng)符號(hào)（list-style-type）
在HTML中，我們使用type屬性來(lái)定義有序列表和無(wú)序列表的列表項(xiàng)符號(hào)，但是我們說(shuō)過(guò)，結(jié)構(gòu)和樣式應(yīng)該是分離的，所以在CSS中，我們將使用list-style-type屬性來(lái)定義列表項(xiàng)符號(hào)
語(yǔ)法list-style-type：取值；
說(shuō)明：list-style-type屬性是針對(duì)ol或者ul元素的，而不是li元素。
list-style-type屬性取值（有序列表）
decimal——阿拉伯?dāng)?shù)字：1，2，3…（默認(rèn)值）
lower-roman——小寫羅馬數(shù)字：i、ii、iii…
upper-roman——大寫羅馬數(shù)字：I、II、III…
lower-alpha——小寫英文字母：a、b、c…
upper-alpha——大寫英文字母：A、B、C…
list-style-type屬性取值（無(wú)序列表）
disc——實(shí)心圓●（默認(rèn)值）
circle——空心圓○
square——正方形■
去除列表項(xiàng)符號(hào)
語(yǔ)法list-style-type：none；
2.列表項(xiàng)圖片（list-style-image）——使用圖片來(lái)代替列表項(xiàng)符號(hào)
語(yǔ)法list-style-image：url（圖片路徑）；
在實(shí)際開(kāi)發(fā)中，我們會(huì)使用更為高級(jí)的字體圖標(biāo)（iconfont）技術(shù)來(lái)實(shí)現(xiàn)列表項(xiàng)圖片
七、表格樣式
1.表格標(biāo)題位置（caption-side）
語(yǔ)法caption-side：取值；
caption-side屬性取值：
top——標(biāo)題在頂部（默認(rèn)）
bottom——標(biāo)題在底部
如果想要定義表格標(biāo)題的位置，在table或caption這兩個(gè)元素的CSS中定義caption-side屬性
2.表格邊框合并（border-collapse）——去除表格加入邊框后單元格之間的空隙
語(yǔ)法border-collapse：取值；
border-collapse屬性取值：
separate——邊框分開(kāi)，有空隙（默認(rèn)值）
collapse——邊框合并，無(wú)空隙
border-collapse屬性也是在table元素中定義的table{border-collapse: collapse;}
3.表格邊框間距（border-spacing）
語(yǔ)法border-spacing：像素值；
border-spacing屬性也是在table元素中定義的table{border-spacing：8px;}
八、圖片樣式
1.圖片大小——使用width和height這兩個(gè)屬性來(lái)定義圖片的大小
語(yǔ)法
在實(shí)際開(kāi)發(fā)中，需要使用多大的圖片，就用Photoshop制作多大的圖片。不建議使用一張大圖片，然后再借助width和weight來(lái)改變大小。
2.圖片邊框
語(yǔ)法border：1px solid red；
在“邊框樣式”中我們已經(jīng)詳細(xì)介紹了border屬性
3.圖片對(duì)齊
水平對(duì)齊
語(yǔ)法text-align：取值（left、center、right）；
注意：圖片的水平對(duì)齊不是在img元素中定義的，是在父元素中進(jìn)行水平對(duì)齊的
text-align屬性一般只用于兩個(gè)地方：文本水平對(duì)齊和圖片水平對(duì)齊
垂直對(duì)齊
語(yǔ)法vertical-align：取值；
vertical-align屬性取值
top（頂部對(duì)齊）
middle（中部對(duì)齊）
baseline（基線對(duì)齊）
bottom（底部對(duì)齊）
4.文字環(huán)繞——初識(shí)float
圖文混排，指的是文字環(huán)繞著圖片進(jìn)行布局
語(yǔ)法img{float：取值；}
float屬性取值
left——元素向左浮動(dòng)
right——元素向右浮動(dòng)
九、背景樣式
1.背景顏色（background-color）
語(yǔ)法background-color：顏色值（關(guān)鍵字、16進(jìn)制RGB值）；
兩種顏色取值
color&background-color的區(qū)別：
color屬性用于定義“文本顏色”，而background-color屬性用于定義“背景顏色”
2.背景圖片（background-image）
語(yǔ)法background-image：url（圖片路徑）；
說(shuō)明：跟引入圖片（即image標(biāo)簽）一樣，引入背景圖片也需要給出圖片路徑才可以顯示
注意：我們需要為div元素添加width和height，背景圖片才會(huì)顯示出來(lái)
3.背景圖片重復(fù)（background-repeat）
語(yǔ)法background-repeat：取值；
background-repeat屬性取值：
repeat——在水平方向和垂直方向同時(shí)平鋪（默認(rèn)值）
repeat-x——只在水平方向（x軸）上平鋪
repeat-y——只在垂直方向（y軸）上平鋪
no-repeat——不平鋪
注意：元素的寬度和高度必須大于背景圖片的寬度和高度，才會(huì)有重復(fù)效果
4.背景圖片的位置（background-position）
語(yǔ)法background-position：像素值/關(guān)鍵字；
像素值——要設(shè)置水平方向和垂直方向的值（像素值）
例如background-position：12px 24px;表示背景圖片與該元素左上角的水平方向距離為12px，垂直方向距離為24px。水平距離和垂直距離這兩個(gè)數(shù)值之間要用空格隔開(kāi)
關(guān)鍵字——也要同時(shí)設(shè)置水平方向和垂直方向的值（關(guān)鍵字）
語(yǔ)法background-position：水平距離 垂直距離；
關(guān)鍵字取值
top left——左上
top center——靠上居中
top right——右上
left center——靠左居中
center center——正中
right center——靠右居中
bottom left——左下
bottom center——靠下居中
bottom right——右下
5.背景圖片固定（background-attachment）——定義背景圖片是隨元素一起滾動(dòng)還是固定不動(dòng)
語(yǔ)法background-attachment：取值；
scroll——隨元素一起滾動(dòng)（默認(rèn)值）
fixed——固定不動(dòng)
十、超鏈接樣式
1.超鏈接偽類
默認(rèn)情況下：字體為藍(lán)色，帶有下劃線。
鼠標(biāo)點(diǎn)擊時(shí)：字體為紅色，帶有下劃線。
鼠標(biāo)點(diǎn)擊后：字體為紫色，帶有下劃線。
在CSS中，我們可以使用“超鏈接偽類”來(lái)定義超鏈接在鼠標(biāo)點(diǎn)擊的不同時(shí)期的樣式。
語(yǔ)法
注意：定義這四個(gè)偽類，必須按上面的順序進(jìn)行，否則瀏覽器無(wú)法正常顯示這四種樣式
link樣式表示的是a元素從未被訪問(wèn)過(guò)。
2.深入了解超鏈接偽類
我們沒(méi)有必要定義四種狀態(tài)下的樣式，在實(shí)際開(kāi)發(fā)中，我們只會(huì)用到兩種狀態(tài)：未訪問(wèn)時(shí)狀態(tài)和鼠標(biāo)經(jīng)過(guò)狀態(tài)。而對(duì)于未訪問(wèn)狀態(tài)，我們可以直接對(duì)a元素定義，沒(méi)必要使用a:link。
語(yǔ)法
事實(shí)上，對(duì)于超鏈接偽類來(lái)說(shuō)，我們只需要記住a:hover這一個(gè)就夠了，因?yàn)樵趯?shí)際開(kāi)發(fā)中也只會(huì)用到這一個(gè)。
3.深入了解：hover
hover偽類不只限用于a元素，hover偽類可以定義任何一個(gè)元素在鼠標(biāo)經(jīng)過(guò)時(shí)的樣式！
語(yǔ)法元素：hover{...}
4.鼠標(biāo)樣式
瀏覽器鼠標(biāo)樣式——cursor（11種）
語(yǔ)法cursor：取值；
cursor屬性取值（常用的三種）
default（默認(rèn)值）——鼠標(biāo)默認(rèn)樣式
pointer——鼠標(biāo)手狀樣式
text——鼠標(biāo)文本樣式
自定義鼠標(biāo)樣式
語(yǔ)法cursor：url（圖片地址），屬性值；
說(shuō)明：這個(gè)“圖片里地址”是鼠標(biāo)圖片地址，其中鼠標(biāo)圖片后綴名一般都是.cur，可以使用Photoshop來(lái)制作。
十一、盒子模型
頁(yè)面中，所有的元素都可以看成一個(gè)盒子
1.盒子模型的組成部分
內(nèi)容區(qū)——CSS盒子模型的中心
內(nèi)邊距——內(nèi)容區(qū)和邊框之間的距離
外邊距——兩個(gè)盒子之間的距離
邊框
2.寬和高（width和height）
元素的寬度和高度是針對(duì)內(nèi)容區(qū)而言的。
只有塊元素才可以設(shè)置width和height，行內(nèi)元素是無(wú)法設(shè)置width和height的
3.邊框（border）
簡(jiǎn)寫形式（寬度、外觀，顏色）
border：1px solid red；
4.內(nèi)邊距（padding）
內(nèi)邊距分為四個(gè)方向：上、右、下、左（順時(shí)針?lè)较颍?/p>
padding-top：像素值；
padding-right：像素值；
padding-bottom：像素值；
padding-left：像素值；
padding簡(jiǎn)寫形式
padding：像素值；表示四個(gè)方向的內(nèi)邊距
padding：像素值1 像素值2；表示上下、左右邊距
padding：像素值1 像素值2 像素值3 像素值4；上、右、下、左（順時(shí)針）
5.外邊距（margin）
外邊距分為四個(gè)方向：上、右、下、左（順時(shí)針?lè)较颍?/p>
margin-top：像素值；
margin-right：像素值；
margin-bottom：像素值；
margin-left：像素值；
外邊距指的是兩個(gè)盒子之間的距離，它可能是子元素與父元素之間的距離，也可能是兄弟元素之間的距離。只有當(dāng)我們加入其它元素當(dāng)參考對(duì)象時(shí)，才能看到效果。
當(dāng)既有父元素，也有兄弟元素時(shí)，則這個(gè)方向的margin就是相對(duì)于兄弟元素而言，如果沒(méi)有兄弟元素，則相對(duì)于父元素而言
margin簡(jiǎn)寫形式與padding一樣
二十二、浮動(dòng)布局
1.正常文檔流&脫離文檔流
正常文檔流——默認(rèn)情況下的HTML文檔結(jié)構(gòu)
脫離文檔流——脫離正常文檔流，使用浮動(dòng)和定位去改變
2.浮動(dòng)——float
float屬性取值
left——元素向左浮動(dòng)
right——元素向右浮動(dòng)
3.清除浮動(dòng)——clear
clear屬性取值
left——清除左浮動(dòng)
right——清除右浮動(dòng)
both——同時(shí)清除左浮動(dòng)和有浮動(dòng)（常用）
二十三、定位布局
浮動(dòng)布局比較靈活，但是不容易控制
定位布局精準(zhǔn)定位頁(yè)面中的元素，但是缺乏靈活性
布局定位的四種方式：
固定定位（fixed）
相對(duì)定位（relative）
絕對(duì)定位（absolute）
靜態(tài)定位（static）——默認(rèn)情況下
這四種方式都是通過(guò)position屬性來(lái)實(shí)現(xiàn)的
1.固定定位：fixed——指的是被固定的元素不會(huì)隨著滾動(dòng)條的拖動(dòng)而改變位置
語(yǔ)法：
position：fixed；
top：像素值；
bottom：像素值；
left：像素值；
right：像素值；
這四個(gè)屬性不一定全部都用到，一般只會(huì)用到其中兩個(gè)，參考對(duì)象是瀏覽器的四條邊
2.相對(duì)定位：relative——指的是該元素的位置是相對(duì)于它的原始位置計(jì)算而來(lái)的
語(yǔ)法：
position：relative；
top：像素值；
bottom：像素值；
left：像素值；
right：像素值；
這四個(gè)屬性不一定全部都用到，一般只會(huì)用到其中兩個(gè)，參考對(duì)象是該元素的原始位置
3.絕對(duì)定位：absolute（使用最廣泛）
語(yǔ)法：
position：absolute；
top：像素值；
bottom：像素值；
left：像素值；
right：像素值；
這四個(gè)屬性不一定全部都用到，一般只會(huì)用到其中兩個(gè)，參考對(duì)象是瀏覽器的四條邊；
一個(gè)元素變成了絕對(duì)定位元素，這個(gè)元素就完全脫離文檔流了，即這個(gè)元素浮于其他元素上面，獨(dú)立出來(lái)
總結(jié)：默認(rèn)情況下，固定定位和絕對(duì)定位的位置是相對(duì)于瀏覽器而言，而相對(duì)定位的位置是相對(duì)原始位置而言。
————————————————
版權(quán)聲明：本文為CSDN博主「MOSIMIN」的原創(chuàng)文章，遵循CC 4.0 by-sa版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
.字符串replaceAll()方法
要在 JavaScript 中從字符串中刪除所有空格，請(qǐng)?jiān)谧址险{(diào)用 replaceAll() 方法，將包含空格的字符串作為第一個(gè)參數(shù)傳遞，將空字符串 ('') 作為第二個(gè)參數(shù)傳遞。 例如， str.replaceAll(' ', '') 從 str 中刪除所有空格。
const str = 'A B C';
const allSpacesRemoved = str.replaceAll(' ', '');console.log(allSpacesRemoved); // ABCString replaceAll() 方法返回一個(gè)新字符串，其中模式的所有匹配項(xiàng)都被替換替換。 第一個(gè)參數(shù)是要匹配的模式，第二個(gè)參數(shù)是替換。 因此，將空字符串作為第二個(gè)參數(shù)傳遞會(huì)用空替換所有空格，從而將它們刪除。
筆記
JavaScript 中的字符串是不可變的，replaceAll() 返回一個(gè)新字符串而不修改原始字符串。
const str = 'A B C';
const allSpacesRemoved = str.replaceAll(' ', '');console.log(allSpacesRemoved); // ABC// Original not modified
console.log(str); // A B C2.字符串replace()方法和正則表達(dá)式
或者，我們可以通過(guò)調(diào)用字符串的 replace() 方法從字符串中刪除所有空格，將匹配任何空格的正則表達(dá)式作為第一個(gè)參數(shù)傳遞，并將空字符串 ('') 作為第二個(gè)參數(shù)。
const str = 'A B C';
const allSpacesRemoved = str.replace(/ /g, '');console.log(allSpacesRemoved); // ABC我們使用 g 正則表達(dá)式標(biāo)志來(lái)指定字符串中的所有空格都應(yīng)該匹配。 如果沒(méi)有這個(gè)標(biāo)志，只有第一個(gè)空格會(huì)被匹配和替換：
const str = 'A B C';// No 'g' flag in regex
const spacesRemoved = str.replace(/ /, '');// Only first space removed
console.log(spacesRemoved); // AB CString replace() 方法返回一個(gè)新字符串，其中所有匹配項(xiàng)都替換為傳遞給它的第二個(gè)參數(shù)。 我們傳遞一個(gè)空字符串作為第二個(gè)參數(shù)，以將所有空格替換為空，從而將它們刪除。
筆記
與 replaceAll() 一樣，replace() 返回一個(gè)新字符串而不修改原始字符串。
const str = 'A B C';
const spacesRemoved = str.replace(/ /g, '');console.log(spacesRemoved); // ABC// Original not modified
console.log(str); // A B C小費(fèi)
我們指定的正則表達(dá)式只匹配字符串中的空格。 要匹配和刪除所有空白字符（空格、制表符和換行符），我們必須使用不同的正則表達(dá)式：
const str = 'A B C \t D \n E';
const whitespaceRemoved = str.replace(/\s/g, '');console.log(whitespaceRemoved); // ABC關(guān)注七爪網(wǎng)，獲取更多APP/小程序/網(wǎng)站源碼資源！
n2=n+1
在markdown中寫法：
n<sup>2</sup>=n+1
a=log2b
在markdown中寫法：
a=log<sub>2</sub>b
? ? ° ? ? ? ? √ " &
在markdown中寫法：
? ? ° ? ? ? ? √ \" \&
居中：:-:
箭頭符號(hào)：
在markdown中寫法：
$\Rightarrow$ $\Leftarrow$
在 Markdown 文檔中，可以直接采用 HTML 標(biāo)記插入空格（blank space），而且無(wú)需任何其他前綴或分隔符。具體如下所示：
插入一個(gè)空格 或 或 (non-breaking space)
插入兩個(gè)空格 ?或?或?(en space)
插入四個(gè)空格 ?或?或?(em space)
插入細(xì)的空格 ?或?或?(thin space)
在markdown中寫法：
插入一個(gè)空格
或 或
插入兩個(gè)空格
?或?或?
插入四個(gè)空格
?或?或?
插入細(xì)的空格
?或?或?
注意：不要漏掉分號(hào)。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
