Web前端HTML5+CSS3知识点（11)css入门--弹性盒

1. flex（弹性盒、伸缩盒）

简介
弹性盒是css中的又一种布局手段，它主要用来代替浮动来完成页面的布局。
flex可以使元素具有弹性，可以让元素根据页面大小的改变而改变。
弹性容器（想象为弹簧，可伸可谈） 使用了flex可以不用float 解决了很多问题。
要设置弹性盒，必须先将一个元素设置为弹性容器。
我们通过 display来设置弹性容器
display：flex：设置为块级的弹性容器
display：inline-flex：设置为行内的弹性容器（用的少）
弹性元素
弹性容器的子元素是弹性元素(弹性项）
一个元素可以同时是弹性容器和弹性元素。

注意：直接子元素。如ul下面的li

fleax的属性
fleax-direction：指定弹性容器中元素的排列方式。 可选值有：row（默认值、表示弹性元素在容器中从左向右水平排列,相当于float left）、row-reverse（表示弹性元素在容器中从右向左水平排列）、column（弹性元素纵向排列，自上向下）、column-reverse（自下向上纵向排列）。
fleax-grow:  指定弹性元素的伸展系数, 即指定当父元素容器右多余的空间时，子元素如何伸展。父元素的剩余空间，会按照比例进行分配。作用在弹性项,相对于权重。如：

li:nth-child(1){
    flex-grow:1,
}
li:nth-child(2){
    flex-grow:2,
}
li:nth-child(3){
    flex-grow:3,
}

fleax-shrink：指定弹性元素的收缩系数。当父元素中的空间不足以容纳所有的子元素时，如何对子元素进行收缩。同上。
主轴和侧轴
主轴：弹性元素的排列方向
侧轴：与主轴垂直的方向称为侧轴

2. 弹性容器上的样式

flex-wrap
设置当弹性容器空间不足时，弹性元素在容器中是否会自动换行
可选值：nowrap（默认值，元素不会自动换行)、wrap（元素沿着侧轴自动换行)、wrap-reverse（沿着侧轴反方向换行)
flex-flow
这是flex-wrap和flex-direction的简写属性，可以同时设置两个值
        例：flex-flow: row wrap；
