如何在CSS中创建填充(Create Padding in CSS)？
CSS填充允许HTML编码者设置HTML元素外部的默认填充或死区。这样做的好处是，这样做可以避免编码人员为该元素的每个实例重复填充代码，并且更容易在页面上创建一致性。要填充的HTML元素可以是任意数量的，例如段落、表格或...
CSS填充允许HTML编码者设置HTML元素外部的默认填充或死区。这样做的好处是，这样做可以避免编码人员为该元素的每个实例重复填充代码，并且更容易在页面上创建一致性。要填充的HTML元素可以是任意数量的，例如段落、表格或标题。
CSS填充在大括号或大括号内要在CSS中创建填充，首先必须标识要填充的HTML元素。要填充的元素称为选择器。然后，您需要指定适当的填充值。CSS中有五种不同类型的填充属性-一次用于元素的所有四个边，元素的每一面（例如，左侧、右侧、顶部或底部）有四个值。允许程序员同时为HTML元素的所有四个边指定值的属性称为速记属性用来指定CSS填充的一个声明的编码语言就是单词"padding"。在这个标签后面是填充的相关"值"，或者是关于所需空间量的信息，通常用像素或百分比来表示。填充和值写在大括号或大括号内（例如，"{"和"}"）。所有这些之前是要填充的HTML元素（例如，段落的"p"或级别2标题的"H2"）或者用5cm表示像素值（例如，5cm）元素的大小。下面的示例是HTML代码，分别通过百分比和长度反映的值填充HTML元素。如果只分配了一个值，然后，web浏览器将把这个填充分配给HTML元素的所有四个边填料：10%；填料：100像素；在上面的填充声明类型中添加更多的值将导致web浏览器以某种方式解释它们。如果分配了两个值，第一个值将对应顶部和底部，而第二个值对应于左侧和右侧。三个值将导致第一个引用顶部，第二个指向左侧和右侧，以及第三个到HTML元素的底部。最多分配四个值会导致第一个、第二个、第三个和第四个值按顺序对应于HTML元素的顶部、右侧、底部和左侧当提供多个值时，它们应该用空格分隔，并以分号结尾，例如：填充：10px 20px10px 20px；填充在CSS中，也可以一次完成一个面。在这方面，还有四个可用的填充属性。它们是padding top、padding right、padding bottom和padding left。要以这种更精确的方式在CSS中创建填充，您需要使用与上面的速记声明相同的语法标记属性。每个其中的padding属性只接受长度或百分比中的一个值。例如：padding-顶部：10px；右侧填充：20px；填充-下：10px；左填充：20像素；下面的代码创建一个网页，声明样式标记之间的填充属性，然后在p标记指定的段落元素中使用它们。/*和*/之间的文本是注释，用于解释所使用的填充类型，不会包含在CSS填充代码中<；html>；<；head>；<；style type="text/css">；p示例1{填料：10px；}/*所有四个边都有简短的填充*/p。示例2{填料：50px 30px；}/*顶部和底部的简短填充，然后是左侧和右侧*/p。示例3{填充-顶部：10px；填充-底部：20px；填充底部：10px；填充-左：20px；}/*单个填充。*/<；/style>；<；/head>；<；body>；<；p class="example1">；此文本的每侧填充相同。每侧的填充为10px<；/p>；<；p class="example2">；此文本的上下填充为50px，左右填充为30px。<；/p>；<；p class="example3">；此文本的上填充为10px，右填充为20px，底部填充为10px，左填充为20px。<；/p>；lt；/body>；<；/html>；在上面的示例中，"example1"等是分配给类的名称，p标记和代码开头的类名之间的句点表示分配给段落的类的声明。请注意，类声明后面的大括号包含填充属性值赋值虽然这看起来是一项繁重的工作，但它比为每个单独的段落指定填充要少得多，然后在页面的body标记之间使用元素时引用类。如果所有段落只需要一种填充类型，则根本不需要使用类。只需在样式标记之间使用以下代码，然后在不指定任何类的情况下对段落进行编码{填充：10px 20px10像素20像素；}这将创建的CSS填充将影响所有段落，即使没有指定类。
CSS填充在大括号或大括号内要在CSS中创建填充，首先必须标识要填充的HTML元素。要填充的元素称为选择器。然后，您需要指定适当的填充值。CSS中有五种不同类型的填充属性-一次用于元素的所有四个边，元素的每一面（例如，左侧、右侧、顶部或底部）有四个值。允许程序员同时为HTML元素的所有四个边指定值的属性称为速记属性用来指定CSS填充的一个声明的编码语言就是单词"padding"。在这个标签后面是填充的相关"值"，或者是关于所需空间量的信息，通常用像素或百分比来表示。填充和值写在大括号或大括号内（例如，"{"和"}"）。所有这些之前是要填充的HTML元素（例如，段落的"p"或级别2标题的"H2"）或者用5cm表示像素值（例如，5cm）元素的大小。下面的示例是HTML代码，分别通过百分比和长度反映的值填充HTML元素。如果只分配了一个值，然后，web浏览器将把这个填充分配给HTML元素的所有四个边填料：10%；填料：100像素；在上面的填充声明类型中添加更多的值将导致web浏览器以某种方式解释它们。如果分配了两个值，第一个值将对应顶部和底部，而第二个值对应于左侧和右侧。三个值将导致第一个引用顶部，第二个指向左侧和右侧，以及第三个到HTML元素的底部。最多分配四个值会导致第一个、第二个、第三个和第四个值按顺序对应于HTML元素的顶部、右侧、底部和左侧当提供多个值时，它们应该用空格分隔，并以分号结尾，例如：填充：10px 20px10px 20px；填充在CSS中，也可以一次完成一个面。在这方面，还有四个可用的填充属性。它们是padding top、padding right、padding bottom和padding left。要以这种更精确的方式在CSS中创建填充，您需要使用与上面的速记声明相同的语法标记属性。每个其中的padding属性只接受长度或百分比中的一个值。例如：padding-顶部：10px；右侧填充：20px；填充-下：10px；左填充：20像素；下面的代码创建一个网页，声明样式标记之间的填充属性，然后在p标记指定的段落元素中使用它们。/*和*/之间的文本是注释，用于解释所使用的填充类型，不会包含在CSS填充代码中<；html>；<；head>；<；style type="text/css">；p示例1{填料：10px；}/*所有四个边都有简短的填充*/p。示例2{填料：50px 30px；}/*顶部和底部的简短填充，然后是左侧和右侧*/p。示例3{填充-顶部：10px；填充-底部：20px；填充底部：10px；填充-左：20px；}/*单个填充。*/<；/style>；<；/head>；<；body>；<；p class="example1">；此文本的每侧填充相同。每侧的填充为10px<；/p>；<；p class="example2">；此文本的上下填充为50px，左右填充为30px。<；/p>；<；p class="example3">；此文本的上填充为10px，右填充为20px，底部填充为10px，左填充为20px。<；/p>；lt；/body>；<；/html>；在上面的示例中，"example1"等是分配给类的名称，p标记和代码开头的类名之间的句点表示分配给段落的类的声明。请注意，类声明后面的大括号包含填充属性值赋值虽然这看起来是一项繁重的工作，但它比为每个单独的段落指定填充要少得多，然后在页面的body标记之间使用元素时引用类。如果所有段落只需要一种填充类型，则根本不需要使用类。只需在样式标记之间使用以下代码，然后在不指定任何类的情况下对段落进行编码{填充：10px 20px10像素20像素；}这将创建的CSS填充将影响所有段落，即使没有指定类。
- 发表于 2020-07-31 12:16
- 阅读 ( 853 )
- 分类：电脑网络
admin
0 篇文章
作家榜 »
-
xiaonan123
189 文章
-
汤依妹儿
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
华志健
23 文章