CSS基础_Day03

CSS基础

一、给 div 元素添加背景色

background-color 属性可以设置元素的背景颜色。

.green-background {
  background-color: green;
}

二、元素

1.设置元素的 id

除了 class 属性，每一个 HTML 元素都有一个 id 属性。
使用 id 有几个好处：你可以通过 id 选择器来改变单个元素的样式。
根据规范，id 属性应是唯一的。 尽管浏览器并非必须执行这条规范，但这是广泛认可的最佳实践。 因此，请不要给多个元素设置相同的 id。

<h2 id="cat-photo-app">

2.使用 id 属性来设定元素的样式

通过 id 属性，你可以做一些很酷的事情。就像 class 一样，你可以使用 CSS 来设置他们的样式。

不过，id 不可以重复，它只能作用于一个元素上。 如果一个元素同时应用了 class 和 id，且两者设置的样式有冲突，会优先应用 id 中所设置的样式。

选择 id 为 cat-photo-element 的元素，并设置它的背景颜色为绿色。 可以在 style 标签里这样写：

#cat-photo-element {
  background-color: green;
}

注意在 style 标签里，声明 class 的时候必须在名字前插入 . 符号。 同样，在声明 id 的时候，也必须在名字前插入 # 符号。

3.元素边框

1.调整元素的内边距
每个 HTML 元素所占有的矩形空间由这三个重要的属性来控制：内边距 padding、外边距 margin 、边框 border。
padding 用来控制着元素内容与 border 之间的空隙大小。

.red-box {
    border:20px;
  }

2.调整元素的外边距
外边距 margin 用来控制元素的边框与其他元素之间的 border 距离。

.blue-box {
  margin: 20px;
}

3.给元素添加负外边距
元素的 margin（外边距） 用来控制元素 border（边框） 与其周围元素之间的距离大小。
如果你把元素的 margin 设置为负值，元素会变得占用更多空间。

.blue-box {
    margin: -15px;
  }

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

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

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

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

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

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

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

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

padding: 10px 20px 10px 20px;

这四个值按顺时针排序：上、右、下、左，并且设置的效果等同于分别声明每一个方向的内边距。

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

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

margin: 10px 20px 10px 20px;

这四个值按顺时针排序：上、右、下、左，并且设置的效果等同于分别声明每一个方向的外边距值。

三、使用属性选择器来设置元素的样式

使用 [attr=value] 属性选择器来修改样式.这个选择器使用特定的属性值来匹配和设置元素样式。
下面的代码会改变所有 type 为 radio 的元素的外边距。

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

四、理解绝对单位与相对单位

单位长度的类型可以分成 2 种：相对和绝对。
绝对单位与长度的物理单位相关。 例如，in 和 mm 分别代表着英寸和毫米。 绝对长度单位会接近屏幕上的实际测量值，不过不同屏幕的分辨率会存在差异，这就可能会造成误差。
相对单位长度，比如 em 和 rem，它们的实际值会依赖其他长度的值而决定。 比如 em 的大小基于元素字体的字体大小。 如果使用它来设置 font-size 值，它的值会跟随父元素的 font-size 值来改变。
*Note：*有些单位长度选项是相对视窗大小来改变值的， 这种设定符合响应式网页设计的原则。

.red-box {
    padding:1.5em;//相对单位
  }

谢谢你的坚持阅读ovo哟，让我们一起加油吖