1；塊級(jí)元素

常用的塊級(jí)元素：

div?--?無(wú)意義?用在大布局上

ol? --?有序列表

ul? --?無(wú)序列表

li? --?列表項(xiàng)

ol和ul下面的第一層級(jí)的標(biāo)簽只能是li

dl? --?定義列表

dt? --?定義術(shù)語(yǔ)

dd? --?定義描述

hx（1-6）--?標(biāo)題?意義?瀏覽器會(huì)優(yōu)先抓取h標(biāo)題中的內(nèi)容

p? ?--?段落標(biāo)簽

table?--?表格

from?--?表單

2)行內(nèi)元素

常用的內(nèi)聯(lián)元素：

span?--?無(wú)意義?用在小結(jié)構(gòu)的區(qū)分

b?--?加粗

strong?--?加粗?帶有強(qiáng)調(diào)的意義

i?--?斜體

em?--?斜體? 帶有強(qiáng)調(diào)的意義

sub?--?下標(biāo)

sup?--?上標(biāo)

s? --?中劃線

del?--?刪除線

small?--?文字變小

big?--?文字變大

1）塊級(jí)元素的內(nèi)容；

變成塊級(jí)元素就將值設(shè)置為display：block

特點(diǎn)：

1、獨(dú)占一行

2、在不設(shè)置寬高的情況下，寬度是父級(jí)元素內(nèi)容的寬度，高度是本身內(nèi)容的高度

3、可以設(shè)置寬高

4、可以設(shè)置內(nèi)外邊距

5、塊級(jí)元素可以進(jìn)行任何元素的嵌套

2）內(nèi)聯(lián)元素的內(nèi)容

變成內(nèi)聯(lián)元素就將值設(shè)置為display：inline

特點(diǎn)：

1、和其他的文字或者內(nèi)聯(lián)元素在一行顯示

2、默認(rèn)寬高就是內(nèi)容的寬高

3、不能設(shè)置寬高

4、設(shè)置內(nèi)外邊距的時(shí)候，只有左右起作用

5、內(nèi)聯(lián)元素不能嵌套塊級(jí)元素（規(guī)范）

3）行內(nèi)塊級(jí)元素的特點(diǎn)：display：inline-block

1、可以設(shè)置寬度和高度，margin和padding

2、在一行顯示，從左到右（html的書(shū)寫(xiě)順序）

3、也會(huì)受到空格的影響，導(dǎo)致元素之間有間距

4、也會(huì)受到垂直對(duì)齊方式的影響（內(nèi)容的高度不同），如果出現(xiàn)這中情況，我們需要將所有的元素對(duì)齊方式修改一致

頁(yè)面是由一個(gè)個(gè)盒子組成，如果是平級(jí)盒子默認(rèn)排布：

1、塊級(jí)元素：從瀏覽器的左上角開(kāi)始進(jìn)行排布，并且是上下排布

2、內(nèi)聯(lián)元素：從瀏覽器的左上角開(kāi)始排布，他們會(huì)在一行從左到右進(jìn)行排布

如果是嵌套盒子默認(rèn)排布：

1、塊級(jí)元素：子級(jí)盒子會(huì)在父級(jí)盒子的左上角開(kāi)始排布，所有平級(jí)的子級(jí)元素還是會(huì)默認(rèn)上下排布

2、內(nèi)聯(lián)元素：子級(jí)盒子會(huì)在父級(jí)盒子的左上角開(kāi)始排布，所有平級(jí)的子級(jí)元素還是會(huì)默認(rèn)從左到右排布

2；路徑：

相對(duì)路徑：從文件出發(fā)，通過(guò)參照物找到我們要找的文件

../表示上一級(jí)?--?指的是要引入文件的上一級(jí)，而不是被引入文件的上一級(jí)

如果是同級(jí)文件，我們只需要寫(xiě)文件夾名稱或者文件名稱

每一層級(jí)之間用/隔開(kāi)?-->?父級(jí)/子級(jí)

絕對(duì)路徑：通過(guò)一個(gè)地址直接能找到我們要找到的文件

D:\2016教學(xué)\html和css\13、第十三期\2、第二天\修改\20161011\備份\anna1.jpg

文件夾沒(méi)有后綴

文件才有后綴

3；選擇器的分類：

選擇器的名稱? ?選擇器的格式? ?選擇器的權(quán)重? ?作用

1）、標(biāo)簽選擇器? ?標(biāo)簽名{css}? ? ? ?1? ? ? ? 批量選擇相同標(biāo)簽名的元素

