黑馬程序員-PHP-課程同步筆記day05：CSS介紹(二)

1、【黑馬程序員】PHPday05：CSSCSSpaddingPadding:一個(gè)數(shù)字，指的是四個(gè)方向是一樣的上右下左PaddingPadding-top(上內(nèi)邊距),padding-right(右內(nèi)邊距),padding-bottom(下內(nèi)邊距),padding-left(左內(nèi)邊距)Padding:當(dāng) paddingPadding:10px 20px;10px20px留意：兩個(gè)數(shù)字之間有空格。Padding：當(dāng) paddingPadding:10px 20px 30px;10px30px20px;Padding:當(dāng) paddingpadding:10px 20px 30px 40px;按著順時(shí)針

2、方向。(上右下左)注釋：不允許使用負(fù)值。代碼：rg/TR/xhtml1/DTD/xhtml1-transitional.dtd“ new document divborder:1px solid red;width:300px;padding:20px;. 為別人，與自己沒(méi)關(guān)系的事，費(fèi)力自己的心思，不要活在過(guò)去里，無(wú)論你有任何的傷痛，回憶只會(huì)帶給自己無(wú)窮無(wú)盡的苦惱，走出苦痛，活在當(dāng)下，人生路很長(zhǎng)，我要走好。CSSmarginMargin：當(dāng) margin 后有一個(gè)數(shù)字時(shí)，指的是四個(gè)方向是一樣的，即margin-top(上外邊距),margin-right(右外邊距),margin-bottom

3、(下外邊距),margin-left(左外邊距)margin:當(dāng) margin 后有兩個(gè)數(shù)字時(shí)，即 margin:10px 20px;10px20px留意：兩個(gè)數(shù)字之間有空格。Margin：當(dāng) marginmargin:10px 20px 30px;.指的是上外邊距 10px,為 30px,左右外邊距為 20px;margin:當(dāng)四個(gè)數(shù)字如：padding:10px 20px 30px 40px; 按著順時(shí)針?lè)较颉?外邊距，上右下左) margin:0 10px;margin:0; new document divborder:1px solid red;width:300px;padding

4、:20px;margin:20px;. 為別人，與自己沒(méi)關(guān)系的事，費(fèi)力自己的心思，不要活在過(guò)去里，無(wú)論你有任何的傷痛，回憶只會(huì)帶給自己無(wú)窮無(wú)盡的苦惱，走出苦痛，活在當(dāng)下，人生路很長(zhǎng)，我要走好。CSSbackgroundBackground-color 背風(fēng)光,英文單詞或十六進(jìn)制顏色都可以。Background-image:url(圖片路徑)背景圖Background-repeat no-repeat 不重復(fù)，repeat-x,repeat-y重復(fù)Background-position(left,center top bottom right) 背景圖定位CSS浮動(dòng)的元素可以理解為該元素已經(jīng)脫離

5、文檔流浮動(dòng)只有兩個(gè)方向：left,rightfloat:left(左浮動(dòng)), float:right右浮動(dòng);浮動(dòng)的位置：浮動(dòng)到包含元素的邊界。或具有浮動(dòng)屬性元素的邊上。浮動(dòng)元素的層級(jí)高于一般元素。但凡浮動(dòng)的元素都是塊元素。假設(shè)浮動(dòng)前行內(nèi)元素，浮動(dòng)后自動(dòng)轉(zhuǎn)為塊元素。 備注：行內(nèi)元素沒(méi)有寬高，只有塊元素才有寬高。關(guān)于浮動(dòng)，我們能通常用在，將塊元素在一行內(nèi)顯示。.主要應(yīng)用于排序DIV+CSS new document .boxwidth:960px;height:500px;border:1px solid red;padding:10px;.leftwidth:200px;height:200px

6、;border:1px solid green;float:left;.rightwidth:700px;height:200px;border:1px solid pink;float:right;.但凡設(shè)置了浮動(dòng)這之后，肯定要有去除浮動(dòng)。主要目的，去除上面的有浮動(dòng)屬性，對(duì)后面的元素造成的影響。上面的浮動(dòng)屬性，假設(shè)不去除，下面的元素會(huì)默認(rèn)繼承去除浮動(dòng)的寫法：clear:left,right,both.Clear:both,去除兩邊，我們通常用在版權(quán)獨(dú)占一行。去除寫的位置：具有浮動(dòng)屬性的最終面。通常，用一個(gè)空的 new document .boxwidth:500px;height:500px

7、;border:1px solid red;padding:10px;.leftwidth:200px;height:200px;border:1px solid green;float:left;.rightwidth:200px;height:200px;border:1px solid blue;float:right;我們可以急躁等，幸?？梢詠?lái)的慢一些，只要它是真的。當(dāng)我們找回自己最初的愿望時(shí)，就會(huì)覺(jué)察眼下的不快根本算不了什么。無(wú)論什么時(shí)候，當(dāng)苦惱襲來(lái)時(shí)，當(dāng)我們的心不聽(tīng)話硬要生氣時(shí)，肯定要記得告知自己一聲：我不是為了生氣才活著的！命運(yùn)的深層次意義，就是要學(xué)會(huì)放棄和等待，放棄一切喧囂浮華

8、，等待靈魂漸漸地安靜。div 路，都會(huì)留下痕跡。時(shí)間就像一塊橡皮擦，可以輕易抹去你曾經(jīng)那些有心無(wú)心錯(cuò)過(guò)的事情， 但它卻不能擦去那些因過(guò)錯(cuò)而烙在你心頭的印痕。. new document .boxwidth:500px;height:500px;border:1px solid red;padding:10px;.leftwidth:200px;height:200px;border:1px solid green;float:left;.rightwidth:200px;height:200px;border:1px solid blue;float:right;我們可以急躁等，幸?？梢詠?lái)的慢

9、一些，只要它是真的。.當(dāng)我們找回自己最初的愿望時(shí)，就會(huì)覺(jué)察眼下的不快根本算不了什么。無(wú)論什么時(shí)候，當(dāng)苦惱襲來(lái)時(shí)，當(dāng)我們的心不聽(tīng)話硬要生氣時(shí)，肯定要記得告知自己一聲：我不是為了生氣才活著的！命運(yùn)的深層次意義，就是要學(xué)會(huì)放棄和等待，放棄一切喧囂浮華，等待靈魂漸漸地安靜。div 路，都會(huì)留下痕跡。時(shí)間就像一塊橡皮擦，可以輕易抹去你曾經(jīng)那些有心無(wú)心錯(cuò)過(guò)的事情， 但它卻不能擦去那些因過(guò)錯(cuò)而烙在你心頭的印痕。CSSoverflowoverflow 屬性規(guī)定當(dāng)內(nèi)容溢出元素框時(shí)發(fā)生的事情。Visible：默認(rèn)值。內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外。 Hidden：內(nèi)容會(huì)被修剪，并且其余內(nèi)容是不行見(jiàn)的。 Scroll：內(nèi)容會(huì)被修剪，但是掃瞄器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。Auto：假設(shè)內(nèi)容被修剪，那么掃瞄器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。. new document divwidth:150px; height:150px; overflow:scroll;我們可以急躁等，幸?？梢詠?lái)的慢一些，只要它是真的。人生的路，走走停停 浪，沒(méi)有不會(huì)暗的光，沒(méi)有不會(huì)好的傷，沒(méi)有不會(huì)停下來(lái)的無(wú)望。.CSS行內(nèi)引入：在標(biāo)簽里面直接編寫行內(nèi)樣式 內(nèi)