国内少妇人妻偷人精品xxx,成人a片高潮痉挛,超粉嫩00无码福利视频

HTML5：布局類標(biāo)簽

HTML是具有語義化的語言，針對網(wǎng)頁的布局，有一類標(biāo)簽代表各種意義的“布局盒子”。所有的布局類標(biāo)簽都主要用來構(gòu)建頁面的內(nèi)容區(qū)域，是雙標(biāo)簽類型，是雙標(biāo)簽類型，默認(rèn)顯示為塊狀元素。

通用的布局標(biāo)簽：<div>。語義：無明確的含義，通常就是代表“盒子”；應(yīng)用：根據(jù)布局的需要，可以使用到任何地方，可以用id和class來對<div>進(jìn)行定義或區(qū)分。

HTML5版本新增的常用布局標(biāo)簽：

標(biāo)簽語義

<header> 頁面或區(qū)域的頭部

<footer> 頁面或區(qū)域的底部

<nav> 導(dǎo)航

<section> 文檔中的章節(jié)、區(qū)段、板塊等（類似div，但主要針對文檔類區(qū)域）

<aside> 側(cè)邊欄

<article> 文章/文檔

HTML5布局的優(yōu)勢：頁面代碼更加簡單、高效；新布局標(biāo)簽本身具有的語義明確告知瀏覽器其在頁面中的位置和結(jié)構(gòu)意義，增強(qiáng)了對搜索引擎的友好型，提升SEO價(jià)值。

HTML5布局的缺點(diǎn)：老版本的瀏覽器不支持HTML5這類布局標(biāo)簽，如IE8或更早的版本。從兼容角度出發(fā)，目前多數(shù)站點(diǎn)扔使用<div>標(biāo)簽構(gòu)建傳統(tǒng)布局。

CSS：float浮動屬性

作用：將頁面元素浮動起來，使其能夠向左或者向右排列；應(yīng)用：實(shí)現(xiàn)頁面中布局的左右排版，實(shí)現(xiàn)圖文環(huán)繞的版式效果。

值說明

left 元素本身向左浮動

right 元素本身向右浮動

none 元素不浮動（默認(rèn)值）

原理：浮動元素將脫離默認(rèn)的文檔流，漂浮在默認(rèn)文檔流之上。浮動的元素會向左或向右移動，直到它的外邊緣碰到父級元素或這個(gè)元素之前的另一個(gè)浮動元素的邊框?yàn)橹埂?/p>

特點(diǎn)：1. 對齊方式（不管元素如何浮動，始終以父級容器或它前面同層次并列的元素作為參考進(jìn)行對齊。）

? ? ? ? ? ?2. 一旦元素浮動起來，就可以直接適用CSS盒子模型屬性。（行間元素脫離默認(rèn)文檔流的行間限制。）

? ? ? ? ? ?3. 對內(nèi)容的影響（盡管浮動元素脫離了默認(rèn)文檔流，但仍然會影響到默認(rèn)文檔流中的盒子里面裝的“內(nèi)容”（圖文），這些“內(nèi)容”會給浮動元素留出占位。盒子還是那么大，但是內(nèi)容給浮動元素讓出了位置。內(nèi)容為王。）

CSS：clear清除浮動

作用：規(guī)定某個(gè)元素的某一側(cè)不允許存在浮動元素。

應(yīng)用：清除其他浮動元素對其產(chǎn)生的影響。

原理：設(shè)置了clear的元素將不再像前一個(gè)浮動元素對齊，換行重新開始。

值說明

both 兩側(cè)都不允許存在浮動元素

left 清除元素左側(cè)的浮動元素

right 清除元素右側(cè)的浮動元素

none 無清除效果（默認(rèn)值）

<!doctype html>

<html>

<head>

<style>

#box-a {width:200px; height:200px; background:red;}

#box-b {width:300px; height:300px; background:yellow;}

#box-c {width:800px; height:100px; background:blue;}

#box-a {float:left;}

#box-b {float:right;}