justify-content（justify主轴）
如何分配主轴上的空白空间（主轴上的弹性元素如何排列的属性）
可选值：flex-strat(默认值、从主轴起始边开始排列）、flex-end(从主轴终边开始排列）、center(从中间向两侧排列，用的多)、space-around（将空白分配到元素两侧）、space-evenly （空白分布到元素的单侧）、space-between(将空白均匀分配到元素的中间)
align-items（align侧轴）
元素在侧轴上如何对齐，设置的是元素间的关系
可选值：stretch（默认值、将相同一行的所有元素的值设置成相同的值）、flex-start（元素不会拉伸、会沿着侧轴起边对齐)、flex-end(沿着侧轴的终边对齐)、center（居中对齐）、baseline（基线对齐)
align-content（align侧轴）
如何分配侧轴上的空白空间（侧轴上的弹性元素如何排列的属性）
可选值：stretch（拉伸元素、flex-strat(从侧轴起始边开始排列）、flex-end(从侧轴终边开始排列）、center(从中间向两侧排列)、space-around（将空白分配到元素两侧）、space-evenly （空白分布到元素的单侧）、space-between(将空白均匀分配到元素的中间)
align-self
用来覆盖当前弹性元素上的align-items

3. 弹性元素上的样式

flex-shrink
弹性元素的缩减系数
弹性元素的缩减系数计算方式比较复杂，缩减多少是根据缩减系数和元素大小来计算的。
flex-basis
指定的是元素在主轴上的基础长度，如果主轴是横向的，则该值指定的是元素的宽度，如果主轴是纵向的，则该值指定的是元素的高度。默认值是auto，表示参考元素自身的宽高。如果传递了一个具体的数值，则以该值为准，覆盖宽高。
flex-grow
弹性元素的伸展系数
flex
flex可以设置所有弹性元素的样式，顺序是 flex-grow flex-shrink flex-basis。
flex的可选值: initial（默认值、表示flex：0、1、auto）、auto（表示flex：1、1、auto）、none（表示0、0、auto，此时表示元素没有弹性)。
order
决定弹性元素的排列顺序 （asc排序）

4  像素

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

视口（viewport）
视口就是屏幕中用来显示网页的区域
可以通过查看视口的大小，来观察CSS像素和物理像素的比值
默认情况下：
视口的宽度为 1920px（css像素） 和 1920px(物理像素）

此时，CSS像素和物理像素的比例是 1：1
放大两倍的情况下：
视口宽度为 960px(CSS像素) 1920px(物理像素）

此时，css像素和物理像素的比例是1：2（此时1个CSS像素占据了四个物理像素的大小）
我们可以通过改变视口大小，来改变CSS像素和物理像素的比值。

注意：截图工具都是物理像素。

移动端

在不同的屏幕，单位像素的大小是不同的，像素越小屏幕会越清晰，智能手机的像素点，远远小于计算机的像素点。
默认情况下，移动端的网页都会将视口设置为980px(css像素）以确保pc端网页可以在移动端正常访问，但是如果网页的宽度超过了980px，移动端的浏览器将会自动对网页缩放以完整显示网页。
所以，基本大部分的PC端网站都可以在移动端中正常浏览，但是往往都不会有一个好的体验(因为此时的CSS像素会远大于物理像素）
为了解决这个问题，大部分网站都会专门为移动端设计网页。

完美视口
移动端默认的视口大小是980px（css像素)、默认情况下，移动端的像素比就是980/移动端宽度(750) 如果我们直接在网页中编写移动端代码，这样在980像素的视口下，像素比就不太合理，会导致网页中的内容非常非常的小。
编写移动端页面时，必须要确保一个比较合理的像素比，而每一款移动设备设计的时候，都会提供一个最佳的像素比，一般，我们只要将像素比设置为该值即可得到一个最佳效果。
将像素比设置为最佳像素比的视口大小，我们称其为完美视口，可以通过meta标签来设置我们的完美视口。
可以通过来设置我们移动端的完美视口。

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

vw单位
不同的设备下，完美视口的大小是不一样的
由于不同设备视口和像素比不同，所以同样的375个css像素在不同的设备下意义是不一样的。比如在iphone6中 375像素就是全屏，而到了视口大于375像素的设备中，就会缺一块空间。
所以在移动端开发时，我们一般不用px来进行布局了 。
vw 表示的是视口的宽度(viewport width） 100vw =1个视口的宽度 1w=1%个视口的宽度
vw这个单位永远相对于视口宽度进行计算。
-我们的设计图一般的宽度为375px的倍数，比如750px 1125px。
-如果要在手机端创建一个48px ✖ 35px 小大的元素 ，可以先计算该设计图的宽度下 1px对应的vw 。 比如 一个750px宽度的设计图，1px=0.133333vw 。

vw进行适配
网页中的字体大小最小是12px，不能设置一个比12像素还小的字体。如果我们设置了一个小于12px的字体，则字体自动设置为12。

 5. 响应式布局

概念
网页可以根据不同的设备或者窗口大小呈现出不同的布局。
通过使用响应式布局，可以使一个网页适用于所有设备。
响应布局的关键，就是媒体查询。通过媒体查询，我们可以为不同的设备或设备的不同状态来分别设置样式。
媒体查询
语法：@media 媒体的类型{} ，可以使用逗号连接多个媒体类型，此时它们之间是’或’的关系。
媒体的类型：all（表示所有设备)、print(打印设备）、screen（带屏幕的设备）、speech（屏幕阅读器)
可以在媒体类型前加only，来表示只有。only的使用，主要是为了兼容一些老版本的浏览器。
媒体特性
        max-width （视口的最大宽度，当视口小于或等于指定宽度时就会生效, min-width(视口的最小宽度，当视口大于指定宽度时就会生效)
        样式切换的分界点，我们称其为断点，也就是网页会在这个断点时发生变化。
        一般常用的断点有： 小于768 超小屏幕 max-width：768px
大于768 小屏幕 min-width:768px
大于992 中型屏幕 min-width:992px
大于1200 大型屏幕 min-width:1200px
        如果想设置一个范围，可以用and连接，此时表示’且‘的关系
例：
@media only screen and (min-width: 500px) and (max-width:700px){
body{
background-color: #bfa;
}