CSS Padding填充

SS Padding（填充）属性定义元素边框与元素内容之间的空间。

Padding（填充）

当元素的 Padding（填充）（内边距）被清除时，所"释放"的区域将会受到元素背景颜色的填充。

单独使用填充属性可以改变上下左右的填充。缩写填充属性也可以使用，一旦改变一切都改变。

可能的值

值	说明
length	定义一个固定的填充(像素, pt, em,等)
%	使用百分比值定义一个填充

填充- 单边内边距属性

在CSS中，它可以指定不同的侧面不同的填充：

实例

padding-top:25px;

padding-bottom:25px;

padding-right:50px;

padding-left:50px;

填充 - 简写属性

为了缩短代码，它可以在一个属性中指定的所有填充属性。

这就是所谓的缩写属性。所有的填充属性的缩写属性是"padding":

实例

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

更多实例

在一个声明中的所有填充属性

这个例子演示了使用缩写属性设置在一个声明中的所有填充属性，可以有一到四个值。

设置左部填充

这个例子演示了如何设置元素左填充。

设置右部填充

这个例子演示了如何设置元素右填充。.

设置上部填充

这个例子演示了如何设置元素上填充。

设置下部填充

这个例子演示了如何设置元素下填充。

所有的CSS填充属性

属性	说明
padding	使用缩写属性设置在一个声明中的所有填充属性
padding-bottom	设置元素的底部填充
padding-left	设置元素的左部填充
padding-right	设置元素的右部填充
padding-top	设置元素的顶部填充

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

页美工培训机构教你用让背景图片拉伸填充的css属性，比如一个容器(body,div,span)中设定一个背景。这个背景的长宽值在css2.1之前是不能被修改的。

所以实际的结果是只能重复显示，所以出现了repeat,repeat-x,repeat-y,no-repeat这些属性。就是用来

控制背景图片的显示的。所以一般用作背景图片的有2类：

1.是一整张大图，尺寸和区域大小刚好吻合

2.一个很小的条状图，通过repeat后，形成一个很规则的大图背景。

但是css3出现以后，这个情况被改善了。background-size 属性可以让我们之前的希望成真。

而且这个属性在firefox，chrome，以及ie9上都可以使用。

具体使用方法如下：（上海网页美工设计培训）

背景图尺寸(数值表示方式)：

#background-size{

background-size:200px 100px;

}

迎点击右上角关注小编，除了分享技术文章之外还有很多福利，私信学习资料可以领取包括不限于Python实战演练、PDF电子文档、面试集锦、学习资料等。

前言

将图片的每个像素用文字代替，最后生成一个HTML文档，在浏览器中可以显示出图像，只不过图像全是由文字组成的。

实现这样的效果并不复杂，只不过是用标签代替像素而已，接下来我会演示如何用 PIL/Pillow 库去实现这样的效果。

PIL 图像处理库

PIL（Python Imaging Library）是 Python 平台的图像处理标准库。不过 PIL 暂不支持 Python3，可以用 Pillow 代替，API是相同的。

安装 PIL 库

如果你安装了 pip 的话可以直接输入 pip install PIL 命令安装 Pillow。

或者在 PyCharm 中打开 [File] >> [settings] >> [project github] >> [project interpreter] 添加标准库：

PIL 使用方法

图片处理过程

图片转换成网页的过程，可以分成五个步骤。首先要选择一个合适的HTML模板，控制好字体的大小和字符间的间距。

然后通过 Python 的网络访问模块，根据URL获取图片。接着使用 PIL 模块载入二进制图片，将图片压缩到合适的尺寸。

遍历图片的每一个像素，得到该像素的颜色值，应用到HTML的标签上。最后把字符串信息输出到文件中，生成HTML文档。

定制模板

大括号代表一个占位符，最后会被替换成实际内容，双大括号中的内容则不会被替换。

获取图片

通过 URL 得到 byte 数组形式的图片。

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

处理图片

byte 类型的图片需要通过 BytesIO 转换为 string 类型，才能被 PIL 处理。

from PIL import Image
from io import BytesIO
img = Image.open(BytesIO(binary))
img.thumbnail((100, 100)) # 图片压缩

生成HTML

使用<font>标签包裹文字，并根据相应像素的RGB值，设置<font>标签的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'

导出网页

向HTML模板中填充处理完成的数据，使用文件流将字符串以utf8格式输出到文档。

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

img2html

wo把上面五个步骤封装了起来，这样一来就可以很方便的调用了。

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内容
 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) # 图片增强
 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
 # 写入文件内容
 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
 ) # 向模板中填充数据
 self.__writefile(output, html)
 except Exception as err:
 print('Error:', err)
 return False
 else:
 print('Successful!')
 return True

导入 img2html.Converter，调用 buildDOC(url, out) 方法

程序会在当前目录生成 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)

转换效果

在线咨询

上一篇：WebView制作简易的页面访问
下一篇：什么是CSS？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。