marginfloat背景圖如何使用

今天來整理一下做網(wǎng)頁遇到的問題吧

1.插入背景圖片并使圖片居于p底部充滿整個(gè)行。

<style>
 background:url(xxx.jpg) no-repeat;
 background-position:bottom; 
 background-size:100%;</style>

　　屬性：

　　　background-position：背景位置屬性用于設(shè)置背景圖像的位置，這個(gè)屬性只能應(yīng)用于塊級(jí)元素和替換元素。其中替換元素包括img、input、textarea、select。

　　　　　語法取值有兩種：長度和關(guān)鍵字。

　　　　　　　　長度：設(shè)置水平方向數(shù)值（x軸）和垂直方向數(shù)值（y軸）如：background-position：10px 20px;

　　　　　　　　關(guān)鍵字：top left （左上）top center（上居中）等，第二個(gè)值不設(shè)默認(rèn)為居中。

　　　 background-size：定義背景圖片大小。

　　　　　屬性值1.length ：第一個(gè)值是寬度，第二個(gè)值是高度，如果只設(shè)置第一個(gè)值，那么第二個(gè)值會(huì)自動(dòng)轉(zhuǎn)換為 “auto”

　　　　　　　　2.percentage：以父元素的百分比來設(shè)置圖片的寬度和高度，第一個(gè)值是寬度，第二個(gè)值是高度。如果只設(shè)置一個(gè)值，那么第二個(gè)值會(huì)被設(shè)置為 “auto”。

　　　　　　　3.cover ：背景圖擴(kuò)展完全覆蓋區(qū)域（不等比）

　　　　　　　4.contain：背景圖擴(kuò)展完全覆蓋區(qū)域（等比）

2.margin的問題

　　（1）margin：auto auto； 為什么不能垂直居中

　　　　不支持上下 auto 因?yàn)轫撁嬷?難以確定的是高度

　　（2）margin和padding的區(qū)別

　　　　margin：需要在border外側(cè)添加空白時(shí)。需要相互抵消時(shí)。如15px + 20px的margin，將得到20px的空白。

　　　　padding：需要在border內(nèi)側(cè)添加空白。需要等于兩者之和。如15px + 20px的padding，將得到35px的空白。

　　（3）對(duì)內(nèi)聯(lián)元素上下邊距沒效果。

3.float的問題

　　（1）對(duì)后面p左漂流到上方p上面時(shí)，上方p內(nèi)文字會(huì)環(huán)繞漂流的p

　　　　與文檔流有關(guān)，詳見4

4.文檔流

　　是元素排版布局過程中，元素會(huì)自動(dòng)從左往右，從上往下的流式排列。

　　脫離文檔流，是將元素從普通的布局排版中拿走，塊元素定位的時(shí)候當(dāng)做漂流元素不存在。定位中的absolute和浮動(dòng)float會(huì)脫離文檔流。

　　　　部分無視：float脫離文檔流，其他盒子會(huì)無視這個(gè)元素，但盒子內(nèi)的內(nèi)聯(lián)元素會(huì)讓出漂流的位置，而環(huán)繞它存在。

　　　　完全無視：absolute脫離文檔流，其他盒子包括盒子內(nèi)內(nèi)聯(lián)元素會(huì)完全無視定位的元素。

Margin和 float不能同時(shí)用

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注Gxl網(wǎng)其它相關(guān)文章！

推薦閱讀：

Gulp命令生成精靈圖

Safari瀏覽器select下拉列表文字太長不換行的解決方法
BEM語法詳解

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com