p{color:red;}? ? ? ? ? ? ?給這些元素添加同一的css樣式

2）、類選擇器? ? ?.類名{css}? ? ? ?10? ? ? ?區(qū)分相同的標(biāo)簽名，單獨(dú)選擇其中一個(gè)

.className{}? ? ? ? ? ? ? 兩個(gè)p標(biāo)簽，通過(guò)不同的類名區(qū)分

3）、id選擇器? ? #id名{}? ? ? ? ? 100? ? ? ?準(zhǔn)確找到唯一的一個(gè)元素

選擇器的權(quán)重：

當(dāng)選擇器不同，但是都操作同一個(gè)元素的相同css屬性的時(shí)候，誰(shuí)的權(quán)重器權(quán)重大，誰(shuí)的css屬性值生效

特殊選擇器（組合選擇器）

4；

選擇器的名稱? ?選擇器的格式? ? ? ? ? 選擇器的權(quán)重? ? ? ? 作用

1）、后代選擇器? 選擇器1?選擇器2{}? ? ?所有選擇器的權(quán)重之和? 操作一定范圍內(nèi)的指定? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 元素

父級(jí)選擇器?子級(jí)選擇器{}?子孫后代全部選擇上了

2）、子級(jí)選擇器? 選擇器1>選擇器2>...{}?所有選擇器的權(quán)重之和? 操作一定范圍(更加具體? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?)內(nèi)的指定元素

第一層級(jí)的父級(jí)>第一層級(jí)的子級(jí){}

5；選擇器的名稱? ?選擇器的格式? ? ? ? ?選擇器的權(quán)重? ? ? ? ? ? ?作用

1）并集選擇器? 選擇器1,選擇器2...? ?每一個(gè)選擇器都是獨(dú)立的權(quán)重? 給不同的元素添加

p,.box1,a{}相同的樣式

2）交集選擇器? 選擇器1選擇器2? ? ? ?所有選擇器權(quán)重之和? ? ? ? ?增加權(quán)重

標(biāo)簽.類名/標(biāo)簽#id名

p.box1{}

p#box{}

.box1.box2{}?p.s：ie6版本瀏覽器不支持

組成交集選擇器的所有選擇器都必須作用于同一元素

6；選擇器的名稱? ?選擇器的格式? ? ? ? ? ? ? 選擇器的權(quán)重? ? ? ? 作用

1）、類型選擇器? 選擇器[type=value]{}? ? ?10-11之間? ? ? ? ? 通過(guò)標(biāo)簽的type屬? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 性值區(qū)分元素

2）、偽類選擇器? 選擇器:偽類{}? ? ? ? ? ? 跟選擇器基本一致? ? ? 可以給元素

添加一種狀態(tài)

text-decorration:none?a標(biāo)簽的下劃線去掉

添加偽元素

偽元素：html中標(biāo)簽就是元素，那么偽元素的意思是通過(guò)css向html中添加一個(gè)原本不存在的元素

偽類一般只兼容到ie8版本以上

偽元素：

選擇器:before：

選擇器:after

before和after都會(huì)在這個(gè)元素內(nèi)，before在所有html內(nèi)容之前，after在所有html內(nèi)容之后

div:after,div:before{}

::before

內(nèi)容

::after

最后一個(gè)選擇器：

通配符選擇器：

格式:? *{}? *全部的意思?從html這個(gè)標(biāo)簽開(kāi)始全部標(biāo)簽都會(huì)被選擇上

權(quán)重小于1? ?這個(gè)選擇器在項(xiàng)目中一般不用，因?yàn)檫@個(gè)選擇器會(huì)過(guò)濾所有的標(biāo)簽

*****組合選擇器的查找方式是從右向左查找，所以緊挨著{}的這個(gè)選擇器盡量是類選擇器

*****組合選擇器一般作用的對(duì)象是緊挨著{}的這個(gè)選擇器

.box1?ul?li{}? li才是最終要操作的元素? .box1?ul?只是用來(lái)劃定范圍

*****id名義上權(quán)重是100?但是其他選擇器的權(quán)重之和大于100?也不能覆蓋掉id內(nèi)的屬性

********選擇器的格式? ?選擇器的權(quán)重怎樣計(jì)算? 選擇器的作用

4；盒子模型；

Box?Formatting?Context

盒子?布局?規(guī)格? ?上下文

盒子模型的組成

盒子與盒子之間的距離叫做外邊距? ? ? ? ? ? ? ? css屬性：margin[外邊距]

盒子周圍的邊框（盒子外邊緣距離盒子內(nèi)邊緣的距離）?css屬性：border[邊框]

