CSS速查手册(持续更新中)

css知识点速查

<!-- css基础
    1.什么是css？
        css的英文全称为Cascading Style Sheets，中文名为级联样式单，一般也称为层叠样式表单。
    2.css的功能？
        css是一种样式表现语言，它是对网页结构语言HTML的补充。主要用于对网页样式的定义，例如布局、颜色、文本等的设计。
    3.css的作用：
        精确控制页面中的各个元素。
    4.css的发展史：
        css的版本：
            css1.0版本发布于1996年12月，只提供了一些基本的样式属性。
            css2.0版本发布于1998年5月，提供了更为强大的功能。
            css2.1版本发布于2007年，并于2011年6月正式成为标准，也是目前使用最广泛的版本。
            css3.0版本于1999年开始制定，2001年完成工作草案，是目前css最新的版本，它的最大特点是将css3的规范内容分成一系列独立的模块，更有利于浏览器产商的逐步支持。
    5.css特性：
        层叠性--继承性 -->
### CSS基础特性
#### 1.统一性
#### 2.便捷性
#### 3.分离性

<!-- css三种引入方式：内联样式表；style="color:red;"
    内部样式表；
    <link rel="stylesheet" href="style.css">
    外部样式表       * `href`指的是链接CSS的地址
                * `rel`指的是引用类型为样式表
                * `type`指的是文件类型是CSS文件-->
    <!-- 扩展引用方式！！！！！！
        <style>
            @import 'style.css'
        </style> -->

浏览器

常用浏览器最新版本的内核:

以上提到的引擎为排版引擎，浏览器还需搭载js引擎。Chromium就是Blink排版引擎+V8 js引擎。
国内很多浏览器用的就是Chromium的一套。