#box-c {clear:both;}/*清除box-a和box-b的浮動對box-c的影響*/

</style>

</head>

<body>

</body>

</html>

效果圖：

Q：什么是“塌陷”？

A：如果父元素只包含浮動元素，那么在未設(shè)置高度的同時(shí)，則父元素高度坍塌為零。

解決“塌陷”的辦法：

step 1. 創(chuàng)建一個(gè)用來清除浮動的CSS樣式類（.clearfix）

step 2. 針對包裹的全是浮動元素的父級容器使用（.clearfix）

如下：相當(dāng)于在父元素中補(bǔ)一個(gè)內(nèi)容，然后再做清除。

.clearfix {

zoom:1; /*zoom屬性：IE瀏覽器的專用屬性。這一句是專門針對老版本的IE瀏覽器所寫的，為了兼容。*/

}

.clearfix:after {/*:after偽對象選擇符——在這個(gè)對象被瀏覽器渲染后添加一定的內(nèi)容*/

content:"."; /*content屬性添加的內(nèi)容寫在這里屬性的值里面，這個(gè)屬性是專門配合偽對象，必須寫*/

display:block; /*將添加進(jìn)去的內(nèi)容轉(zhuǎn)換為塊狀元素*/

visibility:hidden; /*visibility:可視化屬性，控制元素是否可見。無論是否可見，都保留其物理空間。*/

height:0;

clear:both;/*將添加進(jìn)去的內(nèi)容作為清除浮動的對象，實(shí)現(xiàn)外圍容器中有內(nèi)容存在，因此可以自動判定高度，解決塌陷。*/

}

常見布局總結(jié)

主流布局的類型：

1.靜態(tài)布局（static）

靜態(tài)布局是針對PC段的傳統(tǒng)Web設(shè)計(jì)。設(shè)計(jì)一個(gè)居中布局，一般具有固定的寬度，當(dāng)瀏覽器窗口縮小時(shí)，頁面內(nèi)容會被遮擋，呈現(xiàn)橫豎向滾動條。

2.響應(yīng)式布局（responsive）

針對越來越多的移動端設(shè)備，一個(gè)web設(shè)計(jì)能夠兼容多個(gè)終端。通過CSS3中的Media Query（媒介查詢），采用柵格化方式，分別為不同的屏幕分辨率定義布局。

3.彈性布局（flexbox）

響應(yīng)式布局中的一種，為了實(shí)現(xiàn)響應(yīng)式布局，CSS3提供的一種最新布局模式。提供更加高效的方式來對布局容器的子元素進(jìn)行排列、對齊和分配空白空間。

PC站常見布局

1. 一列布局（靜態(tài)布局）：一列自適應(yīng)居中

2. 兩列布局：一列固定寬+一列自適應(yīng)

3. 三列布局（雙飛翼布局）：中間列自適應(yīng)寬+左右列固定寬

一列布局：

<!doctype html>

<html>

<head>

<title>一列布局：一列自適應(yīng)居中</title>

<style>

* {

margin:0;

padding:0;

}

html,body {

height:100%;

}

.container {

width:600px;

height:100%;

margin:0 auto;

background:gray;

border:1px red solid;

}

</style>

</head>

<body>

</body>

</html>

兩列布局：

<!doctype html>

<html>

<head>

<title>兩列布局：一列固定寬，一列自適應(yīng)</title>

<style>

* {

margin:0;

padding:0;

}

html,body {

height:100%;

}

aside, .main {

height:100%;

border:1px red solid;

}

aside {

background:#0FF;

float:left;

width:200px;

}

.main {

margin-left:210px;

background:#CC3;

}

</style>

</head>

<body>

<div class="main">主體box</div>

</body>

</html>

雙飛翼布局：

<!doctype html>

<html>

<head>

<style>

* {

margin:0;

padding:0;

}

html, body {

height:100%;

}

.main,.left,.right {

height:100%;

float:left;

}

