本文主要包含CSS,盒模型等相关知识,佚名 希望在学习及工作中可以帮助到您
盒子是CSS中的基础概念，我们需要使用它来配置元素的外观以及文档的整体布局。
1. 为元素应用内边距
应用内边距会在元素内容和边距之间添加空白。我们可以为内容盒的每个边界单独设置内边距，或者使用 padding 简写属性在一条声明中设置所有的值。
如果使用百分数值指定内边距，百分数总是根包含块的宽度相关，高度不考虑在内。下面代码展示了如何为元素应用内边距。
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Example</title>
- <style type="text/css">
- p {
- border:10px double black;
- background-color: lightgray;
- background-clip: content-box;
- width: 380px;
- padding-top: 0.5em;
- padding-bottom: 0.3em;
- padding-left: 0.8em;
- padding-right: 0.6em;
- }
- </style>
- </head>
- <body>
- <div>
- <p>
- 15岁的时候再得到那个5岁的时候热爱的布娃娃，65岁的时候终于有钱买25岁的时候热爱的那条裙子，又有什么意义。
- 什么都可以从头再来，只有青春不能。
- 那么多事情，跟青春绑在一起就是美好，离开青春，就是傻冒。
- </p>
- </div>
- </body>
- </html>
在代码中，为盒子的每条边应用了不同的内边距，从下面的效果图可以看出效果。此外，设置了 background-clip 属性，因此内边距区域不会显示背景颜色，这样可以突出内边距的效果。
也可以使用 padding 简写属性在一条声明中为四条边设置内边距。可以为这个属性指定1~4 个值。 如果指定4个值，那么它们分别代表顶边、右边、底边和左边的内边距。如果省略一个值，则最佳搭配方案如下：省略左边的值，默认使用右边的值；省略底边的值，默认使用顶边的值。如果只给一个值，则四条边的内边距都是这个值。
下面代码清单展示了如何使用 padding 简写属性。这个示例中还添加了圆角边框，展示了如何使用paddding以确保边框不会在元素内容之上。
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Example</title>
- <style type="text/css">
- p {
- &n