浏览器 内核
Chrome Blink
IE Trident
Firefox Gecko
Safari WebKit
Opera Blink
Edge EdgeHTML (Trident的一个分支）
360安全浏览器 Trident + Chromium
360极速浏览器 Trident + Chromium
QQ浏览器 Trident + Chromium
搜狗浏览器 Trident + Chromium
百度浏览器 Trident + Chromium
2345智能浏览器 Trident + Chromium
UC浏览器电脑版 Trident + Chromium
使用以上双核浏览器时，可以自动/手动切换内核来浏览网页。

css的元素显示模式

<!-- 常见的块元素：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等；
        块元素特点：
        1.独占一行；
        2.高度、宽度及内外边距可以调节；
        3.宽度默认是父级宽度的100%；
        4.相当于一个容器及盒子，被内容撑开。
        注意：文字内不能使用块级元素，比如<p>
    常见的行内元素：<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等；
        行内元素特点：
        1.一行可显示多个；
        2.高宽直接设置无效；
        3.行内元素只能放文本及行内元素。
        注意：一般a标签内可放块元素。
    行内块元素：<img/> <input/> <td> 
        特点：
        1.一行可以显示多个（行内元素特点）；
        2.默认宽度即内容宽度（行内元素特点）；
        3.高度，行高，内外边距都可调节（块元素特点）。 -->
    <!-- 模式转换：
    display:block;(块元素) inline;(行内元素) inline-block;(行内块元素) -->
    <!-- min-width,max-width使用较少，也比较简单，有兼容性的，只能在IE9及以上使用-->

<!--显示和隐藏
visibility:hidden;元素不可见，但占据位置
display:none;元素不可见不占据位置
-->

字体样式

 /* 字体 */
            font-family: 'Times New Roman', Times, serif;
            /* 大小跟单位 */
            font-size: 16px;
            /* 粗细 normal正常相当于number为400；
            bold粗体，相当于number=700；
            bolder特粗体；
            lighter细体；
            nubmer不跟单位 */
            font-weight: normal;
            /* 样式，normal标准字体样式；
            italic斜体样式；
            平时很少给文字加斜体，反而要给em，i取消斜体 */
            font-style: normal;
            /* 字体样式的复合写法：
            font: font-style font-weight font-size/line-height font-family; 
            其中size和family不可省略*/

<h3>字体类型</h3>
    <!-- font-family:serif;   //serif衬线字体，主要用于标题显示
                          //sans-serif非衬线字体
                          //monospace等宽字体 -->
    <p>字体样式一般给body</p>
    <p>单行文字垂直居中：line-height:30px;(行高=上空隙+文字高度+下空隙)</p>
    <!-- 文字间隔：letter-spacing: 2px; (可为负值) -->

字体的单位有很多，现在先简要的介绍一下

* `px`像素单位，网页默认的字体大小是16px
* `pt`字号，网页默认的字号大小是12pt
* `vw`响应式字体大小，以当前屏幕宽度的百分比为大小。`vw`的全称叫`viewport width`，2vw代表当前屏幕宽度的百分之2
* `vh`响应式字体单位，以当前屏幕的高度百分比在大小，1vh相当于屏幕高度百分之1
* `rem`它也是一个响应式单位，后期讲解。rem的全称叫root element也就是根元素，网页根元素就是`html`元素，所以我们可以使用它来做标准1rem相当于一个网页字体，一个网页字体默认就是16px

/*自定义字体*/
@font-face{
    font-family:one;    /*这个字体的名称我们定义为one*/
    src:url(./font/one.ttc);
}

文本样式

/* 文本样式 */
            color: aqua;
            text-align: center;
            /* 水平对齐left,center,right
                justify 文字左右对齐*/
            text-decoration: none;
            /* 装饰文本none默认无，上划线overline；中划线line-through；下划线underline； */
            /* 重点添加删除下划线 */
            text-indent: 10px;
            /* 首行缩进2em； */
            text-transform: uppercase;/*大写字母
            * `lowercase`小写字母
            * `capitalize`每个单词首字母大写*/
            line-height: 26px;
            /* 此为行间距：上间距+文字高度+下间距；此属性只更改上下间距 */
        值       描述
        normal    默认。设置合理的行间距。
        number    设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
        length    设置固定的行间距。
          %        基于当前字体尺寸的百分比行间距。
        inherit    规定应该从父元素继承 line-height 属性的值。


            letter-spacing:2px;/*-2px增大缩小字符间距*/
            word-spacing:2px;/*单词之间间距*/
            vertical-align:center;/*文本行垂直居中
            text-top靠上
            text-bottom靠下*/

            /*文本超出省略号显示*/
            white-space:nowrap;/*不换行*/
            overflow:hidden;/*溢出隐藏*/
            text-overflow:ellipsis;/*隐藏用省略号*/

            /*p标签纯数字不换行问题 解决：
            word-break: break-all;
            这里文字会换行但数字不会！字母也不换*/

            /*同一行的元素，按钮和输入框对不齐的解决方法:
            只要在前面的那个输入框里面加上一个*/
            vertical-align: bottom;

文本划线样式：https://juejin.cn/post/6947866495309316104

列表样式

<h2>列表样式</h2>
    <!-- list-style-image: //列表项前面的标记；
    list-style-position:outside; //在什么位置显示列表项前面的标记；inside(内，外)
    list-style-type:disc; //设置图标类型：circle、square、decimal、none、low-alpha、upper-alpha...
    list-style:list-style-image list-style-position list-style-type； -->

emmet语法

<!-- emmet语法：
    div*4 快速生成4个div；
    div>span 包含span的div；
    div+p 生成兄弟标签；
    p.class/#id 生成类或ID；
    .demo&*5 生成5个有序号；
    div{文字} 生成包含文字；
    css：
    h100 设高；
    w200 设宽； -->

背景样式

 <!-- 1.css背景
    background-color:transparent;(默认：透明的)
    background-image:url(url);
    2.背景平铺
    background-repeat:no-repeat;(不平铺；默认平铺)repeat-x(沿x轴平铺) repeat-y(沿y轴平铺) 
    3.背景图片位置
    background-position:20px 50px;x坐标 y坐标(也可写一个)
    background-position:center right; 水平靠右
    background-position:right; 靠右，默认垂直居中
    background-position:20px center;
    4.背景图像固定
    background-attachment:scroll; 默认：随图像内容滚动；fixed固定
    5.背景复合写法
    background:transparent url(image.jpg) repeat-y fixed top;
    6.背景色透明度效果
    backgorund:rgba(0,0,0,0.6);
    IE9+版本浏览器支持，盒子内容不受影响。 -->

css三大特性

<h3>css三大特性-</h3>
    层叠性（对同一个元素多次添加属性时，最新添加生效），继承性（当子元素没有设置属性时，对父元素设置属性时子元素继承其属性），优先级
    <h2>优先级</h2>
    <!-- 选择器                选择器权重
    继承或*                 0,0,0,0
    元素选择器              0,0,0,1
    类选择器，伪类选择器      0,0,1,0
    ID选择器               0,1,0,0
    行内样式style=""        1,0,0,0
    !important 重要的      无穷大 -->
    <!-- 例：<style>
        #father{color: red;}
        p{color: aqua;}
    </style>
    <div id="father">
        <p>此时红色虽为ID，但为父级对p表继承；p则是元素选择器，优先级比继承高，即表现为蓝色。</p>
        复合选择器权重会叠加。 
        .nav li 权重大于 .pink
    </div> -->

选择器

<!--    （1）    id 选择器（#myid）
    （2）    类选择器（.myclassname）
    （3）    标签选择器（div,h1,p）     
    （4）    后代选择器（h1 p）
    （5）    相邻后代选择器（子）选择器（ul>li）
    （6）    兄弟选择器（li~a）（li后面的兄弟a）
    （7）    相邻兄弟选择器（li+a）
    （8）    属性选择器（a[rel="external"],[src $= ".png"]结尾匹配,[src ^= "img"]开头匹配，[src *= "3"]通配）
    （9）    伪类选择器（a:hover,li:nth-child）
    （10）伪元素选择器（::before、::after）
    （11）通配符选择器（*）
    包含属性值的选择器写法：
        <p name="name huawei"></p>
        p[name="name huawei"]{color:red;}
        p[name~="name"]{color:red;}   //表包含name选择；
        <p name="name-huawei"></p>
        p[name|="name"]{color:red;}   //表选择前缀；
-->g
属性选择器和类选择器伪类选择器权重相同，
伪元素选择器会创建一个元素，属于行内元素，
伪元素和标签选择器权重一样

伪类选择器

<!-- a:link       选择所有未被访问的链接
        a:visited    选择所有已被访问的链接
        a:hover      选择鼠标指针位于其上的链接
        a:active     选择鼠标按下未弹起的链接 
        注意：
        1.颠倒顺序会失效，严格按照LVHA的顺序来，love hate；
        2.去除链接下划线常用text-decoration:none;
        3.实际开发中常用a 和a:hover两个。
        光标伪类选择器：input:focus{};主要用于input；
        -->

盒子边框

<!-- 边框：     谨记，画三角形时会用到：盒子的边框是向外撑开盒子，比如设盒子宽100px，边框2px，此时盒子整体占空间宽度为100加左右宽度，合计104px！！！
    border-width:5px;(边框粗细，一般都用px)
    border-style:solid;(实线边框)dashed(虚线边框) dotted(点线边框)double(双线)groove(线槽)
    border-color:red;(边框颜色)
    边框简写：border:5px solid red;
    border-top:bottom;left;right;
        border-collapse:collapse;(合并重叠相邻单元格边框！！！！)
    内外边距margin(边框与外部盒子的距离),
     padding:5px;(上下左右)
     pading:5px 10px;(上下 左右)
     padding:5px 10px 20px;(上 左右 下)
     padding:5px 10px 20px 30px;(上 右 下 左)(边框与内容的距离) 
    注意：盒子已设宽度和高度后，再指定内边距，会撑大盒子；没设则不会。
    margin的方位同padding-->

<h2>css3新增，IE9+支持</h2>
    <!-- 1.圆角边框：border-radius:10px;(使10px为半径的圆内切盒子的四个角，从而形成了圆角矩形)
    50%；(即高度宽度的一半，为圆)
    border-style:dotted;   边框样式
    border:左上 右上 右下 左下;
    border:左上  右上左下  右下;
    border:左上右下  右上左下;
    border-top-left-radius:; -->
    <!-- 2.盒子阴影：box-shadow：10px(水平位置) 20px(垂直位置) 30px(模糊距离) 40px(阴影大小) rgba(0,0,0,0.3) inset;
    inset;(内阴影)
    3.(了解)文字阴影：text-shadow:10px(水平位置) 20px(垂直位置) 30px(模糊距离) rgba(0,0,0,0.3); -->


border-image-slice: 10;   /*距离上下左右均为10px;*/
border-image-slice: 10 30;   /*距离上下10px,左右30px;*/
border-image-slice: 10 30 20;   /*距离上10px,下20px,左右30px;*/
border-image-slice: 10 30 20 40;   /*距离上10px,右30px,下20px,左40px;*/

盒子阴影

盒子模型与BFC

浮动

<h1>浮动</h1>
    <!-- 标准流（文档流）：块元素按行从上到下顺序排列；行内元素从左往右依次排列，遇到右边缘自动换行。
    浮动float 块元素横向排列用浮动，浮动的盒子不再保留原先的位置；
    float对行内元素使用时则使其具有行内块元素相似的特性，而不需要转换display可以直接给宽高；
    当浮动的块元素处于文档流块元素上方时会挤走文档流里的文字；
    任何元素都可以直接添加浮动，如果块级元素没有设置宽度，默认和父级一样宽，添加浮动后则由内容撑开；
    一个元素使用浮动时，其兄弟元素都要加浮动；
    父盒子不给高度，子盒子添加浮动，此时父盒子会塌陷高度变成0，影响下面的布局；这时我们需要清除浮动：
    一般有四种方法：
        1.隔墙法，（w3c推荐的做法）：在浮动元素末尾添加<div style="clear: both;"></div>或<br>等；
        优点：通俗易懂，方便
        缺点：添加无意义标签，语义化差
        2.给父盒子添加:overflow:hidden或auto，scroll;缺点无法显示溢出的部分；
            overflow:visible(默认);auto(自动添加滚动条)、hidden(隐藏超出内容)、scroll(一直显示滚动条)
        优点：代码简洁
        缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素
        3.:after法：加入如下样式并给父元素加上类名clearfix， 百度淘宝等使用的此方法，
            .clearfix:after{
                content: "";
                display: block;
                height: 0;
                clear: both;
                visibility: hidden;
            }
            .clearfix{
                ie6,ie7专有
                *zoom: 1;
            }
        优点：符合闭合浮动思想，结构语义化正确
        缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.
        4.双伪元素清除：加入如下样式并给父元素加上类名clearfix，  小米腾讯等使用此方法，
            .clearfix:before,.clearfix:after{
                content: "";
                display: table;
            }
            .clearfix:after{
                clear: both;
            }
            .clearfix{
                *zoom: 1;
            }
        优点：代码更简洁
        缺点：用zoom:1触发hasLayout.
    父盒子无高度，子盒子浮动，此时影响下面布局则需清除浮动。

    双飞翼布局：
            1.使用float使左中右三列浮动；
            2.使用负margin让左右两列与中间列处于同一水平线上；
            3.在中间列增加一个div，设置margin值为左右两列的宽度；
            4.清除浮动。
        优点：
            1.中间列宽度自适应；
            2.中间内容先加载；
            3.浏览器兼容性好。

 -->

定位

常见图片格式

<!-- 1.jpg格式：有损压缩，色彩信息保留较好，高清，产品类图片经常使用；
    2.gif格式：最多只能储存256色，通常用来显示简单图形及字体，可保存透明背景和动画效果，实际常用小动画效果；
    3.png格式：新兴网络图形格式，freworks源文件，结合gif和jpg的优点，存储形式丰富，能够保持透明背景，通常用于切成背景透明的图片；
    4.PSD格式：ps专用格式，可存放图层、通道、遮罩等多种设计稿，可直接从上面复制文字，获得图片，以及测量大小和距离。
        此处为ps切图内容，具体见https://www.bilibili.com/video/BV14J4114768/?p=190 -->

css书写顺序

<!-- 按以下顺序：
    1.布局定位属性：display/position/float/clear/visibility/overflow;
    2.自身属性：width/height/margin/padding/border/background;
    3.文本属性：color/font/text-decoration/text-align/vertical-align/white-space/break-word;
    4.其他属性：content/cursor/border-radius/box-shadow/text-shadow/background:linear-fradient... -->

精灵图及字体图标

    1.精灵图
    有效减少服务器接收图片的次数；
    将网页中的一些固定的小图片集成到一张大图片中，通过
    backgroud-position
    图片针对页面偏移
    实现：1.盒子给宽高；
            2.设背景 backgroud:url(.png);
         3.定位置 backgroud-position:-100px -100px;
    综合写法：
    backgroud:url(.png) no-repeat -100px -100px;

    2.字体图标iconfont
    轻量级，比图像小；灵活性高 可设颜色大小阴影等；兼容性好；
    会用就行；
    <span class="iconfont">&#xec25;</span>

颜色渐变

不透明度

css3部分

过渡

过渡transition ie9(以下不支持)
    transition: 过渡属性 变化时间 运动曲线 延迟开始;
    transition:width .5s ease 1s,height .5s ease 1s;
    linear 匀速 ease 由快到慢 ease-in 由慢到快
    ease-out 由较快到较慢 ease-in-out 由慢到快再到慢

变换

<!-- 2D转换 (tranform)转换  不会影响其他元素
        translate 移动    rotate 旋转   scale 缩放
            transform:translate(X,Y);
            transform:translateX(10px);
            transform:translateY(100%);自身为参照

            transform:rotate(45deg);顺时针旋转45度
            transform-origin:x y; 转换中心点 left bottom默认 50% 50%
            transform:scale(x,y); (2,2)宽，高倍数 (2)等比例
            transform-origin:x y; 转换中心点 left bottom默认 50% 50%
        2D转换综合写法（有顺序，按照顺序写）
        transform:translate() rotate() scale();

        1、背对屏幕不可见：backface-visibility: hidden;

        2、开启3d空间,给3d效果元素的父元素设置：transform-style: preserve-3d;

        3、缩放: 元素缩放的系数，scale(宽度系数,高度的系数)   transform: scale(1.5,2);

        4、斜切:skew(沿x轴斜切,沿y轴斜切)   transform: skew(0deg,0deg);

        5、景深透视属性: 是一个近大远小的效果,视觉比较合理的取值范围800px-1500px
        给效果元素的父元素设置该属性   perspective: 1000px;

        6、z轴的位移：正值向屏幕外,负值向屏幕里   transform: translateZ(30px);
 -->

动画

<!-- animation动画
        动画定义：
                (from to 等价0% 100%)
        @keyframes animation{
            0%{
                width:100px;
            }
            100%{
                width:200px;
            }
        }
        动画调用：
        animation-name:animation;动画名称
        animation-duration:2s;  持续时间
        animation-timing-function:ease;  运动曲线
        animation-delay:1s;   延时0开始
        animation-iteration-count:2; 重复次数 infinite无数次
        animation-direction:normal; 正常 alternate下一周期逆向播放
        animation-fill-mode:forwards;forwards保持移动后位置，默认backwards回到起始位置
        animation-play-state:pause; pause暂停，默认running
        steps(5) 分步完成动画，有了就不写ease运动曲线

        简写：
        animation:name duration timing-function delay iteration-count direction fill-mode;
 -->

    <!-- 3D转换
    tranform:translate3d(100px,100px,100px); 3d不能省略
    透视perspective
        视距
        3D旋转rotate3d
 -->

flex布局

.box{
    display: -webkit-flex; /* Safari Webkit 内核的浏览器，必须加上-webkit前缀。 */
    display: flex;
    display: inline-flex; /* 行内元素开启弹性布局*/

、、、兼容写法、、、
    display:-webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
、、、、、、

容器属性

flex-direction   决定主轴的方向
flex-wrap        容器排布在一条线（轴线）上，排不满是否换行
flex-flow        是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
justify-content  定义了在主轴上的对齐方式
align-items      定义了在交叉轴上如何对齐。
align-content    定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

flex-direction

.box {
     flex-direction: row | row-reverse | column | column-reverse;
}
    row（默认值）：主轴为水平方向，起点在左端。
    、、、兼容写法、、、
      box-orient:horizontal;
    box-direction:normal;
    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -moz-box-orient:horizontal;
    -moz-box-direction:normal;
    flex-direction:row;
    -webkit-flex-direction:row;
、、、、、、
    row-reverse：主轴为水平方向，起点在右端。
    、、、兼容写法、、、
    box-orient:horizontal;
    box-direction:reverse;
    -webkit-box-orient:horizontal;
    -webkit-box-direction:reverse;
    -moz-box-orient:horizontal;
    -moz-box-direction:reverse;
    flex-direction:row-reverse;
    -webkit-flex-direction:row-reverse;
、、、、、、
    column：主轴为垂直方向，起点在上沿。
    、、、兼容写法、、、
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -moz-box-orient:vertical;
    -moz-box-direction:normal;
    flex-direction:column;
    -webkit-flex-direction:column;
、、、、、、
    column-reverse：主轴为垂直方向，起点在下沿。
    、、、兼容写法、、、
     -webkit-box-orient:vertical;
    -webkit-box-direction:reverse;
    -moz-box-orient:vertical;
    -moz-box-direction:reverse;
    box-orient:vertical; 
    box-direction:reverse;
    flex-direction:column-reverse;
    -webkit-flex-direction:column-reverse;
    、、、、、、

flex-wrap

.box {
     flex-wrap: nowrap | wrap | wrap-reverse;
}

    nowrap（默认）：不换行
    -webkit-flex-wrap:nowrap;
    -webkit-box-lines:single;
    -moz-flex-wrap:nowrap;
    flex-wrap:nowrap;

    wrap：换行，第一行在上方。
  、、、兼容写法、、、
    -webkit-flex-flow:row wrap;
    -webkit-box-orient:horizontal;
    -webkit-box-lines:multiple;
　　-moz-flex-flow:row wrap;
    box-orient:horizontal;
    box-lines:multiple;
    flex-flow:row wrap;
        、、、、、、

    wrap-reverse：换行，第一行在下方。

flex-flow

.box {
     flex-flow: <flex-direction> || <flex-wrap>
}

justify-content

.box {
     justify-content: flex-start | flex-end | center | space-between | space-around;
}

    flex-start（默认值）：左对齐
    flex-end：右对齐
    center: 居中对齐
    、、、兼容写法、、、
     -webkit-box-orient:vertical;
    -webkit-box-direction:reverse;
    -moz-box-orient:vertical;
    -moz-box-direction:reverse;
    box-orient:vertical; 
    box-direction:reverse;
    flex-direction:column-reverse;
    -webkit-flex-direction:column-reverse;
    、、、、、、

    space-between：两端对齐，项目之间的间隔都相等。
    space-evenly：项目之间间隔平分。
    space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items

.box {
     align-items: flex-start | flex-end | center | baseline | stretch;

    flex-start： 交叉轴（垂直方向）的起点对齐。
    flex-end：   交叉轴垂直方向）的终点对齐。
    center：     交叉轴垂直方向）的中点对齐。
    、、、兼容写法、、、
align-items:center;
-webkit-align-items:center;
box-align:center;
-moz-box-align:center;
-webkit-box-align:center;
 、、、、、、

    baseline:    项目的【第一行文字】的基线对齐。
    stretch     （默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-content

.box {
      align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
    flex-start：与交叉轴的起点对齐。
    flex-end：与交叉轴的终点对齐。
    center：与交叉轴的中点对齐。
    space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
    space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
    stretch（默认值）：轴线占满整个交叉轴。

项目（.box-child 子元素）

order            定义项目的排列顺序。数值越小，排列越靠前，默认为0
flex-grow        定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
flex-shrink      定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
flex-basis       定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小
flex             是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选 

、、、兼容写法、、、
box-flex:num;
-webkit-box-flex:num;
-moz-box-flex:num;
flex:num;
-webkit-flex:num;

    align-self       align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

##### align-self 
.box-child{
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
auto： （ 默认值）交叉轴的起点对齐
flex-start： 交叉轴的起点对齐
flex-end： 交叉轴的终点对齐
center: 交叉轴的据中对齐
baseline 项目的第一行文字的基线对齐
stretch 轴线占满整个交叉轴

table布局

display:table;

display	说明
table	此元素 会作为块级表格来显示(类似table) , 表格前后带有换行符。
table-row-group	此元素会作为一 个或多个行的分组来显示(类似tbody ).
table-header-group	此元素会作为- 个或多个行的分组来显示(类似thead ).
table-footer-group	此元素会作为一个或多个行的分组来显示(类似tfoot ).
table-row	此元素会作为-个表格行显示(类似tr ).
table-column-group	此元素会作为- 个或多个列的分组来显示(类似colgroup ).
table-column	此元素会作为一 个单元格列显示(类似col )
table-cell	此元素会作为一 个表格单元格显示(类似td和th )
table-caption	此元素会作为- 个表格标题显示(类似caption)

水平垂直居中

方法：（宽高未知）

1. 子绝父相：

   <div class="parent">
           <div class="son"></div>
       </div>

   .parent {
               position: relative;
               width: 400px;
               height: 400px;
               background-color: aqua;
           }
   
           .son {
               position: absolute;
               top: 0;
               right: 0;
               bottom: 0;
               left: 0;
               margin: auto;
               background-color: red;
           }

2. 定位加平移：

      .parent {
               position: relative;
               width: 400px;
               height: 400px;
               background-color: aqua;
           }
   
           .son {
               position: absolute;
               width: 100px;
               height: 100px;
               top: 50%;
               left: 50%;
               transform: translate(-50%, -50%);
               background-color: red;
           }

3. flex布局：

    .parent {
               display: flex;
               justify-content: center;
               align-items: center;
               width: 400px;
               height: 400px;
               background-color: aqua;
           }
   
           .son {
               width: 100px;
               height: 100px;
               background-color: red;
           }

4. table-cell布局：

           .parent {
               display: table-cell;
               vertical-align: middle;
               width: 400px;
               height: 400px;
               background-color: aqua;
           }
   
           .son {
               margin: 0 auto;
               width: 100px;
               height: 100px;
               background-color: red;
           }

各个单位

px em rem vh vw