盒子內(nèi)容距離邊框內(nèi)邊緣的距離叫做內(nèi)邊距? ? ? ? ?css屬性：padding[內(nèi)邊距]

盒子的內(nèi)容?content? ? ? ? ? ? ? ? ? ? ? ? css屬性：width[寬度]?/?height[高度]

盒子在頁(yè)面上所占的位置大小

x軸=寬度（width）+左右內(nèi)邊距（padding-left+padding-right）+左右邊框（border-left+border-right）

+左右外邊距（margin-left+margi-right）

y軸=寬度（height）+上下內(nèi)邊距（padding-top+padding-bottom）+上下邊框（border-top

+border-bottom）+上下外邊距（margin-top+margi-bottom）

margin

margin-top:10px;

margin-right:10px;

margin-bottom:10px;

margin-left:10px;

margin:10px;-->四個(gè)方向的值相等

margin:10px?20px;-->上下?10px? 左右?20px

margin:10px?15px?20px;-->上?10px?左右?15px?下20px

margin:10px?15px?20px?25px;?上?右?下?左

padding

padding-top:10px;

padding-right:10px;

padding-bottom:10px;

padding-left:10px;

padding:10px;-->四個(gè)方向的值相等

padding:10px?20px;-->上下?10px? 左右?20px

padding:10px?15px?20px;-->上?10px?左右?15px?下20px

padding:10px?15px?20px?25px;?上?右?下?左

5；margin屬性的兼容性問(wèn)題：

1、同級(jí)元素，并且是上下排布，第一個(gè)元素有margin-bottom值，第二個(gè)元素有margin-top值的時(shí)候，

兩個(gè)值取最大值保留，兩個(gè)值相同留一個(gè)

2、父子級(jí)元素，子級(jí)元素有margin-top值，父級(jí)元素不存在padding和border值的時(shí)候，

margin-top值會(huì)發(fā)生傳遞，傳遞給父級(jí)元素

overflow:?hidden;這個(gè)屬性解決這個(gè)問(wèn)題

3、h標(biāo)簽?ul?dl?p等標(biāo)簽都天生自帶margin或者padding值，這些值影響我們的盒子模型計(jì)算，

所以我能要將這些值先進(jìn)行重置

4、浮動(dòng)元素margin值加倍?ie6瀏覽器出現(xiàn)

寫(xiě)一個(gè)hake

div{margin-left:10px;_margin-left:5px;}

ie6瀏覽?20px

_margin-left:5px;?其他瀏覽器取值為10px，ie6取值5

css屬性分為可繼承屬性和不可繼承屬性

可繼承屬性? 和文字相關(guān)的屬性都是可繼承屬性

6；溢出隱藏

overflow:?auto;?自動(dòng)識(shí)別? 縱向滾動(dòng)條

overflow:?scroll?自動(dòng)識(shí)別?橫向滾動(dòng)條

7；邊框

border-width:?10px;--四個(gè)方向的寬度都是10

8；border邊框?qū)懭切?/p>

border-width:?5px;

border-style:solid;

border-color:red?transparent?transparent?transparent?;

width:?0

9；ps的使用

在ps中打開(kāi)一個(gè)文件

【文件】--【打開(kāi)】--【選中文件】--【打開(kāi)】

直接將文件拖拽到ps操作界面，鼠標(biāo)釋放

文件原大小展示

ctrl+1

文件展示的時(shí)候縮小或放大

ctrl+"-"?縮小

ctrl+"+"?放大

局部方法和縮小

點(diǎn)擊Z鍵或者是點(diǎn)擊工具欄中的縮放工具? 用鼠標(biāo)進(jìn)行拖拽

圖層工具欄

【窗口】--【圖層】?f7

移動(dòng)工具?可以移動(dòng)圖層

V

選框工具? 可以用他來(lái)測(cè)量

M

抓手工具? 點(diǎn)擊鼠標(biāo)左鍵?移動(dòng)鼠標(biāo)就可以進(jìn)行文件的移動(dòng)

H? ?按住空格鍵臨時(shí)切換到抓手工具

修改ps中的單位

【編輯】--【首選項(xiàng)】--【單位與標(biāo)尺】--像素/點(diǎn)

查看測(cè)量結(jié)果

【窗口】--【信息】

查看文字信息

1、可以用文字工具“T”選中文字進(jìn)行查看

2、打開(kāi)【窗口】--【字符】，再用移動(dòng)工具點(diǎn)擊這個(gè)文字就可以查看

