表單:

input中的屬性:

placeholder:提示用戶輸入信息

value:輸入框數(shù)據(jù)值

maxlength:輸入數(shù)據(jù)最大長度

readonly:只讀

disabled:禁用

type:

+ text(文本)

+ submit(提交)

+ button(按鈕)

+ password(密碼)

+ radio(單選)

+ checkbox(復(fù)選)

+ file(文件)

+ reset(清空)

下拉列表:

北京

上海

廣州

深圳

label綁定:

女

css引入方式:

選擇器{樣式}

引入外部css文件:

瀏覽器標(biāo)題小圖片:

id和class常見命名方式:

+ 駝峰命名法,eg: topMain;

+ 中劃線命名法,eg: top-main;

+ 下劃線命名法,eg: top_main;

注:為了避免class命名的重復(fù)性,命名時一般去父元素class為前綴

網(wǎng)頁中常見命名:

wrapper(一般用于包裹整個頁面)? 最外層

header? ? ? ? ? ? ? ? ? ? ? ? 頭部

content? ? ? ? ? ? ? ? ? ? ? ? 內(nèi)容

sidebar? ? ? ? ? ? ? ? ? ? ? ? 側(cè)欄

column? ? ? ? ? ? ? ? ? ? ? ? 欄目

hot? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 熱點

news? ? ? ? ? ? ? ? ? ? ? ? ? 新聞

download? ? ? ? ? ? ? ? ? ? 下載

logo? ? ? ? ? ? ? ? ? ? ? ? ? ? 標(biāo)志

nav? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 導(dǎo)航條

main? ? ? ? ? ? ? ? ? ? ? ? ? ? 主體

footer? ? ? ? ? ? ? ? ? ? ? ? ? 底部

login? ? ? ? ? ? ? ? ? ? ? ? ? ? 登錄

register? ? ? ? ? ? ? ? ? ? ? ? 注冊

menu? ? ? ? ? ? ? ? ? ? ? ? ? 菜單

css的相關(guān)單位:

1.數(shù)字值

* 相對值

+ em

+ 百分比

* 絕對值

+ in(英寸),cm(厘米),mm(毫米),pt(點),pc(皮卡),px(像素)

2.顏色值

* 顏色名 (eg: red,green,lime)

