CSS(二)

边距:

每个 HTML 元素所占有的矩形空间由这三个重要的属性来控制：内边距 padding、外边距 margin 、边框 border。
通过控制这些来帮助你调节位置文本与边框,边框与边框之间的位置关系。
padding 用来控制着元素内容与 border 之间的空隙大小
如果你增加 padding 值，其中的文本内容与边框的距离就也会变大。

margin 用来控制元素的边框与其他元素之间的 border 距离。
如果 margin 值，它也会增加元素边框到其他周围元素的距离。

1.给元素的每一侧添加不同的内边距

CSS 允许你使用 padding-top、padding-right、padding-bottom、padding-left 属性来设置四个不同方向的 padding 值。

.blue-box {
    padding-top:40px;
    padding-left:40px;
    padding-bottom:20px;
    padding-right:20px;
  }

2.给元素的每一侧添加不同的外边距

CSS 允许你使用 margin-top、margin-right、margin-bottom、margin-left 属性来设置四个不同方向的 margin 值。

.blue-box {
    margin-top:40px;
    margin-left:40px;
    margin-bottom:20px;
    margin-right:20px;
  }

3.使用顺时针标记指定元素的内边距

如果不想每次都要分别声明 padding-top、padding-right、padding-bottom、padding-left 属性，可以把它们汇总在一行里面一并声明，像是这样：

padding: 10px 20px 10px 20px;

4.使用顺时针标记指定元素的外边距

同样，每个方向的外边距值可以在一行里面汇总声明，而无需分别通过 margin-top、margin-right、margin-bottom、margin-left

margin: 10px 20px 10px 20px;

5.属性选择器来设置元素的样式

我们已经通过设置元素的 id 和 class 来显示想要的样式。 这就是 ID 选择器和 Class 选择器。 另外，也还有其他的 CSS 选择器可以让我们给特定的元素设置样式。
例如，下面的代码会改变所有 type 为 radio 的元素的外边距。
放在<style>

[type='radio'] {
  margin: 20px 0px 20px 0px;
}

6.绝对单位与相对单位

像素是一个长度单位，它告诉浏览器应该如何调整元素的大小和位置。 其实除了 px，CSS 也有其他单位供我们使用。

单位长度的类型可以分成 2 种：相对和绝对。 绝对单位与长度的物理单位相关。 例如，in 和 mm 分别代表着英寸和毫米。 绝对长度单位会接近屏幕上的实际测量值，不过不同屏幕的分辨率会存在差异，这就可能会造成误差。

相对单位长度，比如 em 和 rem，它们的实际值会依赖其他长度的值而决定。 比如 em 的大小基于元素字体的字体大小。 如果使用它来设置 font-size 值，它的值会跟随父元素的 font-size 值来改变。