CSS Padding填充

SS Padding（填充）屬性定義元素邊框與元素內(nèi)容之間的空間。

Padding（填充）

當(dāng)元素的 Padding（填充）（內(nèi)邊距）被清除時，所"釋放"的區(qū)域?qū)艿皆乇尘邦伾奶畛洹?/p>

單獨(dú)使用填充屬性可以改變上下左右的填充。縮寫填充屬性也可以使用，一旦改變一切都改變。

可能的值

值	說明
length	定義一個固定的填充(像素, pt, em,等)
%	使用百分比值定義一個填充

填充- 單邊內(nèi)邊距屬性

在CSS中，它可以指定不同的側(cè)面不同的填充：

實(shí)例

padding-top:25px;

padding-bottom:25px;

padding-right:50px;

padding-left:50px;

填充 - 簡寫屬性

為了縮短代碼，它可以在一個屬性中指定的所有填充屬性。

這就是所謂的縮寫屬性。所有的填充屬性的縮寫屬性是"padding":

實(shí)例

padding:25px 50px;

嘗試一下 ?

Padding屬性，可以有一到四個值。

padding:25px 50px 75px 100px;

上填充為25px
右填充為50px
下填充為75px
左填充為100px

padding:25px 50px 75px;

上填充為25px
左右填充為50px
下填充為75px

padding:25px 50px;

上下填充為25px
左右填充為50px

padding:25px;

所有的填充都是25px

更多實(shí)例

在一個聲明中的所有填充屬性

這個例子演示了使用縮寫屬性設(shè)置在一個聲明中的所有填充屬性，可以有一到四個值。

設(shè)置左部填充

這個例子演示了如何設(shè)置元素左填充。

設(shè)置右部填充

這個例子演示了如何設(shè)置元素右填充。.

設(shè)置上部填充

這個例子演示了如何設(shè)置元素上填充。

設(shè)置下部填充

這個例子演示了如何設(shè)置元素下填充。

所有的CSS填充屬性

屬性	說明
padding	使用縮寫屬性設(shè)置在一個聲明中的所有填充屬性
padding-bottom	設(shè)置元素的底部填充
padding-left	設(shè)置元素的左部填充
padding-right	設(shè)置元素的右部填充
padding-top	設(shè)置元素的頂部填充

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

頁美工培訓(xùn)機(jī)構(gòu)教你用讓背景圖片拉伸填充的css屬性，比如一個容器(body,div,span)中設(shè)定一個背景。這個背景的長寬值在css2.1之前是不能被修改的。

所以實(shí)際的結(jié)果是只能重復(fù)顯示，所以出現(xiàn)了repeat,repeat-x,repeat-y,no-repeat這些屬性。就是用來

控制背景圖片的顯示的。所以一般用作背景圖片的有2類：

1.是一整張大圖，尺寸和區(qū)域大小剛好吻合

2.一個很小的條狀圖，通過repeat后，形成一個很規(guī)則的大圖背景。

但是css3出現(xiàn)以后，這個情況被改善了。background-size 屬性可以讓我們之前的希望成真。

而且這個屬性在firefox，chrome，以及ie9上都可以使用。

具體使用方法如下：（上海網(wǎng)頁美工設(shè)計(jì)培訓(xùn)）

背景圖尺寸(數(shù)值表示方式)：

#background-size{

background-size:200px 100px;

}

迎點(diǎn)擊右上角關(guān)注小編，除了分享技術(shù)文章之外還有很多福利，私信學(xué)習(xí)資料可以領(lǐng)取包括不限于Python實(shí)戰(zhàn)演練、PDF電子文檔、面試集錦、學(xué)習(xí)資料等。

前言

將圖片的每個像素用文字代替，最后生成一個HTML文檔，在瀏覽器中可以顯示出圖像，只不過圖像全是由文字組成的。

實(shí)現(xiàn)這樣的效果并不復(fù)雜，只不過是用標(biāo)簽代替像素而已，接下來我會演示如何用 PIL/Pillow 庫去實(shí)現(xiàn)這樣的效果。

PIL 圖像處理庫

PIL（Python Imaging Library）是 Python 平臺的圖像處理標(biāo)準(zhǔn)庫。不過 PIL 暫不支持 Python3，可以用 Pillow 代替，API是相同的。

安裝 PIL 庫

如果你安裝了 pip 的話可以直接輸入 pip install PIL 命令安裝 Pillow。

或者在 PyCharm 中打開 [File] >> [settings] >> [project github] >> [project interpreter] 添加標(biāo)準(zhǔn)庫：

PIL 使用方法

圖片處理過程

圖片轉(zhuǎn)換成網(wǎng)頁的過程，可以分成五個步驟。首先要選擇一個合適的HTML模板，控制好字體的大小和字符間的間距。