.main {

width:100%;

padding-left:200px;

padding-right:300px;

box-sizing:border-box;

background:#CCC;

}

.left {

margin-left:-100%;

width:200px;

background:#0CF;

}

.right {

margin-left:-300px;

width:300px;

background:#F63;

}

</style>

</head>

<body>

<div class="main">中中中中中間</div>

<div class="left">左邊左邊左邊左邊</div>

</body>

</html>

CSS：文本樣式

屬性說明

text-align 設(shè)置文本的水平對齊方式

text-decoration 設(shè)置文本的修飾方式

text-indent 設(shè)置文本的首行縮進(jìn)

text-transform 設(shè)置文本的轉(zhuǎn)換（針對英文）

text-shadow 設(shè)置文本的陰影效果

line-height 設(shè)置文本行高

overflow 設(shè)置文本（容器內(nèi)部內(nèi)容）溢出的控制方式

letter-spacing 設(shè)置字符之間的間距

word-spacing 設(shè)置詞語之間的間距

word-break 設(shè)置文本自動換行的方法

1. text-align：必須用于塊狀元素，如<p>，<div>。定義內(nèi)部文本及內(nèi)聯(lián)元素如何橫向?qū)R。默認(rèn)值是start，取決于html文檔的direction屬性設(shè)置（默認(rèn)都是從左至右，所以等同于left）。

2. text-decoration：主要用來對文本添加線條修飾。通常為了美觀，會消除超級鏈接默認(rèn)的下劃線修飾：a { text-decoration:none;}

3. text-indent：作用于塊狀元素，用來在塊狀元素的內(nèi)容第一行添加一定的空格，以達(dá)到首行縮進(jìn)的效果。和font-size屬性一樣，對于首行縮進(jìn)，你也可以使用px，em或者%。

一般使用相對單位em，以元素本身字體尺寸為參考基數(shù)。中文網(wǎng)頁中段落的首行縮進(jìn)通常是2個(gè)文字的距離，常用代碼：p {text-indent:2em;}?？梢允褂秘?fù)值，產(chǎn)生一些特殊效果，如“懸掛縮進(jìn)”。

4. text-transform：用于轉(zhuǎn)換文本中的大小寫方式（忽略源文檔中的大小寫），對中文無效。

5. text-shadow：用來設(shè)置文本的陰影效果，是CSS3的新增屬性。實(shí)現(xiàn)一種陰影效果需要設(shè)定一組值而非一個(gè)值，并按照順序來書寫值。可以通過添加多組值來設(shè)定多重陰影，達(dá)到特殊效果，多組值之間用逗號隔開。部分老瀏覽器版本不支持該屬性（IE9及以下），但這并不產(chǎn)生大的影響。

按順序書寫4個(gè)值：水平陰影距離>垂直陰影距離>模糊程度>陰影顏色

text-shadow:3px 3px 3px red;

text-shadow:3px 3px 3px red, 10px 10px 10px black;/*多組陰影*/

6. line-height：用來設(shè)置行的高度，是一個(gè)簡單又復(fù)雜的屬性。可以將行高看成是以文字內(nèi)容本身為中線，上下垂直延伸形成空隙而成。即：將行距的值（行高-字號）/2，分別增加到內(nèi)容區(qū)域的上下兩邊。

通常使用相對單位來設(shè)定行高，因?yàn)樾懈呤且晕谋镜淖痔枮閰⒖蓟鶞?zhǔn)。默認(rèn)情況下，瀏覽器將行高呈現(xiàn)為字體尺寸的1到1.2倍左右，通常將行高設(shè)置我字號的150%到180%之間。

典型應(yīng)用：單行文本在容器中垂直居中。實(shí)現(xiàn)辦法：讓容器行高等于容器高度。

7. overflow：設(shè)置對象處理溢出內(nèi)容的控制方式，針對的是容器內(nèi)部的內(nèi)容，不僅僅是單純文本。此屬性適用于塊狀元素。內(nèi)容的溢出可能是橫向或縱向的，因此延展開來，可以細(xì)分為x軸和y軸。

