margin float背景圖如何使用

這次帶給大家margin float背景圖如何使用，使用margin float背景圖的注意事項有哪些，下面就是實戰案例，一起來看一下。

今天來整理一下做網頁遇到的問題吧

#1.插入背景圖片並使圖片居於p底部充滿整個行。

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

　　屬性：

　　　background-position：背景位置屬性用來設定背景圖片的位置，這個屬性只能應用於區塊級元素和替換元素。其中替換元素包括img、input、textarea、select。

　　　　　語法取值有兩種：長度和關鍵字。

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

　　　　　　　　關鍵字：top left （左上）top center（上居中）等，第二個值不設預設為居中。

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

　　　　　屬性值1.length ：第一個值是寬度，第二個值是高度，如果只設定第一個值，那麼第二個值會自動轉換為“ auto”

　　　　　　　　2.percentage：以父元素的百分比來設定圖片的寬度和高度，第一個值是寬度，第二個值是高度。如果只設定一個值，那麼第二個值就會被設定為 “auto”。

　　　　　　　3.cover ：背景圖擴展完全覆蓋區域（不等比）

##　　　　　　　4. ##背景圖擴充功能完全覆蓋區域（等比）

#2.margin的問題

　　（1）margin：auto auto; 為什麼不能垂直居中

#　　　　不支援上下 auto 因為頁面中 難以確定的是高度

#　　（2）margin和padding的差異#

　　　　margin：需要在border外側新增空白時。需要相互抵消時。如15px + 20px的margin，將得到20px的空白。

　　　　padding：需要在border內側增加空白。需要等於兩者之和。如15px + 20px的padding，將得到35px的空白。

　　（3）對內嵌元素上下邊距沒效果。

3.float的問題

　　（1）對後面p左漂流到上方p上面時，上方p內文字會環繞漂流的p

#　　　　與文件流程有關，詳見4

4.文件流程

##########　　是元素排版佈局過程中，元素會自動由左往右，從上往下的流式排列。 ##############################　　脫離文件流，是將元素從普通的佈局排版中拿走，區塊元素定位的時候當做漂流元素不存在。定位中的absolute和浮動float會脫離文件流。 ##############################　　　　部分無視：float脫離文檔流，其他盒子會無視這個元素，但盒子內的內聯元素會讓出漂流的位置，而環繞它存在。 ################

　　　　完全無視：absolute脫離文件流，其他盒子包括盒子內內聯元素會完全無視定位的元素。

Margin和float不能同時用  

##### ####相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！ ######推薦閱讀：#########Gulp指令產生精靈圖################Safari瀏覽器select下拉清單文字太長不換行的解決方法#####################BEM語法詳解#########

以上是margin float背景圖如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！