HTML背景及邊距設置

1.背景設置

背景樣式 background背景顏色 background-color:顏色值;背景圖片 background-image:url("圖片路徑")背景圖片平鋪 background-repeat: repeat-x(沿著x軸平鋪) | repeat-y(沿著Y軸平鋪) | no-repeat(不平鋪);背景圖片定位 background-position: x y;x軸：支持left center right 支持百分比y軸：支持top center bottom 支持百分比背景圖片尺寸 background-size: x y | cover |contain;background:復合寫法background:background-color background-image background-position background-repeat background: url("1.jpg") 0px 0px /100px 100px no-repeat ,url("2.jpg") 100px 100px no-repeat gold ;

2.外邊距

外邊距 margin左邊距 margin-left:數值 | auto右邊距 margin-right:數值 | auto上邊距 margin-top下邊距 margin-bottom外邊距 復合寫法1:margin: 0px(上) 0px(右) 0px(下) 0px(左)2:margin: 0px(上) 0px(左右) 0px(下)3:margin: 0px(上下邊距) 0px(左右邊距)4:margin: 0px (上下左右邊距都是0px)

2.1外邊距有坑

坑1:同級結構下，外邊距沖突的情況下，誰的數值大，就采用誰的。 坑2:父子結構下，父級與子級存在都設置上邊距的情況下，父級沒有設置border...,子級的外邊距會引出"塌陷的"問題。盒模型：構成：容器尺寸+padding+border+margin .div1{width: 300px;height: 300px;border: 4px #eef0f0 solid;margin-top: 50px;}.div2{width: 200px;height: 200px;background: blue;margin-top: 60px;border: 1px white solid;}.div3{width: 100px;height: 100px;background-color: gold;margin-top: 70px;}.hezi{width: 400px;height: 200px;background-color: #eef0f0;border: 50px black solid;padding: 50px;margin: 50px;}

3.內邊距

內邊距 padding左內距 padding-left:數值右內距 padding-right:數值上內距 padding-top下內距 padding-bottom內邊距 復合寫法1:padding: 0px(上) 0px(右) 0px(下) 0px(左)2:padding: 0px(上) 0px(左右) 0px(下)3:padding: 0px(上下邊距) 0px(左右邊距)4:padding: 0px (上下左右邊距都是0px)

總結

以上是生活随笔為你收集整理的HTML背景及边距设置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。