屬性說明

overflow 包括橫向和縱向的內(nèi)容溢出控制

overflow-x 僅處理橫向的內(nèi)容溢出

overflow-y 進(jìn)處理縱向的內(nèi)容溢出

常用的值：

值說明

visible 內(nèi)容可見，溢出到容器外部。（默認(rèn)值）

hidden 溢出的內(nèi)容被隱藏，無法查看

scroll

無論內(nèi)容是否溢出，容器都被添加滾動條。（溢出才激活）

auto 當(dāng)內(nèi)容溢出時(shí)，容器邊緣（縱向）出現(xiàn)滾動條。

8. letter-spacing：設(shè)置單個(gè)字符之間的間距。指定的間距將被添加到字符之后，通常以字號為參考，使用相對單位來控制間距?？梢允褂秘?fù)值。

9. word-spacing：設(shè)置單個(gè)詞語之間的間距。判斷單詞或詞語的依據(jù)是文本間的“空格”，指定的間距將被添加到單詞或詞語之后，但最后一個(gè)詞除外。通常以字號為參考，使用相對單位來控制間距?？梢允褂秘?fù)值。

10. word-break：設(shè)定容器中文本字內(nèi)換行的行為。主要針對數(shù)字或英文的排版，防止出現(xiàn)連續(xù)無意義的長字符打破布局。常用布局：word-break:break-all;

值說明

break-all 允許文本在到達(dá)容器邊緣時(shí)，可以任意位置斷開，不受詞語的限制

keep-all 不允許詞語斷開，智能在出現(xiàn)詞語分割的空格或連字符時(shí)才能換行

web圖片的格式

1. JPG格式

后綴名為.jpg或者.jpeg。色彩豐富，過渡平滑，適用于照片類型。有壓縮比，壓縮比越高，圖片質(zhì)量越低，但文件越??；無法保存透明度，不能呈現(xiàn)動畫效果。

2. PNG圖片

后綴名為.png，有8位、24位、32位三種形式。兼具JPG和GIF的色彩模式，壓縮比高，生成文件體積小。png-8位可以實(shí)現(xiàn)全透明/不透明的效果。png-24（32）位可以實(shí)現(xiàn)半透明的效果。不能實(shí)現(xiàn)動畫。

3. GIF圖片

后綴名為.gif，只包含256種色彩，適用于簡單和單純的圖像?？梢詫?shí)現(xiàn)全透明/不透明的效果，可以包含多幀畫面，實(shí)現(xiàn)小動畫。

實(shí)際應(yīng)用：

1. 照片或色彩豐富的圖片：jpg

2. 透明效果：png

3. 色彩單純的小圖：png

4. 小動畫：gif

web圖片的應(yīng)用

1. 內(nèi)容圖片（作為網(wǎng)頁的內(nèi)容數(shù)據(jù)，HTML進(jìn)行結(jié)構(gòu)化）。寫在HTML網(wǎng)頁結(jié)構(gòu)中，以<img>標(biāo)簽的形式關(guān)聯(lián)圖片文件。

2. 背景圖片（作為網(wǎng)頁的修飾效果，CSS進(jìn)行表現(xiàn)）。寫在css樣式表中，如使用background屬性來定義背景圖。

區(qū)別：

1. 內(nèi)容圖片是網(wǎng)頁內(nèi)容數(shù)據(jù)的一部分，在頁面中有占位。如果加在出現(xiàn)問題或失敗，則會出現(xiàn)占位標(biāo)記，影響頁面的排版或布局。

2. 背景圖片進(jìn)用來修飾和沒畫網(wǎng)頁，在頁面中沒有占位，如果加在失敗，對頁面的排版沒有影響。

判斷使用內(nèi)容圖or背景圖：

1. 內(nèi)容圖片一般具有內(nèi)容意義，屬于文檔內(nèi)容，應(yīng)該使用HTML<img>元素。