移動(dòng)工具設(shè)置成自動(dòng)選擇【圖層】

查看顏色

工具欄中有一個(gè)面板是前景色，還有一個(gè)背景色

ps中設(shè)置輔助線

ctrl+R? 顯示標(biāo)尺

點(diǎn)擊標(biāo)尺位置，拖拽后會(huì)出現(xiàn)一條輔助線，到達(dá)指定位置釋放鼠標(biāo)即可

調(diào)整輔助線的位置或者刪除廢棄的輔助線

用移動(dòng)工具

刪除?移動(dòng)工具選中輔助線向窗口外拖拽釋放

隱藏/顯示輔助線?ctrl?+?“;”/ctrl+H

切片工具? 默認(rèn)是裁剪工具?我們需要選擇第三個(gè)

C

鼠標(biāo)從頭開(kāi)始不釋放一直拖拽到指定位置釋放

選中切片?右鍵【編輯切片選項(xiàng)】可以改變切片的大小

移動(dòng)切片?鍵盤(pán)的上下所有鍵?每按一次?移動(dòng)1像素

切片選擇工具，可以直接移動(dòng)切片

切片選擇工具?裁剪工具的第四項(xiàng)

切片的導(dǎo)出：

【文件】--【儲(chǔ)存為web所用格式】

alt+shift+ctrl+S

文件的格式：

jpeg（品質(zhì)在60-100之間）? .jpg/.jpeg

png? png24? 用在背景為透明的圖片上? .png

gif? ? ? ? ?用在背景為透明的圖片上/動(dòng)態(tài)圖

10；img的默認(rèn)屬性

img受到對(duì)齊方式的影響會(huì)有底部空白，我們需要將這個(gè)空白去掉，改變對(duì)齊方式即可

vertical-align:?top/middle/bottom;都可以

11；margin:?0?auto;

可以使有寬度的塊級(jí)盒子，自動(dòng)在其父級(jí)盒子內(nèi)水平居中

必須要設(shè)置寬度才能讓盒子居中

12；

浮動(dòng)元素的特點(diǎn)：

1、按照一定方向，按照html的書(shū)寫(xiě)順序，從這個(gè)方向開(kāi)始依次向另一個(gè)方向排布

2、浮動(dòng)元素，都可以直接設(shè)置盒子模型的屬性

3、浮動(dòng)元素脫離文檔流，文檔流內(nèi)的元素識(shí)別不到浮動(dòng)元素********

4、任何內(nèi)聯(lián)元素和行內(nèi)塊級(jí)元素（html的書(shū)寫(xiě)順序）挨著浮動(dòng)元素的時(shí)候都會(huì)圍繞著浮動(dòng)元素進(jìn)行排布（也就是說(shuō)他們都是平級(jí)的時(shí)候）

5、文字會(huì)圍繞著浮動(dòng)元素進(jìn)行排布

6、浮動(dòng)元素進(jìn)行排布的時(shí)候，他會(huì)優(yōu)先識(shí)別他緊挨著的上一個(gè)元素

float:left;? 左浮動(dòng)

float:inherit;?繼承浮動(dòng)屬性的屬性值

float:right;? 右浮動(dòng)

float:none;去掉浮動(dòng)屬性

clear:both;? 清除掉浮動(dòng)元素對(duì)浮動(dòng)元素“下方”元素的影響

清除浮動(dòng)，不是將元素的浮動(dòng)屬性去掉，而是清除掉浮動(dòng)元素對(duì)其他元素（html順序?qū)懺诟?dòng)元素后面的那些元素）影響，所以我們清除浮動(dòng)的屬性寫(xiě)在**最后一個(gè)浮動(dòng)元素的后面**

清除浮動(dòng)的方式：

1、在最后一個(gè)浮動(dòng)元素的后面用塊級(jí)元素引入clear:both;這個(gè)css屬性****

2、給浮動(dòng)元素的父級(jí)盒子添加高度? ***

3、給浮動(dòng)元素的父級(jí)盒子添加overflow:?hidden;這個(gè)屬性?***

4、給浮動(dòng)盒子的父級(jí)盒子添加float這個(gè)屬性?*

最常用的方式：利用偽類來(lái)進(jìn)行浮動(dòng)的清除

格式

.clear{zoom:1;}

.clear:after{

display:block;

content:"";

clear:both;

}

13；十六進(jìn)制

色值：顏色

十六進(jìn)制色值--所有瀏覽器都支持

介于0-f（黑-白）之間

格式:?#XXXXXX

#ff0000--#f00--red

#fff000--#fff000

#000000--黑色

