定位（position）/背景颜色

 定位

默认定位（static）

这个属性在css中用于DOM元素，修改DOM的布局

假如我们并没有设置任何position属性浏览器会自动为所有DOM元素，添加position:static

相对定位（relative）

如果我们想在当前位置进行偏移，同时不影响整体页面布局。可以使用 relative

当我们想要将图片向下偏移时

.first {
  position: relative;
  left: 50px;
  top: 50px;
}

left:50px，表示距离原来的位置左侧50px,

top:500px,表示距离原来位置的顶部50px。

但是其无论是left,right,top,bottom,的调整都是相对于当前元素static的位置布局进行调整的。

绝对定位（absolute）

相对定位并没有脱离文档流，但是绝对定位脱离了文档流。

相对定位相对于其默认的定位，但是绝对定位并不是。

1.文档第一张下面的所有 DOM元素，自动往上移动占据了第一张图片的位置，文档流(布局) 已经没有为第一张图预留空间了
2.第一张图片脱离了文档流，变成了第二个图层，再在新的图层中往右下偏移 50px。

在MND中

绝对定位absolute，表示不为元素预留空间，通过指定元素相对于最近的非static定位祖先元素的偏移，，来确定元素位置。

标注：cursor:pointer可以让我们鼠标停留在元素上，变成可点击的形状。

形式诸如：

 position: absolute;

  right: 0px;

  top: 0px;

固定定位（fixed）

固定定位与绝对定位类似，但元素的包含块为屏幕视口。

固定定位不为元素预留空间，而是通过指定元素相对于屏幕视口(viewport)的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。

fixed中的使用跟上面相同都有着top,,bottom,left,,right之分。

如果标题被 固定后在移动时被遮挡。可以通过z-index来解决。

z--index可以改变不同图层的优先级。

1.默认非 static 元素的 z-index 都为0.

2.z-index 越大，则越在最上面，离观察者越近

3.同样的 z-index，在HTML 中的元素越靠后，则越在最上面，离观察者越近

粘性布局（sticky）

我们设置的标签随之滚动的距离是我们所设置的top,,bottom,left,right。当到达这个值时便固定到原位置不动。

Float

float 是 CSS 中最常用的布局属性，使用他可以让元素靠左或者靠右排版.

nav表示此区块是导航区块,main表示这块是网页的主体区域。

背景颜色

渐变方向

渐变方向使用的语义化英文实现，具体有如下值
 to right / to left                                  向右/向左

 to top / to bottom                              向上/向下渐变
 to right bottom / to right top              向右下/向右上渐变
 to left bottom / to left top                   向左下/向左上渐变

xxxdeg      xxx范围（0到360）          更精确的渐变方向

渐变位置

渐变不一定是从开始到结束，我们可以设置各种中间状态。

 们可以在每个色值后面跟一个值 百分比，PX，来约定变色起止位置。

背景图片

使用background-image：url(xxxxx);图片地址不需要引号包裹

1.背景出现重复

当背景图片长宽任意一项小于容器的长宽，默认 CSS 会让图片重复，直到铺满整个容器位置。

可以使用background-repeat:no-repeat；禁止图片的重复。

repeat                         这是默认值，如果背景图片比容器小，将在垂直和水平方向进行重复

repeat-x                        背景图片只在水平方向重复

repeat-y                        背景图片只在垂直方向重复

no-repeat                 背景图片将只显示一次，不重复

2.背景图片不居中

默认情况下，背景图片是从容器的左上角开始布局，为了使容器垂直水平居中，我们可以使用 background-position: center;解决。

高级特性

背景图片充满整个容器框

（以上图片仅供个人学习，诺侵权联系删除）

cover 就是满足图片长宽中较小的一方撑满屏幕。 contain 就是满足图片长宽中较大的一方撑满屏幕。

background合并写法

可以将

background-image: url(https://style.youkeda.com/img/ykd-components/logo.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;

合并为

  background: url(https://style.youkeda.com/img/ykd-components/logo.png)
    no-repeat center / contain;