2. 背景圖片不具備內(nèi)容涵義，作為修飾html元素的存在，即便不可用也不會影響網(wǎng)頁的可用性。

HTML：內(nèi)容圖片（img圖片）

Dreamweaver 插入圖片快捷鍵（ctrl+alt+I）

圖像標(biāo)簽<img>：單標(biāo)簽；行間元素，單默認(rèn)表現(xiàn)inline-block效果，可以直接使用盒模型屬性；<img>標(biāo)簽不是直接在網(wǎng)頁中插入圖像，而是指定一個(gè)連接圖像文件的地址。因此，<img>標(biāo)簽創(chuàng)建的是被引用圖像的占位空間。

<img>的屬性：

alt屬性和title屬性的區(qū)別：alt屬性是必須的，即使alt=""。title屬性則可以根據(jù)需要來設(shè)置。

width和height屬性的應(yīng)用：

1. widht和height的值不需要帶有單位（默認(rèn)單位都是px）

2. 如果圖像指定了width和height（通常都是圖片本身的尺寸），頁面加載時(shí)會保留指定的尺寸

CSS：背景圖片（background）

background基本屬性：

1. background-color：設(shè)定html元素的背景色彩，只能定義為純色。大多數(shù)html元素默認(rèn)的背景色是透明的：{background-color:transparent;}。同時(shí)設(shè)定背景色和背景圖時(shí)，背景圖會呈現(xiàn)在背景色之上。

2. background-image：通過圖片URL路徑，為元素添加背景圖片。圖片的表現(xiàn)行為（重復(fù)渲染、定位、大小等）由其他背景屬性定義，background-image只能用來定義使用哪張圖片。默認(rèn)情況下，背景圖像從html元素左上角開始顯示毛病在水平和垂直方向上重復(fù)排列。

3.?background-repeat：設(shè)置是否重復(fù)背景圖像及如何重復(fù)背景圖像。

4. background-attachment：設(shè)置背景圖像的固定方式（針對不同的參照物）。這個(gè)屬性與background-position容易沖突，因此在實(shí)際應(yīng)用中并不多見。

5.?background-position：設(shè)置背景圖像的起始（原點(diǎn)）位置，默認(rèn)是html元素的左上角。其值應(yīng)該有2個(gè)，一次為：1.橫向坐標(biāo)值 2.縱向坐標(biāo)值。如果只指定了一個(gè)值，那么該值為橫向坐標(biāo)值，第二個(gè)縱向坐標(biāo)值默認(rèn)為50%（center）。值的寫法可以用3種形式：像素值px或百分比%或范圍值。允許負(fù)值的存在。

如果background-attachment為fixed，那么background-position會無法正常工作。

6.?background復(fù)合屬性：一個(gè)生命中設(shè)置所有北京屬性。值的聲明順序?yàn)椋篵ackground-color?background-image?background-repeat?background-attachment?background-position。以上屬性無需全部使用。建議使用復(fù)合屬性進(jìn)行背景定義，不僅代碼高效，針對老版本瀏覽器兼容性更好。

HTML超級鏈接（hyperlinks）

超級鏈接是HTML的最基本元素，web的設(shè)計(jì)初衷就是想把一組文檔彼此練級起來構(gòu)成信息分享網(wǎng)絡(luò)。超級鏈接是網(wǎng)頁的主要交互方式：通過點(diǎn)擊鏈接，可以在文檔之間來回瀏覽。超鏈接可以是一個(gè)字、詞，也可以是一幅圖像或者其他的HTML元素。

標(biāo)簽<a>：雙標(biāo)簽，行間元素。

href屬性: 是其最重要的屬性，用來定義鏈接的目標(biāo)地址，實(shí)現(xiàn)超級鏈接的功能。如果沒有href屬性，<a>標(biāo)簽僅僅是超鏈接的一個(gè)占位符。

<a href="url">鏈接文本或元素</a>

鏈接的常見形式：

1.錨點(diǎn)（anchor），用來跳轉(zhuǎn)到頁面中的特定位置。

