CSS中你不太了解的细节---（三）

1.定位position

1. relative 元素开启相对定位：
2. 如果不设置偏移量元素不会发生任何的变化,当元素开启了定位以后，可以通过偏移量来设置元素的位置。（top,bottom,left,right）设置后它的位置只会影响自己，不会影响别人，不存在把别的块元素挤下去。
3. 相对定位是参照于元素在文档流中的位置进行定位的。
4. 相对定位会提升元素的层级。4.相对定位不会使元素脱离文档流，相对定位不会改变元素的性质。
5. absolute 元素开启绝对定位：
6. 如果不设置偏移量元素的位置不会发生变化。
7. 元素会从文档流中脱离，绝对定位会改变元素的性质，行内变成块，块的宽度被内容撑开。
8. 绝对定位会使元素提升一个层级。
9. 绝对定位元素是相对于其包含块进行定位的。正常情况下，包含块就是离当前元素最近的祖先块元素。开启绝对定位的包含块：包含块就是离她最近的开启了定位的祖先元素。如果所有的祖先元素都没有开启定位则根元素就是它的包含块（html）。
10. fixed 元素开启固定定位：
11. 固定定位也是一种绝对定位，所以固定定位的大部分特点都和绝对定位一样，唯一不同的是固定定位永远参照于浏览器的视口进行定位。
12. sticky 元素开启粘滞定位：
13. 粘滞定位和相对定位的特点基本一致，不同点是粘滞定位可以在元素到达某个位置时将其固定（position:sticky; top:100px）。·

2.弹性盒flex

1. 是CSS的又一种布局手段，它主要用来代替浮动来完成页面的布局。
2. flex可以是元素具有弹性，让元素可以跟随页面的大小的改变而改变。
3. 弹性容器：要使用弹性盒，必须先将一个元素设置为弹性容器，我们通过 display来设置弹性容器。display:flex 设置块级弹性容器。display:inline-flex 设置为行内的弹性容器。
4. 弹性元素：弹性容器的子元素是弹性元素，弹性元素可以同时是弹性容器。
5. flex-direction 指定容器中弹性元素的排列方式，可选值如下：
6. row 默认值，弹性元素在容器中水平排列（左向右） -主轴 自左向右。
7. row-reverse 弹性元素在容器中反向水平排列（右向左） -主轴 自右向左。
8. column 弹性元素纵向排列（自上向下）。
9. column-reverse 弹性元素方向纵向排列（自下向上）。
10. 主轴：弹性元素的排列方向称为主轴。
11. 侧轴：与主轴垂直方向的称为侧轴。
12. 弹性元素的属性：
13. flex-grow 指定弹性元素的伸展系数，当父元素有多余空间时，子元素如何伸展，父元素的剩余空间，会按照比例进行分配。
14. flex-shrink 指定弹性元素的收缩系数，当父元素中的空间不足以容纳所有的子元素时，对子元素进行收缩。
15. 弹性容器上的样式：
16. flex-wrap 设置弹性元素是否在弹性容器中自动换行 可选值：nowrap 默认值，元素不会自动换行；wrap 元素沿着辅轴方向自动换行；wrap-reverse 元素沿着辅轴反方向换行
17. justify-content 如何分配主轴上的空白空间（主轴上的元素如何排列） 可选值：flex-start 元素沿着主轴起边排列；flex-end 元素沿着主轴终边排列； center 元素居中排列；space-around 空白分布到元素两侧；space-evenly 空白分布到元素的单侧。

3.像素

1. 屏幕是由一个一个发光的小点构成，这一个个的小点就是像素。
2. 分辨率：1920*1080说的就是屏幕中小点的数量。
3. 在前端开发中像素要分成两种情况讨论：CSS像素和物理像素。
4. 物理像素，上述所说的小点点就属于物理像素。
5. CSS像素，编写网页时，我们所用像素都是CSS像素。浏览器在显式网页时，需要将CSS像素转换为物理像素然后再呈现。一个CSS像素最终由几个物理像素显式，由浏览器决定，默认情况下在pc端，一个css像素=一个物理像素。

4.视口

1. 视口就是屏幕中用来显示网页的区域。
2. 可以通过查看视口的大小，来观察CSS像素和物理像素的比值。
3. 默认情况下：视口宽度 1920px（CSS像素），1920px（物理像素） 此时，css像素和物理像素的比是1:1。
4. 放大两倍的情况：视口宽度 960px（CSS像素），1920px（物理像素） 此时，css像素和物理像素的比是1:2。