HTML背景及边距设置
生活随笔
收集整理的這篇文章主要介紹了
HTML背景及边距设置
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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背景及边距设置的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Python 人工智能:16~20
- 下一篇: xpath用于HTML文档通过元素,理解