通過設(shè)置href屬性的值為#+id名，就可以定位到具有特定id屬性的HTML元素所在位置。

<a href="#title" />可以鏈接到當(dāng)前頁面中的<div id="title"></div>元素。??

2.相對路徑（Relative Path）URL，用來在網(wǎng)站內(nèi)部跳轉(zhuǎn)。

相對路徑主要用于同一個(gè)站點(diǎn)內(nèi)的不同頁面或文件跳轉(zhuǎn)，相對指的是相對于當(dāng)前頁面本身。相對URL的概念基于網(wǎng)站服務(wù)器上的文件目錄結(jié)構(gòu)，每個(gè)網(wǎng)站都有一個(gè)文檔根目錄，相對URL就是基于這個(gè)根目錄的HTML文件路徑。相對路徑中的斜杠/代表文件夾的分割，../表示的是上一級的文件夾。

3.絕對路徑（Absolute Path）URL，通常用來在不同網(wǎng)站頁面之間進(jìn)行跳轉(zhuǎn)。

絕對URL主要用來在不同網(wǎng)站資源之間進(jìn)行跳轉(zhuǎn)。實(shí)際上就是在上述URL之前添加網(wǎng)站域名（或IP）以及訪問協(xié)議。一個(gè)完整的絕對URL包含3個(gè)部分：協(xié)議http://? 域名domain.com? 文件件路徑/hello.html

<a >百度logo</a>

4.空鏈接。（#）用#號代替未指定的具體URL，通常在頁面制作和調(diào)試的階段用到。

5.郵箱鏈接。當(dāng)用戶點(diǎn)擊郵箱鏈接時(shí)，會啟動電腦上的郵件客戶端程序，向指定的郵箱地址發(fā)送郵件。如果用戶的電腦上未安裝郵件客戶端程序，那么郵箱鏈接將無法工作。

target屬性：規(guī)定在何處打開啊鏈接文檔。

如果需要頁面中所有超級鏈接都在新窗口打開，可以直接在頁面的<head>區(qū)域加上：

CSS偽類

1. 未被點(diǎn)擊的狀態(tài)（默認(rèn)狀態(tài)）:link

2. 已被訪問過的狀態(tài)? :visited

3. 鼠標(biāo)懸停的狀態(tài)（鼠標(biāo)移動到鏈接之上）:hover

4. 激活狀態(tài)（鼠標(biāo)點(diǎn)擊時(shí)）:active

使用CSS的偽類選擇符可以設(shè)定超級鏈接的各種交互狀態(tài)效果。

什么是偽類？一種動態(tài)的類選擇符，不是預(yù)先創(chuàng)建而是動態(tài)形成。當(dāng)html元素具有不同的狀態(tài)或特征時(shí)，偽類可以設(shè)定該元素不同狀態(tài)或特征下的樣式效果。

偽類的寫法：在常用選擇符后面追加一個(gè)冒號“：”，然后加上偽類的名稱。

常用的偽類：

超級鏈接的偽類應(yīng)用：

1. 直接設(shè)定<a>標(biāo)簽，等同于同時(shí)設(shè)定了<a>的4種偽類狀態(tài)。

2. 如果要分開描述<a>的4種狀態(tài)，需按順序來編寫，否則容易失效。:link>:visited>:hover>:active。

3. 實(shí)際應(yīng)用中，通常都是直接設(shè)定<a>標(biāo)簽對象，再單獨(dú)設(shè)置:hover一種狀態(tài)即可。

列表：html列表結(jié)構(gòu)

什么是列表？列表是一種由具有一定規(guī)律順序，排列而成的數(shù)據(jù)項(xiàng)的集合。

列表常見應(yīng)用：列表呈現(xiàn)的信息蒸汽只管，適用于有規(guī)律可循的區(qū)域或欄目板塊。

列表的結(jié)構(gòu)：外圍的列表區(qū)+內(nèi)部的列表項(xiàng)