* 十六進制顏色(#RRGGBB或#RGB)

+ #000000 #ff0000 #00ff00 #0000ff

* rgb()顏色值

+ rgb(r,g,b) 每種顏色的顏色值 0~255

rgb(0,0,0)

+ rgb(%,%,%) 每種顏色的顏色值 0~100%

rgb(10%,10%,10%)

* HSL(色相,飽和度%,亮度%)

3.Alpha 通道 (0~1)

RGB和HSL都支持 Alpha 通道

字體設(shè)置:

font-size: 20px;(字體大小)

font-family: Arial,Verdana,Sans-serif;(文本字體)

font-weight: 500;(設(shè)置文本粗細)

font-variant: small-caps;(小型大寫字母 小寫字母的尺寸顯示大寫字母樣式: normal,small-caps)

文本設(shè)置:

text-align:(文本對齊方式 默認(rèn)居左? 還有設(shè)置居右? 居中 justify兩端對齊 不常用)

text-indent: 2em;(設(shè)置文本首行縮進)

text-transform: capitalize;(文本轉(zhuǎn)化:normal 默認(rèn) 按原樣顯示,capitalize 首字母大寫,uppercase 字母全部大寫,lowercase 字母全部小寫)

line-height: 50px;(設(shè)置行高 行高 = 字體高度 + 行距 調(diào)整字體垂直居中顯示)

direction: rtl;(文字書寫方向 從左到右 ltr? rtl (不常用))

letter-spacing: 2em;(正值時增加字符間距,負值時縮小間距,無論字體大小使用的是什么單位,設(shè)定字符間距一定使用相對單位)

word-spacing: 2em;(單詞間距)

text-decoration: underline,overline,line-through,none;(文本描述)

vertical-align: baseline,sub,super,top,text-top,middle,bottom,text-bottom(以基線為參考標(biāo)準(zhǔn)上下移動文本,但是這個屬性只影響行內(nèi)元素)

background設(shè)置:

background-color: 背景顏色;

background-image: url('背景圖片');

background-repeat: no-repeat;(repeat 默認(rèn) 橫向和縱向平鋪,repeat-x? 只沿x軸方向橫向平鋪,repeat-y? 只沿y軸方向縱向平鋪,no-repeat? 背景圖片不進行平鋪)

background-attachment: scroll;(圖片隨頁面滾動)

background-attachment: fixed;

list設(shè)置:

設(shè)置列表標(biāo)志項類型? 可以設(shè)置circle square decimal(表示數(shù)字類型 只在CSS 里面起作用)(list-style-type: decimal;list-style-type: none;)

設(shè)置列表項標(biāo)志位置 outside inside 表示標(biāo)志項在內(nèi)容內(nèi)部還是外部 默認(rèn)是外部(list-style-position: outside;)

自定義列表項標(biāo)志? 圖片(list-style-image: url('images/up.jpg');)

屬性連寫 decimal和url二選其一(list-style:decimal inside url(image/up.jpg);)

輪廓與邊框:

設(shè)置輪廓寬度(outline-width: 2px;)

設(shè)置輪廓顏色(outline-color: red;)

設(shè)置輪廓線樣式 solid實線 double雙線 dashed虛線 dotted點狀線(outline: 10px solid red;)

根據(jù)方向設(shè)置不同邊框 上 右 下 左 在屬性缺失的情況下（1，3） （2，4）{border-style: solid double dashed;}

屬性連寫(border: 1px solid red;)

css特性:

繼承性:

(1) 文本相關(guān)屬性: font-family , font-size , font-style , font-weight , font , line-height , text-align , text-indent , word-spacing;

(2)列表相關(guān)屬性: list-style-image , list-style-position , list-style-type , list-style;

(3)顏色相關(guān)屬性: color;

注意點:并不是所有的屬性都有繼承性;

層疊性:

指的是樣式的覆蓋

css盒子模型:

所有的元素都可以看成 盒子模型

2.盒子模型可以從兩個方面理解:

一是理解單獨盒子的內(nèi)部結(jié)構(gòu)( 內(nèi)容區(qū)(content),內(nèi)邊距(padding),邊框(border),外邊距(margin))

二是理解多個盒子之間的相互關(guān)系(W3C標(biāo)準(zhǔn)盒子 width = content;IE盒子 width = border+padding+content)

外邊距合并:

當(dāng)一個元素包含在另一個元素中時（假設(shè)沒有內(nèi)邊距或邊框把外邊距分隔開），它們的上下外邊距也會發(fā)生合并;

解決方法:

1、給父元素加邊框:border: 1px solid red;

2、給父元素設(shè)置overflow:hidden 溢出部分裁剪

外邊距疊加的三種情況:

1.同級元素

當(dāng)兩個垂直方向的元素外邊距相遇時

會發(fā)生合并合并之后的外邊距高度取較大者

2.父子元素

當(dāng)一個元素包含在另一個元素中時（假設(shè)沒有內(nèi)邊距或邊框把外邊距分隔開），它們的上下外邊距也會發(fā)生合并

3.空元素,指是沒有子元素或者沒有文字內(nèi)容的元素,例如
,

等,在一個空元素有上下邊距時,如果沒有border或者padding,則元素上下邊距也會發(fā)生合并

注意點:

1>.水平外邊距不會發(fā)生疊加

2>.外邊距疊加只針對block以及inline-塊元素,不包含inline元素.因為inline元素的margin-top和margin-bottom設(shè)置無效

塊級元素:

常見塊級元素:div,h1^h6,p,,hr,ol,ul

塊級元素特點:

1>.獨占一行

2>.可以包含其他塊級/行內(nèi)元素

3>.可以定義寬高

4>.可以定義四個方向的margin屬性

行內(nèi)元素:

常見行內(nèi)元素:strong,span,em,u,a

行內(nèi)元素特點:

1>.與其他行內(nèi)元素同行顯示

2>.行內(nèi)元素可以包含其他行內(nèi)元素,但是不能包行塊級元素

3>.不能改變寬高

4>.可以定義margin-left和margin-right,但是不能定義margin-top,margin-bottom

display屬性:

1.元素之間類型的轉(zhuǎn)換使用display屬性

display常見屬性: inline/block/inline-block/table/table-cell(以表格單元格形式顯示,類似于td)/none(隱藏元素)

2.inline-block: 行內(nèi)塊級元素

+ 特點: 同行 ; 能夠定義寬高 ; 能定義四個方向的margin

+ 常見的標(biāo)簽: img , input

+ 去除行內(nèi)塊級元素默認(rèn)的間隙:父元素設(shè)置font-size:0

3.table-cell

圖片垂直居中元素

4.none

+隱藏元素對比 v i s i d i l i t y 屬性

居中:

1:'text-align:center'實現(xiàn)的是文字,inline元素和inline-block元素的居中

2:'margin:0 auto'實現(xiàn)是塊級的居中

3:'text-align:center'定義在父類元素,'margin:0 auto'定義在自身元素

浮動布局:

float: left/right/none;(當(dāng)一個一個元素設(shè)置浮動之后,不管這個元素之前是inline,inline-block或者其他類型,都會變成block;設(shè)置浮動之后,會脫離文檔流)

清除浮動:

方式一:額外標(biāo)簽法(clear: left/right/both;)

方式二:它在div內(nèi)容的后面插入內(nèi)容.

clearfix:after {

content: '';

display: block;

height: 0;

clear: both;

}

方式三:table表格樣式,顯示在一行

.clearfix:before,.clearfix:after {

content: '';

display: table;

}

.clearfix:after {

clear: both;

}

.clearfix {

zoom: 1;

}

方式四:在父元素中添加overflow: hidden

元素溢出處理:

overflow: visible 默認(rèn)值,溢出內(nèi)容可見

hidden? 溢出內(nèi)容隱藏

scroll? 溢出滾動條顯示

auto? ? 自動,需要的時候自動添加滾動條