CSS是Cascading Style Sheets的簡(jiǎn)稱，中文稱為層疊樣式表，用來控制網(wǎng)頁數(shù)據(jù)的表現(xiàn)，可以使網(wǎng)頁的表現(xiàn)與數(shù)據(jù)內(nèi)容分離。
一.css的四種引入方式
1.行內(nèi)式
行內(nèi)式是在標(biāo)記的style屬性中設(shè)定CSS樣式。這種方式?jīng)]有體現(xiàn)出CSS的優(yōu)勢(shì)，不推薦使用。
1 | <div style='font-size:20px;'> Hello </div> |
2.嵌入式
嵌入式是將CSS樣式集中寫在網(wǎng)頁的<head></head>標(biāo)簽對(duì)的<style></style>標(biāo)簽對(duì)中。格式如下：
1 2 3 4 5 6 7 8 9 | <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div{ font-size: 20px; } </style></head> |
3.導(dǎo)入式
將一個(gè)獨(dú)立的.css文件引入HTML文件中，導(dǎo)入式使用CSS規(guī)則引入外部CSS文件，<style>標(biāo)記也是寫在<head>標(biāo)記中，使用的語法如下：
1 2 3 4 5 | <head><style type="text/css"> @import"mystyle.css"; 此處要注意.css文件的路徑</style></head> |
4.鏈接式
也是將一個(gè).css文件引入到HTML文件中
1 2 3 | <head> <link href="mystyle.css" rel="stylesheet" type="text/css"/></head> |
注意：
導(dǎo)入式 會(huì)在整個(gè)網(wǎng)頁裝載完后再裝載CSS文件，因此這就導(dǎo)致了一個(gè)問題，如果網(wǎng)頁比較大，則會(huì)先顯示無樣式的頁面，閃爍一下之后，再出現(xiàn)網(wǎng)頁的樣式。這是導(dǎo)入式固有的一個(gè)缺陷。
使用 鏈接式 時(shí)與導(dǎo)入式不同的是它會(huì)以網(wǎng)頁文件主體裝載前裝載CSS文件，因此顯示出來的網(wǎng)頁從一開始就是帶樣式的效果的，它不會(huì)象導(dǎo)入式那樣先顯示無樣式的網(wǎng)頁，然后再顯示有樣式的網(wǎng)頁，這是鏈接式的優(yōu)點(diǎn)。
樣式應(yīng)用順序：
行內(nèi)樣式優(yōu)先級(jí)最高
針對(duì)相同的樣式屬性，不同的樣式屬性將以合并的方式呈現(xiàn)
相同樣式并且相同屬性，呈現(xiàn)方式在<head>中的順序決定，后面會(huì)覆蓋前面屬性
!important 指定樣式規(guī)則應(yīng)用最優(yōu)先
1 2 3 | .div { color: red !important;} |
CSS優(yōu)先級(jí):
所謂CSS優(yōu)先級(jí)，即是指CSS樣式在瀏覽器中被解析的先后順序。
樣式表中的特殊性描述了不同規(guī)則的相對(duì)權(quán)重，它的基本規(guī)則是： 1 內(nèi)聯(lián)樣式表的權(quán)值最高 style="" ------------------- 1000 2 統(tǒng)計(jì)選擇符中的ID屬性個(gè)數(shù)。 #id －－－－－－－－－－－－－100 3 統(tǒng)計(jì)選擇符中的CLASS屬性個(gè)數(shù)。 .class －－－－－－－－－－－－－ 10 4 統(tǒng)計(jì)選擇符中的HTML標(biāo)簽名個(gè)數(shù)。 p －－－－－－－－－－－－－-1
二 css的選擇器（Selector）
“選擇器”指明了{(lán) } 中的“樣式”的作用對(duì)象，也就是“樣式”作用于網(wǎng)頁中的哪些元素
1 基礎(chǔ)選擇器：
*：通用元素選擇器，匹配任何元素
1 2 3 4 | *{ #通配符 margin:0; padding:0;} |
E：標(biāo)簽選擇器，匹配所有使用E標(biāo)簽的元素p
1 2 3 | div{ color:green;} |
.info和E.info: class選擇器，匹配所有class屬性中包含info的元素
1 2 3 4 5 6 7 8 9 | .info{ font-size:20px;}p.info{ background:blue; }<div class='info'> Hello </div><p class='info'> World! </div> |
#info和E#info id選擇器，匹配所有id屬性等于info的元素
1 2 3 4 5 6 7 8 | #info{ font-size:20px;}p#info{ background:blue; }<div id='info'> Hello </div> |
注意：
標(biāo)簽中,id的值是唯一的,而class可重復(fù)!
2 組合選擇器
E,F 多元素選擇器，同時(shí)匹配所有E元素或F元素，E和F之間用逗號(hào)分隔
1 2 3 | div,p{ color:red; } |
E F 后代元素選擇器，匹配所有屬于E元素后代的F元素，E和F之間用空格分隔
1 2 3 4 | div p{ font-size: 20px; color:red;} |
E > F 子元素選擇器，匹配所有E元素的子元素F
1 2 3 | div > strong { color:#f00; } |
E + F 毗鄰元素選擇器，匹配所有緊隨E元素之后的同級(jí)元素F
1 2 3 4 | div+p{ font-size: 20px; color:red;} |
注意嵌套規(guī)則：
塊級(jí)元素可以包含內(nèi)聯(lián)元素或某些塊級(jí)元素，但內(nèi)聯(lián)元素不能包含塊級(jí)元素，它只能包含其它內(nèi)聯(lián)元素。
塊級(jí)元素不能放在<p>里面。
有幾個(gè)特殊的塊級(jí)元素只能包含內(nèi)聯(lián)元素，不能包含塊級(jí)元素。如h1,h2,h3,h4,h5,h6,p,dt
li內(nèi)可以包含div
塊級(jí)元素與塊級(jí)元素并列、內(nèi)聯(lián)元素與內(nèi)聯(lián)元素并列。（錯(cuò)誤的：<div><h2></h2><span></span></div>）
3 屬性選擇器
E[att] 匹配所有具有att屬性的E元素，不考慮它的值。
（注意：E在此處可以省略，比如“[cheacked]”。以下同。）
1 2 3 4 5 6 | div[att]{ font-size: 20px; color: red;}<div att='abc'>Hello</div> |
E[att=val] 匹配所有att屬性等于“val”的E元素
1 2 3 4 5 6 | div[att='abc']{ font-size: 20px; color: red;}<div att='abc'>Hello</div> |
E[att~=val] 匹配所有att屬性具有多個(gè)空格分隔的值、其中一個(gè)值等于“val”的E元素
1 2 3 4 5 6 | div[att~='aaa']{ font-size: 20px; color: red;}<div att='aaa bbb ccc'>Hello</div> |
E[att|=val] 匹配所有att屬性具有多個(gè)連字號(hào)分隔（hyphen-separated）的值、其中一個(gè)值以“val”開頭的E元素。
主要用于lang屬性，如“en”、“en-us”、“en-gb”等等
1 2 3 4 5 6 | div[att|='aaa']{ font-size: 20px; color: red;}<div att='aaa-bbb-ccc'>Hello</div> |
E[attr^=val] 匹配屬性值以指定值開頭的每個(gè)元素
E[attr$=val] 匹配屬性值以指定值結(jié)尾的每個(gè)元素
E[attr*=val] 匹配屬性值中包含指定值的每個(gè)元素
p:before 在每個(gè) <p> 元素的內(nèi)容之前插入內(nèi)容
p:after 在每個(gè) <p> 元素的內(nèi)容之前插入內(nèi)容
1 2 3 4 5 6 7 8 9 10 | p:before{ content: 'Start'; color: red;}p:after{ content: 'Fin'; color: red;}<p >Hello</p> |
4 偽類選擇器： 專用于控制鏈接的顯示效果，visited與active必須寫在最后!！ ：
a:link（沒有接觸過的鏈接）,用于定義了鏈接的常規(guī)狀態(tài)。
a:hover（鼠標(biāo)放在鏈接上的狀態(tài)）,用于產(chǎn)生視覺效果。
a:visited（訪問過的鏈接）,用于閱讀文章，能清楚的判斷已經(jīng)訪問過的鏈接。
a:active（在鏈接上按下鼠標(biāo)時(shí)的狀態(tài)）,用于表現(xiàn)鼠標(biāo)按下時(shí)的鏈接狀態(tài)。
偽類選擇器 : 偽類指的是標(biāo)簽的不同狀態(tài):
a ==> 點(diǎn)過狀態(tài) 沒有點(diǎn)過的狀態(tài) 鼠標(biāo)懸浮狀態(tài) 激活狀態(tài)
1 2 3 4 5 6 7 | a:link {color: #FF0000} /* 未訪問的鏈接 */a:visited {color: #00FF00} /* 已訪問的鏈接 */a:hover {color: #FF00FF} /* 鼠標(biāo)移動(dòng)到鏈接上 */a:active {color: #0000FF} /* 選定的鏈接 */ 格式: 標(biāo)簽:偽類名稱{ css代碼; } |
三 CSS的常用屬性
1 顏色屬性：
color ?? 常用網(wǎng)頁顏色搭配
HEX（十六進(jìn)制色：color: #FFFF00 --> 縮寫：#FF0）
RGB（紅綠藍(lán)，使用方式：color:rgb(255,255,0)或者color:rgb(100%,100%,0%)）
RGBA（紅綠藍(lán)透明度，A是透明度在0~1之間取值。使用方式：color:rgba(255,255,0,0.5)）
HSL（CSS3有效,H表示色調(diào)，S表示飽和度，L表示亮度，使用方式：color:hsl(360,100%,50%)）
HSLA（和HSL相似，A表示Alpha透明度，取值0~1之間。）
transparent
全透明，使用方式：color: transparent;
opacity
元素的透明度，語法：opacity: 0.5;
屬性值在0.0到1.0范圍內(nèi)，0表示透明，1表示不透明。
filter濾鏡屬性（只適用于早期的IE瀏覽器，語法：filter:alpha(opacity:20);）。
1 2 3 4 5 6 7 8 9 10 11 12 | <div style="color:blueviolet">ppppp</div><div style="color:#ffee33">ppppp</div><div style="color:rgb(255,0,0)">ppppp</div> <div style="color:rgba(255,0,0,0.5)">ppppp</div> # a為透明度border: 3px solid transparent #透明色 占用位置,卻肉眼看不出來, opacity:0.6; #設(shè)置背景顏色透明度background-color: rgba(0,0,0,.6) |
2 字體屬性：
font-style: 用于規(guī)定斜體文本
normal 文本正常顯示
italic 文本斜體顯示
oblique 文本傾斜顯示
font-weight: 設(shè)置文本的粗細(xì)
normal（默認(rèn)）
bold（加粗）
bolder（相當(dāng)于<strong>和<b>標(biāo)簽）
lighter （常規(guī)）
100 ~ 900 整百（400=normal，700=bold）
font-size: 設(shè)置字體的大小
默認(rèn)值：medium
<absolute-size>可選參數(shù)值：xx-small、 x-small、 small、 medium、 large、 x-large、 xx-large
<relative-size>相對(duì)于父標(biāo)簽中字體的尺寸進(jìn)行調(diào)節(jié)?？蛇x參數(shù)值：smaller、 larger
<percentage>百分比指定文字大小。
<length>用長(zhǎng)度值指定文字大小，不允許負(fù)值。
font-family：字體名稱
font：簡(jiǎn)寫屬性
語法：順序：font-style | font-variant | font-weight | font-size | line-height | font-family
font 屬性的值應(yīng)按以下次序書寫(各個(gè)屬性之間用空格隔開)
font-size和line-height只能通過斜杠/組成一個(gè)值，不能分開寫
這種簡(jiǎn)寫方法只有在同時(shí)指定font-size和font-family屬性時(shí)才起作用。
如果你沒有設(shè)定font-weight, font-style, 以及 font-varient ，他們會(huì)使用缺省值
font-size: 20px / 50% / largerfont-family: 'Lucida Bright'font-weight: lighter / bold / border <h1 style="font-style: oblique">Abcd</h1> #字體傾斜.font{font:italic small-caps bold 12px/1.5em arial,verdana;}3 背景屬性：
background-color 背景顏色
background-image 設(shè)置圖像為背景
url("http://images.cnblogs.com/cnblogs_com/DOnkey-fly/603718/o_background.png"); 圖片地址
background-image:linear-gradient(green,blue,yellow,red,black); 顏色漸變效果
background-position 設(shè)置背景圖像的位置坐標(biāo)
background-position: center center; 圖片置中，x軸center，y軸center
1px -195px 截取圖片某部分，分別代表坐標(biāo)x，y軸
background-repeat 設(shè)置背景圖像不重復(fù)平鋪
no-repeat 設(shè)置圖像不重復(fù)，常用
round 自動(dòng)縮放直到適應(yīng)并填充滿整個(gè)容器
space 以相同的間距平鋪且填充滿整個(gè)容器
background-attachment 背景圖像是否固定或者隨著頁面的其余部分滾動(dòng)
background 簡(jiǎn)寫
background: url("o_ns.png") no-repeat 0 -196px;
background: url("o_ns.png") no-repeat center bottom 15px;
background: url("o_ns.png") no-repeat left 30px bottom 15px;
1 2 3 4 5 6 7 8 9 10 11 12 13 | background-color: cornflowerbluebackground-image: url('1.jpg');background-repeat: no-repeat; (repeat:平鋪滿)background-position: center center /（20px 20px）; (橫向：left center right) (縱向：top center bottom)組合簡(jiǎn)寫：<body style="background: 20px 20px no-repeat #ff4 url('1.jpg')"><div style="width: 300px;height: 300px;background: 20px 20px no-repeat #ff4 url('1.jpg')"> |
注意：
如果將背景屬性加在body上，要記得給body加上一個(gè)height，否則結(jié)果異常，這是因?yàn)閎ody為空，無法撐起背景圖片，
另外，如果此時(shí)要設(shè)置一個(gè)width＝100px，你也看不出效果，除非你設(shè)置出html。
4 文本屬性：
white-space: 設(shè)置元素中空白的處理方式
normal：默認(rèn)處理方式。
pre：保留空格，當(dāng)文字超出邊界時(shí)不換行
nowrap：不保留空格，強(qiáng)制在同一行內(nèi)顯示所有文本，直到文本結(jié)束或者碰到br標(biāo)簽
pre-wrap：保留空格，當(dāng)文字碰到邊界時(shí)換行
pre-line：不保留空格，保留文字的換行，當(dāng)文字碰到邊界時(shí)換行
注意: 此處所說的空白處理為標(biāo)簽內(nèi)的內(nèi)容間的空白以及換行。
1 2 3 4 5 | <div>Hello !</div><div> # 空格 Hello ! # 換行</div> |
direction: 規(guī)定文本的方向
ltr 默認(rèn)，文本方向從左到右。
rtl 文本方向從右到左。
text-align: 文本的水平對(duì)齊方式
left
center
right
line-height: 文本行高
normal 默認(rèn)
vertical-align: 文本所在行高的垂直對(duì)齊方式
baseline 默認(rèn)
sub 垂直對(duì)齊文本的下標(biāo)，和<sub>標(biāo)簽一樣的效果
super 垂直對(duì)齊文本的上標(biāo)，和<sup>標(biāo)簽一樣的效果
top 對(duì)象的頂端與所在容器的頂端對(duì)齊
text-top 對(duì)象的頂端與所在行文字頂端對(duì)齊
middle 元素對(duì)象基于基線垂直對(duì)齊
bottom 對(duì)象的底端與所在行的文字底部對(duì)齊
text-bottom 對(duì)象的底端與所在行文字的底端對(duì)齊
text-indent: 文本縮進(jìn)
letter-spacing: 添加字母之間的空白
word-spacing: 添加每個(gè)單詞之間的空白
text-transform: 屬性控制文本的大小寫
capitalize 文本中的每個(gè)單詞以大寫字母開頭。
uppercase 定義僅有大寫字母。
lowercase 定義僅有小寫字母。
text-overflow: 文本溢出樣式
clip 修剪文本。
ellipsis 顯示省略符號(hào)...來代表被修剪的文本。
string 使用給定的字符串來代表被修剪的文本。
不可獨(dú)立使用必須結(jié)合overflow:hidden; white-space:nowrap;才生效。
text-decoration: 文本的裝飾
none 默認(rèn)。
underline 下劃線。
overline 上劃線。
line-through 中線。
text-shadow：文本陰影
第一個(gè)參數(shù)是左右位置
第二個(gè)參數(shù)是上下位置
第三個(gè)參數(shù)是虛化效果
第四個(gè)參數(shù)是顏色
text-shadow: 5px 5px 5px #888;
word-wrap：允許長(zhǎng)單詞或 URL 地址換行到下一行
word-break：在恰當(dāng)?shù)臄嘧贮c(diǎn)進(jìn)行換行, 在邊界換行
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | font-size: 10px;text-align: center; 文本對(duì)齊方式line-height: 200px; 文本行高 通俗的講，文字高度加上文字上下的空白區(qū)域的高度 50%:基于字體大小的百分比p{ width: 200px;height: 200px;text-align: center;background-color: aquamarine;line-height: 200px; }text-indent: 150px; 首行縮進(jìn)，50%：基于父元素（weight）的百分比letter-spacing: 10px; 每一個(gè)字母的間隔word-spacing: 20px; 每一個(gè)單詞的間隔direction: rtl; 設(shè)置文本方向text-transform: capitalize; 控制文本的大小寫#capitalize 文本中的每個(gè)單詞以大寫字母開頭。#uppercase 定義僅有大寫字母。#owercase 定義無大寫字母，僅有小寫字母。 |
5 邊框?qū)傩裕?/span>
border-style：邊框樣式
solid 默認(rèn)，實(shí)線
double 雙線
dotted 點(diǎn)狀線條
dashed 虛線
border-color：邊框顏色
border-width：邊框?qū)挾?/strong>
border-radius：圓角
1個(gè)參數(shù)：四個(gè)角都應(yīng)用
2個(gè)參數(shù)：第一個(gè)參數(shù)應(yīng)用于 左上、右下；第二個(gè)參數(shù)應(yīng)用于 左下、右上
3個(gè)參數(shù)：第一個(gè)參數(shù)應(yīng)用于 左上；第二個(gè)參數(shù)應(yīng)用于 左下、右上；第三個(gè)參數(shù)應(yīng)用于右下
4個(gè)參數(shù)：左上、右上、右下、左下（順時(shí)針）
border: 簡(jiǎn)寫
box-shadow：邊框陰影
第一個(gè)參數(shù)是左右位置
第二個(gè)參數(shù)是上下位置
第三個(gè)參數(shù)是虛化效果
第四個(gè)參數(shù)是顏色
box-shadow: 10px 10px 5px #888;
1 2 3 4 5 6 7 | border-style: solid;border-color: chartreuse;border-width: 20px;組合簡(jiǎn)寫：border: 30px rebeccapurple solid; |
6 列表屬性
list-style-type: 列表項(xiàng)標(biāo)志的類型
none 去除標(biāo)志
decimal-leading-zero; 02.
square; 方框
circle; 空心圓
upper-alph; 大寫字母
disc; 實(shí)心圓
list-style-image：將圖象設(shè)置為列表項(xiàng)標(biāo)志
list-style-position：列表項(xiàng)標(biāo)志的位置
inside
outside
list-style：縮寫
ul,ol{ list-style: decimal-leading-zero; # 數(shù)字01,02, list-style: none; # 不顯示 list-style: circle; # 空心圓 list-style: upper-alpha; # 字母A,B, list-style: disc; # 實(shí)心圓(默認(rèn))} 7 dispaly屬性
1 2 3 4 | none # 不顯示block # 塊元素inline # 設(shè)置為內(nèi)聯(lián) , 內(nèi)聯(lián)標(biāo)簽不能設(shè)置寬和高!!inline-block # 設(shè)置為內(nèi)聯(lián),并且可以設(shè)置高度,寬度!! |
8 盒子模型
padding:用于控制內(nèi)容與邊框之間的距離；
margin: 用于控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達(dá)到相互隔開的目的。
我們通過設(shè)置width 和 height 只是設(shè)置了content的寬度與高度!
盒子的寬度(高度)=content+padding+border+margin
實(shí)例： 300px*300px的盒子裝著100px*100px的盒子，分別通過margin和padding設(shè)置將小盒子移到大盒子的中間
注意1：邊框在默認(rèn)情況下會(huì)定位于瀏覽器窗口的左上角，但是并沒有緊貼著瀏覽器的窗口的邊框。
這是因?yàn)閎ody本身也是一個(gè)盒子（外層還有html），在默認(rèn)情況下，body距離html會(huì)有若干像素的margin，具體數(shù)值因各個(gè)瀏覽器不盡相同，所以body中的盒子不會(huì)緊貼瀏覽器窗口的邊框了。
1 2 3 4 5 6 7 8 9 10 11 | # 驗(yàn)證方法：body{ border: 1px solid; background-color: cadetblue;}>>>>解決方法：body{ margin: 0;} |
注意2：margin collapse（邊界塌陷或者說邊界重疊）
外邊距的重疊只產(chǎn)生在普通流文檔的上下外邊距之間，這個(gè)看起來有點(diǎn)奇怪的規(guī)則，其實(shí)有其現(xiàn)實(shí)意義。
設(shè)想，當(dāng)我們上下排列一系列規(guī)則的塊級(jí)元素（如段落P）時(shí)，那么塊元素之間因?yàn)橥膺吘嘀丿B的存在，段落之間就不會(huì)產(chǎn)生雙倍的距離。
1.兄弟div：上面div的margin-bottom和下面div的margin-top會(huì)塌陷，也就是會(huì)取上下兩者margin里最大值作為顯示值
2.父子div：如果 父級(jí)div中沒有 border，padding，inline content，子級(jí)div的margin會(huì)一直向上找，直到找到某個(gè)標(biāo)簽包括border，padding，inline content 中的其中一個(gè)，然后按此div 進(jìn)行margin !!!
1 2 3 4 | 解決方法： 1: border:1px solid transparent; 2: padding:1px; 必須大于0 3: overflow:hidden; |
9 float
首先要知道，div是塊級(jí)元素，在頁面中獨(dú)占一行，自上而下排列，也就是傳說中的流。
可以看出，即使div1的寬度很小，頁面中一行可以容下div1和div2，div2也不會(huì)排在div1后邊，因?yàn)閐iv元素是獨(dú)占一行的。注意，以上這些理論，是指標(biāo)準(zhǔn)流中的div。
無論多么復(fù)雜的布局，其基本出發(fā)點(diǎn)均是：“如何在一行顯示多個(gè)div元素”。
浮動(dòng)可以理解為讓某個(gè)div元素脫離標(biāo)準(zhǔn)流，漂浮在標(biāo)準(zhǔn)流之上，和標(biāo)準(zhǔn)流不是一個(gè)層次。
例如，假設(shè)上圖中的綠色div2浮動(dòng)，那么它將脫離標(biāo)準(zhǔn)流，但div1、div3、div4仍然在標(biāo)準(zhǔn)流當(dāng)中，所以div3會(huì)自動(dòng)向上移動(dòng)，占據(jù)div2的位置，重新組成一個(gè)流。如圖：
從圖中可以看出，由于對(duì)div2設(shè)置浮動(dòng)，因此它不再屬于標(biāo)準(zhǔn)流，div3自動(dòng)上移頂替div2的位置，div1、div3、div4依次排列，成為一個(gè)新的流。
又因?yàn)楦?dòng)是漂浮在標(biāo)準(zhǔn)流之上的，因此div2擋住了一部分div3，div3看起來變“矮”了
這里div2用的是左浮動(dòng)( float:left;)，可以理解為漂浮起來后靠左排列，右浮動(dòng)(float:right;)當(dāng)然就是靠右排列。 這里的靠左、靠右是說頁面的左、右邊緣。
如果我們把div2采用右浮動(dòng)，會(huì)是如下效果：
此時(shí)div2靠頁面右邊緣排列，不再遮擋div3，讀者可以清晰的看到上面所講的div1、div3、div4組成的流。
目前為止我們只浮動(dòng)了一個(gè)div元素，多個(gè)呢？
下面我們把div2和div3都加上左浮動(dòng)，效果如圖：
同理，由于div2、div3浮動(dòng)，它們不再屬于標(biāo)準(zhǔn)流，因此div4會(huì)自動(dòng)上移，與div1組成一個(gè)“新”標(biāo)準(zhǔn)流，而浮動(dòng)是漂浮在標(biāo)準(zhǔn)流之上，因此div2又擋住了div4。
當(dāng)同時(shí)對(duì)div2、div3設(shè)置浮動(dòng)之后，div3會(huì)跟隨在div2之后，不知道讀者有沒有發(fā)現(xiàn)，一直到現(xiàn)在，div2在每個(gè)例子中都是浮動(dòng)的，但并沒有跟隨到div1之后。
因此，我們可以得出一個(gè)重要結(jié)論：
1.假如某個(gè)div元素A是浮動(dòng)的，如果A元素上一個(gè)元素也是浮動(dòng)的，那么A元素會(huì)跟隨在上一個(gè)元素的后邊(如果一行放不下這兩個(gè)元素，那么A元素會(huì)被擠到下一行)；如果A元素上一個(gè)元素是標(biāo)準(zhǔn)流中的元素，那么A的相對(duì)垂直位置不會(huì)改變，也就是說A的頂部總是和上一個(gè)元素的底部對(duì)齊。
2.div的順序是HTML代碼中div的順序決定的。
3.靠近頁面邊緣的一端是前，遠(yuǎn)離頁面邊緣的一端是后。
為了幫助讀者理解，再舉幾個(gè)例子。
假如我們把div2、div3、div4都設(shè)置成左浮動(dòng)，效果如下：
先從div4開始分析，它發(fā)現(xiàn)上邊的元素div3是浮動(dòng)的，所以div4會(huì)跟隨在div3之后；div3發(fā)現(xiàn)上邊的元素div2也是浮動(dòng)的，所以div3會(huì)跟隨在div2之后；而div2發(fā)現(xiàn)上邊的元素div1是標(biāo)準(zhǔn)流中的元素，因此div2的相對(duì)垂直位置不變，頂部仍然和div1元素的底部對(duì)齊。由于是左浮動(dòng)，左邊靠近頁面邊緣，所以左邊是前，因此div2在最左邊。
假如把div2、div3、div4都設(shè)置成右浮動(dòng)，效果如下：
道理和左浮動(dòng)基本一樣，只不過需要注意一下前后對(duì)應(yīng)關(guān)系。由于是右浮動(dòng)，因此右邊靠近頁面邊緣，所以右邊是前，因此div2在最右邊。
假如我們把div2、div4左浮動(dòng)，效果圖如下：
依然是根據(jù)結(jié)論，div2、div4浮動(dòng)，脫離了標(biāo)準(zhǔn)流，因此div3將會(huì)自動(dòng)上移，與div1組成標(biāo)準(zhǔn)流。div2發(fā)現(xiàn)上一個(gè)元素div1是標(biāo)準(zhǔn)流中的元素，因此div2相對(duì)垂直位置不變，與div1底部對(duì)齊。div4發(fā)現(xiàn)上一個(gè)元素div3是標(biāo)準(zhǔn)流中的元素，因此div4的頂部和div3的底部對(duì)齊，并且總是成立的，因?yàn)閺膱D中可以看出，div3上移后，div4也跟著上移，div4總是保證自己的頂部和上一個(gè)元素div3(標(biāo)準(zhǔn)流中的元素)的底部對(duì)齊。
至此，恭喜讀者已經(jīng)掌握了添加浮動(dòng)，但還有清除浮動(dòng)，有上邊的基礎(chǔ)清除浮動(dòng)非常容易理解。
經(jīng)過上邊的學(xué)習(xí)，可以看出：元素浮動(dòng)之前，也就是在標(biāo)準(zhǔn)流中，是豎向排列的，而浮動(dòng)之后可以理解為橫向排列。
清除浮動(dòng)可以理解為打破橫向排列。
清除浮動(dòng)的關(guān)鍵字是clear，官方定義如下：
語法：clear : none | left | right | both取值：none : 默認(rèn)值。允許兩邊都可以有浮動(dòng)對(duì)象left : 不允許左邊有浮動(dòng)對(duì)象right : 不允許右邊有浮動(dòng)對(duì)象both : 不允許有浮動(dòng)對(duì)象
定義非常容易理解，但是讀者實(shí)際使用時(shí)可能會(huì)發(fā)現(xiàn)不是這么回事。
定義沒有錯(cuò)，只不過它描述的太模糊，讓我們不知所措。
根據(jù)上邊的基礎(chǔ)，假如頁面中只有兩個(gè)元素div1、div2，它們都是左浮動(dòng)，場(chǎng)景如下：
此時(shí)div1、div2都浮動(dòng)，根據(jù)規(guī)則，div2會(huì)跟隨在div1后邊，但我們?nèi)匀幌Ｍ鹍iv2能排列在div1下邊，就像div1沒有浮動(dòng)，div2左浮動(dòng)那樣。
這時(shí)候就要用到清除浮動(dòng)（clear），如果單純根據(jù)官方定義，讀者可能會(huì)嘗試這樣寫：在div1的CSS樣式中添加clear:right;，理解為不允許div1的右邊有浮動(dòng)元素，由于div2是浮動(dòng)元素，因此會(huì)自動(dòng)下移一行來滿足規(guī)則。
其實(shí)這種理解是不正確的，這樣做沒有任何效果。
對(duì)于CSS的清除浮動(dòng)(clear)，一定要牢記：這個(gè)規(guī)則只能影響使用清除的元素本身，不能影響其他元素。
怎么理解呢？就拿上邊的例子來說，我們是想讓div2移動(dòng)，但我們卻是在div1元素的CSS樣式中使用了清除浮動(dòng)，試圖通過清除div1右邊的浮動(dòng)元素(clear:right;)來強(qiáng)迫div2下移，這是不可行的，因?yàn)檫@個(gè)清除浮動(dòng)是在div1中調(diào)用的，它只能影響div1，不能影響div2。
要想讓div2下移，就必須在div2的CSS樣式中使用浮動(dòng)。
本例中div2的左邊有浮動(dòng)元素div1，因此只要在div2的CSS樣式中使用 clear:left; 來指定div2元素左邊不允許出現(xiàn)浮動(dòng)元素，這樣div2就被迫下移一行。
那么假如頁面中只有兩個(gè)元素div1、div2，它們都是右浮動(dòng)呢？讀者此時(shí)應(yīng)該已經(jīng)能自己推測(cè)場(chǎng)景，如下：
此時(shí)如果要讓div2下移到div1下邊，要如何做呢？
我們希望移動(dòng)的是div2，就必須在div2的CSS樣式中調(diào)用浮動(dòng)，因?yàn)楦?dòng)只能影響調(diào)用它的元素。
可以看出div2的右邊有一個(gè)浮動(dòng)元素div1，那么我們可以在div2的CSS樣式中使用 clear:right; 來指定div2的右邊不允許出現(xiàn)浮動(dòng)元素，這樣div2就被迫下移一行，排到div1下邊。
總結(jié):
float : 先判斷上一個(gè)是不是浮動(dòng)對(duì)象, 如果是 緊跟其后(還要判斷浮動(dòng)方向), 如果不是,自己浮起來,脫離文檔流! (原來的位置可以被頂替)
clear : both => 左右都不能有浮動(dòng),只針對(duì)自己!
清除浮動(dòng)：
在非IE瀏覽器（如Firefox）下，當(dāng)容器的高度為auto，且容器的內(nèi)容中有浮動(dòng)（float為left或right）的元素，
在這種情況下，容器的高度不能自動(dòng)伸長(zhǎng)以適應(yīng)內(nèi)容的高度，使得內(nèi)容溢出到容器外面而影響（甚至破壞）布局的現(xiàn)象。
這個(gè)現(xiàn)象叫浮動(dòng)溢出，為了防止這個(gè)現(xiàn)象的出現(xiàn)而進(jìn)行的CSS處理，就叫CSS清除浮動(dòng)。
方式一：
.clearfix:after { <----在類名為“clearfix”的元素內(nèi)最后面加入內(nèi)容； content: "."; <----內(nèi)容為“.”就是一個(gè)英文的句號(hào)而已。也可以不寫。 display: block; <----加入的這個(gè)元素轉(zhuǎn)換為塊級(jí)元素。 clear: both; <----清除左右兩邊浮動(dòng)。 visibility: hidden; <----可見度設(shè)為隱藏。注意它和display:none;是有區(qū)別的。visibility:hidden;仍然占據(jù)空間，只是看不到而已； line-height: 0; <----行高為0； height: 0; <----高度為0； font-size:0; <----字體大小為0； } .clearfix { *zoom:1;} <----這是針對(duì)于IE6的，因?yàn)镮E6不支持:after偽類，這個(gè)神奇的zoom:1讓IE6的元素可以清除浮動(dòng)來包裹內(nèi)部元素。整段代碼就相當(dāng)于在浮動(dòng)元素后面跟了個(gè)寬高為0的空div，然后設(shè)定它c(diǎn)lear:both來達(dá)到清除浮動(dòng)的效果。
之所以用它，是因?yàn)?，你不必在html文件中寫入大量無意義的空標(biāo)簽，又能清除浮動(dòng)。
方式二：
overflow:hidden;
overflow：hidden的含義是超出的部分要裁切隱藏
float的元素雖然不在普通流中，但是他是浮動(dòng)在普通流之上的，可以把普通流元素+浮動(dòng)元素想象成一個(gè)立方體。
如果沒有明確設(shè)定包含容器高度的情況下，它要計(jì)算內(nèi)容的全部高度才能確定在什么位置hidden，這樣浮動(dòng)元素的高度就要被計(jì)算進(jìn)去。這樣包含容器就會(huì)被撐開，清除浮動(dòng)。
10 position
1.static，默認(rèn)值 static：無特殊定位，對(duì)象遵循正常文檔流。
top，right，bottom，left 等屬性不會(huì)被應(yīng)用。說到這里我們不得不提一下一個(gè)定義——文檔流，文檔流其實(shí)就是文檔的輸出順序，也就是我們通?？吹降挠勺蟮接摇⒂缮隙碌妮敵鲂问?，在網(wǎng)頁中每個(gè)元素都是按照這個(gè)順序進(jìn)行排序和顯示的，而float和position兩個(gè)屬性可以將元素從文檔流脫離出來顯示。 默認(rèn)值就是讓元素繼續(xù)按照文檔流顯示，不作出任何改變。
2.position : relative / absolute
relative：(相對(duì)定位) 對(duì)象遵循正常文檔流，僅僅定義對(duì)本參無影響. 但將依據(jù)top，right，bottom，left等屬性在正常文檔流中偏移位置。而其層疊通過z-index屬性定義。
元素實(shí)際上依然占據(jù)文檔中的原有位置，只是視覺上相對(duì)于它在文檔中的原有位置移動(dòng)了
absolute：(絕對(duì)定位) 對(duì)象脫離正常文檔流，使用top，right，bottom，left等屬性進(jìn)行絕對(duì)定位。而其層疊通過z-index屬性定義。
當(dāng)指定 position:absolute 時(shí)，元素就脫離了文檔[即在文檔中已經(jīng)不占據(jù)位置了]，可以準(zhǔn)確的按照設(shè)置的 top,bottom,left 和 right 來定位了。
如果一個(gè)元素絕對(duì)定位后，其參照物是以離自身最近元素是否設(shè)置了相對(duì)定位，如果有設(shè)置將以離自己最近元素定位，如果沒有將往其祖先元素尋找相對(duì)定位元素， 一直找到html為止。
3.position:fixed
在理論上，被設(shè)置為fixed的元素會(huì)被定位于瀏覽器窗口的一個(gè)指定坐標(biāo)，不論窗口是否滾動(dòng)，它都會(huì)固定在這個(gè)位置。
fixed：對(duì)象脫離正常文檔流，使用top，right，bottom，left等屬性以窗口為參考點(diǎn)進(jìn)行定位，當(dāng)出現(xiàn)滾動(dòng)條時(shí)，對(duì)象不會(huì)隨著滾動(dòng)。而其層疊通過z-index屬性定義。
注意點(diǎn)： 一個(gè)元素若設(shè)置了 position:absolute | fixed; 則該元素就不能設(shè)置float。這是一個(gè)常識(shí)性的知識(shí)點(diǎn)，因?yàn)檫@是兩個(gè)不同的流，一個(gè)是浮動(dòng)流，另一個(gè)是“定位流”。
但是 relative 卻可以。因?yàn)樗舅嫉目臻g仍然占據(jù)文檔流。
僅使用margin屬性布局絕對(duì)定位元素
此情況，margin-bottom 和margin-right的值不再對(duì)文檔流中的元素產(chǎn)生影響，因?yàn)樵撛匾呀?jīng)脫離了文檔流。
另外，不管它的祖先元素有沒有定位，都是以文檔流中原來所在的位置上偏移參照物。
圖9中，使用margin屬性布局相對(duì)定位元素。
層級(jí)關(guān)系為：
<div ——————————— position:relative;
<div—————————-沒有設(shè)置為定位元素，不是參照物
<div———————-沒有設(shè)置為定位元素，不是參照物
<div box1
<div box2 ——–position:absolute; margin-top:50px; margin-left:120px;
<div box3
效果圖：
1.css屬性可以定義給多個(gè)class!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <style>.bd .div1{ background-color: red; width: 600px; height: 200px; }.bd .test{ background-color:#ddd;}</style><div class='bd'> <div class='div1 test'>DIV1</div> # 最終效果為:#ddd</div> |
2.background-position: 定位背景圖像
background-position 屬性設(shè)置背景圖像的起始位置。
這個(gè)屬性設(shè)置背景原圖像（由 background-image 定義）的位置，背景圖像如果要重復(fù)，將從這一點(diǎn)開始。
實(shí)例:
1 2 3 4 5 6 7 8 9 10 | .dj{ width:18px; height:16px; border:solid 1px red; background:url('http://misc.360buyimg.com/jdf/1.0.0/unit/globalImages/1.0.0/jd2015img.png'); background-repeat:no-repeat; background-position:0 -58px;}<div class='dj'></div> |
可以通過調(diào)節(jié):background-position 的值,顯示圖像!
通過background-position 實(shí)現(xiàn)了從圖片上摳圖的效果!
3.z-index:
z-index 屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素 總是會(huì)處于 堆疊順序較低的元素的前面 !
僅在定位元素上有效（例：position:absolute;）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | .z-index1 { width: 100px; height: 100px; background-color: yellow; position: absolute; z-index: -1;}.z-index2 { width: 100px; height: 100px; background-color: red; position: absolute; top: 20px; left: 20px; z-index: 5;}<div class="z-index1"></div><div class="z-index2"></div> |
4.overflow
visible 默認(rèn)值，內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外。
hidden 內(nèi)容會(huì)被修剪，并且其余內(nèi)容是不可見的。
scroll 內(nèi)容會(huì)被修剪，但是瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。
auto 如果內(nèi)容被修剪，則瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。
5.outline 邊框輪廓
輪廓不占據(jù)頁面空間，也不一定是矩形。
1 | outline: none; # 可以去除input標(biāo)簽的輪廓!! |
除了IE以外的瀏覽器都直接支持outline。只有規(guī)定了!DOCUMENT之后的IE8以上版本的瀏覽器才支持outline。
outline-width 輪廓寬度
outline-color 輪廓顏色
outline-style 輪廓樣式
6.zoom 縮放比例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .zoom1 { zoom: 100%; } .zoom2 { zoom: 150%; } .zoom3 { zoom: 200%; } </style></head><body> <div class="zoom1">Nick 100%</div> <div class="zoom2">Nick 200%</div> <div class="zoom3">Nick 300%</div></body></html> |
7.transform、transition 動(dòng)畫效果
transform 轉(zhuǎn)換，變形
origin 定義旋轉(zhuǎn)基點(diǎn)（left top center right bottom 坐標(biāo)值） transform-origin: 50px 50px; transform-origin: left;。
rotate 旋轉(zhuǎn) transform:rotate(50deg) 旋轉(zhuǎn)角度可以為負(fù)數(shù)，需要先定義origin。
skew 扭曲 transform:skew(50deg,50deg) 分別為相對(duì)x軸傾斜,相對(duì)y軸傾斜。
scale 縮放 transform:scale(2,3) 橫向放大2倍，縱向放大3倍；transform:scale(2) 橫豎都放大2倍。
translate 移動(dòng) transform:translate(50px, 50px) 分別為相對(duì)x軸移動(dòng),相對(duì)y軸移動(dòng)。
Transition 平滑過渡
transition-property： 變換的屬性（none(沒有屬性改變)、all(所有屬性改變)、具體屬性）
transition-duration： 變換持續(xù)時(shí)間
transition-timing-function： 變換的速率（ease:(逐漸變慢)、linear:(勻速)、ease-in:(加速)、ease-out:(減速)、ease-in-out:(加速然后減速)、cubic-bezier:(自定義時(shí)間曲線））
transition-delay： 變換延遲時(shí)間
transition： 縮寫
實(shí)例:demo
鼠標(biāo)放在以下圖片上，There will be a miracle：
3.商城頁面
1.關(guān)于 line-height 和 height 居中效果
1 2 3 4 5 | a{display:inline-block;height: 40px;text-align:center;} |
line-height是把多余的高度平分到上面和下面 所以明顯會(huì)居中。設(shè)置height就是自然而然的從上到下排列所以貼頂了!
2.float 效果影響背景色
子級(jí)div 使用float 效果時(shí),父級(jí)div的背景色會(huì)失效
原因: 當(dāng)塊元素的高度是默認(rèn)或者auto時(shí)，W3C 在可視化格式模型中規(guī)定了高度的計(jì)算細(xì)節(jié)，其中有一條就是：如果元素包含浮動(dòng)元素，那么浮動(dòng)元素不參與高度計(jì)算。所以沒有撐起父級(jí)元素顏色失效。
解決方法:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | 1. 父級(jí)div中 添加 overflow:hidden# 當(dāng)塊元素上有 “overflow:hidden” 時(shí)，會(huì)創(chuàng)建 Block Formatting context，這時(shí)，元素在計(jì)算其高度時(shí)，浮動(dòng)的子元素會(huì)被計(jì)算在內(nèi)。2.父級(jí)div里面 額外添加一個(gè)<div style="clear:both"></div>3.自定義一個(gè)樣式, 添加到父級(jí)div class 后面.clearfix:after{ content: 'x'; //在div末尾插入一個(gè)x visibility: hidden; //隱藏這個(gè)x值 height: 0px; //設(shè)置高度為0 clear:both; display:block;}<div class="father clearfix"> <div class="item">123</div> <div class="item">456</div></div> |
3.hover
hover 后可以添加選擇器指明需要修改的樣式
1 2 3 | .c:hover .item{ background-color:red;} |
4.透明色
1 2 3 4 | border: 3px solid transparent #透明色 占用位置,卻肉眼看不出來,opacity:0.6; 設(shè)置背景顏色透明度background-color: rgba(0,0,0,.6) |
5.圖片的使用
如果需要在div里面插入img標(biāo)簽的圖片,div中需要使用 overflow:hidden 來防止圖片超出邊界撐開div
6.position 使用
position 常使用于 div的定位
1 2 3 4 5 6 7 8 | # position: relative 對(duì)本身div沒影響position:absolute left:0top:0right:0buttom:0=> 表示全部占滿一個(gè)屏幕 |
7.小尖角
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | .angle{ border-top:30px solid red ; border-left:30px solid blue ; border-bottom:30px solid green ; border-right:30px solid yellow ; display: inline-block; }.up{ border: 30px solid transparent; border-top:30px solid red ; display: inline-block; }.down{ border: 30px solid transparent; border-bottom:30px solid red ; display: inline-block; }<div class="angle"></div><div class="up"></div><div class="down"></div> |
8.圖標(biāo)素材
現(xiàn)成的圖標(biāo)網(wǎng)站, http://fontawesome.io/ 里面有各種小圖標(biāo), 下載解壓,頁面中,引用css即可
1 2 3 | <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css"><span class="fa fa-bullhorn"></span> #具體參考官方網(wǎng)站中演示代碼 |
9.a標(biāo)簽中嵌套圖片(默認(rèn)樣式)
a 標(biāo)簽中有邊框 (ie瀏覽器下)
1 2 3 | img{ border:0;} |
10.目錄結(jié)構(gòu)
1 2 3 4 5 6 7 8 9 10 11 | hao123.com -app -s1.html -s2.html -css -commons.css -script -commons.js -plugin -bootstrap -bxslider |
11.樣式.重復(fù)修改
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | .c1{ background-color: red;}.c2{ background-color: green;}<div class="c1 c2">1</div> # c2離得近所以,使用c2中樣式, div背景色被設(shè)置成綠色!# 為了避免這種情況可以使用 !important; 保證了使用原來定義的背景色c1,防止被篡改.c1{ background-color: red !important;}.c2{ background-color: green;} |
12.布局,分左右
使用position方法 效果最好!
.pg-left{ width: 180px; position: absolute; left: 0; background-color: red;}.pg-right{ height: 600px; position: absolute; left: 184px; right: 0; overflow: auto; background-color: lightcoral;}13.設(shè)置滾動(dòng)條
先設(shè)置一個(gè)高度,再使用 overflow:auto 超出大小,出現(xiàn)滾動(dòng)條!
14.input框插入圖標(biāo)
思路: 利用 absolute 插入圖標(biāo) ，padding 來設(shè)置內(nèi)邊距，留出空白位置
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | .c1{ position: relative;}.c1-input{ width: 180px; padding-right: 20px;}.c1-icon{ position: absolute; left:190px; top:4px;}<div class="c1"> <input type="text" class="c1-input" /> <span class="c1-icon">R</span></div> |
15.全屏提示框(模態(tài)對(duì)話框)
思路：底層 + 遮罩層(position:fixed 透明) + 頂層 (div fixed)居中顯示
1.兩個(gè)fixed 在一起. z-index設(shè)置順序
2.居中 top left 可以用百分比! margin-left 負(fù)值左移
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | .middle{ position: fixed; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0,0,0,.5); z-index: 10;}.roof{ position: fixed; top: 50%; left: 50%; margin-left:-200px; # 使用百分比后，左上角在中心點(diǎn)，還需要適當(dāng)調(diào)整 margin-top: -200px; width: 500px; height: 300px; background-color: white; z-index: 99;} <div class="middle"></div><div class="roof"></div> |
16.加降框
input 默認(rèn)有個(gè)padding 需要使用 padding:0 去除
17.cursor: 鼠標(biāo)的類型形狀
cursor:pointer
請(qǐng)把鼠標(biāo)移動(dòng)到單詞上，可以看到鼠標(biāo)指針發(fā)生變化：
Auto
Crosshair
Default
Pointer
Move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
not-allowed
18. display: inline-block
設(shè)置 inline-block 讓元素剛好占滿一行,卻無法實(shí)現(xiàn)
設(shè)置父級(jí) font-size:0 然后子級(jí)元素重新設(shè)置font-size 就可以了
產(chǎn)生原因: 標(biāo)簽與標(biāo)簽之間的空白位置,占用了1個(gè)字符!
19. 防止縮小瀏覽器寬度,頁面內(nèi)容擠在一起
設(shè)置一個(gè)width 固定寬度,不要用百分比!
20.去掉谷歌input記住賬號(hào)或密碼時(shí)默認(rèn)出現(xiàn)的黃色背景
在谷歌瀏覽器會(huì)默認(rèn)記住賬號(hào)，而記住賬號(hào)之后其input的背景會(huì)變成黃色，解決的辦法如下：
方法一：直接用css的內(nèi)陰影來覆蓋黃色，代碼如下：
1 2 3 | input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; } |
在form標(biāo)簽上直接關(guān)閉了表單的自動(dòng)填充功能： autocomplete = ”off”
21.英文換行顯示,邊界單詞切割成兩部分,顯示
1 2 | word-break: break-all; word-wrap:break-word; |
22.垂直對(duì)齊
1 | vertical-align: ..px; |
23.上傳表單,美化
上面美化，把默認(rèn)顯示的文件名也給隱藏掉了，那么如何顯示文件名稱呢？沒關(guān)系，我們可以用jquery來獲取文件的文件名。
我們可以寫個(gè)change事件
$(".a-upload").on("change","input[type='file']",function(){ var filePath=$(this).val(); if(filePath.indexOf("jpg")!=-1 || filePath.indexOf("png")!=-1){ $(".fileerrorTip").html("").hide(); var arr=filePath.split('\\'); var fileName=arr[arr.length-1]; $(".showFileName").html(fileName); }else{ $(".showFileName").html(""); $(".fileerrorTip").html("您未上傳文件，或者您上傳文件類型有誤！").show(); return false }})
聯(lián)系客服