列表的類型：1. 無序列表 <ul>+<li>

? ? ? ? ? ? ? ? ? ? ? 2. 有序列表 <ol>+<li>

? ? ? ? ? ? ? ? ? ? ? 3. 定義列表 <dl>+<dt>+<dd>

列表標(biāo)簽：

有序列表<ol>的特殊屬性：因?yàn)橛行蛄斜硎菐в许樞虻呐帕?，有設(shè)定排列順序和起始序號的需求。

列表的特點(diǎn)：

1. 列表是具有固定嵌套關(guān)系的標(biāo)簽組合，如<ul>+<li>

2. 有序和無序列表的區(qū)別在于“語義”不同，項(xiàng)目符號的呈現(xiàn)方式也不同

3. 有序和無序列表都只有一種列表項(xiàng)，定義列表有兩種

4. 所有的列表標(biāo)簽都是雙標(biāo)簽，塊狀元素，是裝載內(nèi)容元素的“盒子”

5. 列表可以多重嵌套，通過多重嵌套可以實(shí)現(xiàn)復(fù)雜的欄目排版

CSS列表樣式

列表專有屬性：list-style（是針對列表的項(xiàng)目符號進(jìn)行樣式設(shè)置的專有屬性）

1. list-style-type

設(shè)定列表的項(xiàng)目符號類型。常見的值：disc：實(shí)心小圓點(diǎn)（無序列表的默認(rèn)值）；decimal：數(shù)字（有序列表的默認(rèn)值）；none：無（去除默認(rèn)存在的項(xiàng)目符號）。

2. list-style-image

設(shè)定列表的項(xiàng)目符號的自定義圖像。作用：當(dāng)項(xiàng)目符號類型不能滿足設(shè)計(jì)需要時(shí)，可通過該屬性自定義引入圖片作為項(xiàng)目符號表現(xiàn)。值：url（圖片路徑）。弊端：無法精確定位圖片的位置。

3. list-style-position

設(shè)定列表的項(xiàng)目符號的位置。項(xiàng)目符號隸屬于每一個(gè)列表項(xiàng)，所以list-style-position只能定義項(xiàng)目符號的位置是放置于列表項(xiàng)里面還是外面，無法精確控制定位距離。

4. list-style

復(fù)合屬性，通過一個(gè)聲明來設(shè)置所有的列表專有屬性。值的聲明順序：類型>定位>圖像。list-style-type>list-style-position>list-style-image。聲明的時(shí)候可以忽略其中某個(gè)值的設(shè)定。如果同時(shí)定義了類型和圖像，則圖像優(yōu)先。

實(shí)際應(yīng)用原則：

1. 使用盒子模型屬性來精確控制列表

2. 使用列表項(xiàng)的背景屬性來模擬項(xiàng)目符號.由于list-style主要設(shè)置項(xiàng)目符號且無法精確控制，所以實(shí)際應(yīng)用中并不建議使用list-style去實(shí)現(xiàn)樣式效果。

實(shí)際應(yīng)用技巧：

step1：消除默認(rèn)的列表區(qū)域中的邊距。? <ul>和<ol>默認(rèn)存在padding，<dd>默認(rèn)存在margin。

step2：消除默認(rèn)的列表項(xiàng)目符號。? ? 項(xiàng)目符號設(shè)置基于列表區(qū)域和列表項(xiàng)，<ul>和<ol>默認(rèn)存在項(xiàng)目符號，<dl>沒有。

step3：使用背景屬性模擬項(xiàng)目符號效果。? ? 項(xiàng)目符號隸屬于列表項(xiàng)，而背景屬性需要附加給<li>、<dt>、<dd>。

關(guān)于web的一些相關(guān)知識點(diǎn)擊下方鏈接，了解更多+QQ群1075083208

http://www.makeru.com.cn/live/1396_838.html?s=165154

如何成為為Web全棧工程師? ? ??

http://www.makeru.com.cn/live/1396_634.html?s=165154

html5、CSS3動畫效果