然后通過 Python 的網(wǎng)絡(luò)訪問模塊，根據(jù)URL獲取圖片。接著使用 PIL 模塊載入二進(jìn)制圖片，將圖片壓縮到合適的尺寸。

遍歷圖片的每一個像素，得到該像素的顏色值，應(yīng)用到HTML的標(biāo)簽上。最后把字符串信息輸出到文件中，生成HTML文檔。

定制模板

大括號代表一個占位符，最后會被替換成實(shí)際內(nèi)容，雙大括號中的內(nèi)容則不會被替換。

獲取圖片

通過 URL 得到 byte 數(shù)組形式的圖片。

from urllib import request
url = 'https://pic.cnblogs.com/avatar/875028/20160405220401.png'
binary = request.urlopen(url).read()

處理圖片

byte 類型的圖片需要通過 BytesIO 轉(zhuǎn)換為 string 類型，才能被 PIL 處理。

from PIL import Image
from io import BytesIO
img = Image.open(BytesIO(binary))
img.thumbnail((100, 100)) # 圖片壓縮

生成HTML

使用<font>標(biāo)簽包裹文字，并根據(jù)相應(yīng)像素的RGB值，設(shè)置<font>標(biāo)簽的color屬性。

piexl = img.load() # 獲取像素信息
width, height = img.size # 獲取圖像尺寸
body, word = '', '博客園'
font = '<font color="{color}">{word}</font>'
for y in range(height):
 for x in range(width):
 r, g, b = piexl[x, y] # 獲取像素RGB值
 body += font.format(
 color='#{:02x}{:02x}{:02x}'.format(r, g, b),
 word=word[((y * width + x) % len(word))]
 )
 body += '\n<br />\n'

導(dǎo)出網(wǎng)頁

向HTML模板中填充處理完成的數(shù)據(jù)，使用文件流將字符串以utf8格式輸出到文檔。

html = TEMPLATE.format(title=word, body=body)
fo = open('index.html', 'w', encoding='utf8')
fo.write(html)
fo.close()

img2html

wo把上面五個步驟封裝了起來，這樣一來就可以很方便的調(diào)用了。

from io import BytesIO
from PIL import Image
from PIL import ImageFilter
from urllib import request
TEMPLATE = '''
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>{title}</title>
 <style>
 body {{
 line-height: 1em;
 letter-spacing: 0;
 font-size: 0.6rem;
 background: black;
 text-align: center;
 min-width: {size}em;
 }}
 </style>
</head>
<body>
 {body}
</body>
</html>
'''
class Converter(object):
 def __init__(self, word='田', size=100):
 self.word, self.size = word, size
 self.font = '<font color="{color}">{word}</font>'
 # 讀取url內(nèi)容
 def __network(self, url):
 return request.urlopen(url).read()
 # 處理圖片信息
 def __handle(self, binary):
 img = Image.open(BytesIO(binary)) # 打開制圖片
 img.thumbnail((self.size, self.size)) # 壓縮圖片
 img.filter(ImageFilter.DETAIL) # 圖片增強(qiáng)
 return img
 # 分析圖片像素
 def __analysis(self, img):
 body = ''
 piexls = img.load()
 width, height = img.size
 for y in range(height):
 for x in range(width):
 r, g, b = piexls[x, y]
 body += self.font.format(
 color='#{:02x}{:02x}{:02x}'.format(r, g, b),
 word=self.word[((y * width + x) % len(self.word))]
 )
 body += '\n<br />\n'
 return body
 # 寫入文件內(nèi)容
 def __writefile(self, file, str):
 fo = open(file, 'w', encoding='utf8')
 try:
 fo.write(str)
 except IOError:
 raise Exception
 finally:
 fo.close()
 # 生成html文檔
 def buildDOC(self, url, output):
 try:
 binary = self.__network(url)
 img = self.__handle(binary)
 html = TEMPLATE.format(
 title=self.word,
 body=self.__analysis(img),
 size=self.size
 ) # 向模板中填充數(shù)據(jù)
 self.__writefile(output, html)
 except Exception as err:
 print('Error:', err)
 return False
 else:
 print('Successful!')
 return True

導(dǎo)入 img2html.Converter，調(diào)用 buildDOC(url, out) 方法

程序會在當(dāng)前目錄生成 index.html 文件，需要用瀏覽器打開后才可以看到效果。

from img2html import Converter
conv = Converter('卷福', 120)
url = 'http://www.sznews.com/ent/images/attachement/jpg/site3/20140215/001e4f9d7bf91469078115.jpg'
out = 'index.html'
conv.buildDOC(url, out)

轉(zhuǎn)換效果

在線咨詢

上一篇：WebView制作簡易的頁面訪問
下一篇：什么是CSS？

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。