#ffffff--白色

RGB--紅綠藍(lán)

0-255之間

還支持百分?jǐn)?shù)?0%-100%之間

rgb(207,70,70)

RGBA--紅綠藍(lán)透明度? 支持ie8以上瀏覽器

0-255之間

還支持百分?jǐn)?shù)?0%-100%之間

Alpha支持的數(shù)值?0-1?0是完全透明?1是完全不透明

單位：

絕對(duì)單位

px? 像素

cm? 厘米

m? ?米

km? 千米

s? ? 秒

ms? ?毫秒

14；

定位：是在基本文檔流之上的，也是脫離文檔流，我們要的效果就是壓在其他元素上

定位的元素要在其他元素之上，這里的其他元素指的是任何元素（包括文檔流內(nèi)元素，浮動(dòng)元素，定位元素）

通過(guò)上?下?左?右四個(gè)方向來(lái)進(jìn)行位置的定義

top?bottom?left?right?前提是這個(gè)元素是定位元素

1、相對(duì)定位：? ? ? ? ? ? position:?relative;

特點(diǎn)：

a、參照物是本身

b、沒(méi)有脫離文檔流，所以其他元素還可以識(shí)別相對(duì)定位的元素，其他元素識(shí)別的是相對(duì)元素原來(lái)的位置而不是改變的位置

c、相對(duì)定位的元素，還是在文檔流內(nèi)元素的上方

d、相對(duì)定位的元素可以通過(guò)z-index屬性改變他們的層級(jí)關(guān)系

e、相對(duì)定位的元素，原display屬性不發(fā)生改變

2、絕對(duì)定位? ? ? ? ? ? position:?absolute;

特點(diǎn):

a、脫離文檔流

b、絕對(duì)定位元素默認(rèn)參照物是第一次識(shí)別的body的位置

c、只要具有定位屬性的元素（上級(jí)元素）都是絕對(duì)定位元素的參照物

（一般設(shè)置參照物的時(shí)候，我們給參照物相對(duì)定位這個(gè)屬性）

d、絕對(duì)定位的元素，display屬性改變

e、絕對(duì)定位的元素可以通過(guò)z-index屬性改變層級(jí)關(guān)系

f、當(dāng)絕對(duì)定位元素的上級(jí)元素都有定位屬性的時(shí)候，它的參照物最近的父級(jí)元素

以誰(shuí)作為參照物，就給他設(shè)置一個(gè)?position:?relative;

3、固定定位? ie6不兼容? ? ? ? ? ? position:?fixed;

a、脫離文檔流

b、參照物永遠(yuǎn)是瀏覽器的可視窗口

c、固定定位的元素，display屬性改變

d、固定定位的元素可以通過(guò)z-index屬性改變層級(jí)關(guān)系

15；background的屬性

1）?background-color:?red;背景顏色?鋪滿整個(gè)盒子

2）?background-image:?url("圖片路徑");?背景圖片?默認(rèn)鋪滿整個(gè)盒子

3）?background-repeat:?no-repeat;?背景平鋪

no-repeat?不平鋪?repeat-x?x軸平鋪?repeat-y?y軸平鋪

4）background-size:?控制背景圖片的寬高? 第一個(gè)值是寬度?第二個(gè)值是高度

ize中如果是百分?jǐn)?shù)?它指的是盒子的寬高的百分之多少

如果是絕對(duì)單位，例如px?給多少值?背景圖片就是多大

16；?表單元素的標(biāo)題【表單元素的描述】

用戶名

當(dāng)label標(biāo)簽中for的值和表單元素中id的值相同的時(shí)候，點(diǎn)擊label中的文字，自動(dòng)跳轉(zhuǎn)到相關(guān)的表單元素

input?標(biāo)簽

type? 類型

placeholder?提示信息?【h5的新增屬性】{瀏覽器兼容?html文件的文檔聲明需要是h5的聲明}

value?值

id? ?id

name?名稱

文本框text：文本框

密碼框?password：密碼框

郵箱? ? email：郵箱

單選框radio：?jiǎn)芜x框

多選框checkbox：多選框

單選框和多選框?有默認(rèn)選中狀態(tài)?checked="checked"/【checked】

單選的時(shí)候我們只需要一個(gè)選項(xiàng)?那么我們可以通過(guò)name值一致的這種做法?達(dá)到這個(gè)目的

?file：上傳文件

image：圖片

reset：重置按鈕

submit：提交按鈕

button：普通按鈕

-webkit-user-select:?none;?把鼠標(biāo)點(diǎn)擊的陰影取消