css、flex布局

flex布局
容器的6个属性：
flex-direction:属性决定主轴的方向（项目的排列的方向），可取值：
row(默认值，水平方向，起点在左端)
row-reverse：主轴为水平方向，起点在右端
column：垂直方向，起点在上沿
column-reverse:垂直方向，起点在下沿
flex-wrap:如果一行放不下，是否需要换行,可取值为：
nowrap:不换行
wrap：换行，第一行在上方
wrap-reverse:换行，第一行在下方
justify-content:项目在主轴上的对齐方式，可取值为：
flex-start:默认值，左对齐
flex-end:右对齐
center：居中
space-between:两端对齐，项目之间的间隔都相等
space-around:每个项目两侧的间隔相等
align-items:项目在交叉轴上的对齐方式，可取值：
flex-start:在交叉轴上的起点
flex-end:在交叉轴上的终点位置
center：与交叉轴的中点对齐
baseline：项目的第一行文字的基线对齐
stretch:如果项目未设置高度或auto,将占满整个容器的高度
align-content：定义了多根轴线的对齐方式，如果项目只有一根轴线，则不起作用，可取值：
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。
项目的属性，使用order：定义项目的排列,数值越小，排列越靠前
order :决定项目的排列顺序
flex-grow ：放大比例，默认值0，即有剩余空间也不放大
flex-shrink ：缩小比例，默认值1，即空间不足时，自动缩小
flex-basis :定义了在分配多余空间之前，项目占据的主轴空间（main size）。
浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex :flex-grow flex-shrink flex-basis三者的简写，默认0 1 auto
align-self:允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto， 表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
权重的等级

    （1）!important,加在样式属性值后，权重值为10000  （尽量不使用）

    （2）内联样式，如：style=“”，权重值为1000

    （3）ID选择器，如：#content，权重值为100

    （4）类，伪类和属性选择器，如：content、：hover权重值为10

    （5）标签选择器和伪元素选择器，如：div,p,:before权重值为1

    （6）通用选择器（ * ) 、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0 */

    /* 权重计算
    ！important  ：权重  无穷大
    行内样式（style=""）: 1,0,0,0
       Id选择器：0,1,0,0
       类选择器、伪类选择器：0,1,0,0
       元素选择器：0,0,1,0
       继承或者 * :0,0,0,0

增加权重：!important

background:red !important

z-index:堆叠顺序，一般指定堆叠顺序表示在html中显示的前后顺序，z-index的值可以是正数也可以是负数，更高堆叠顺序的元素在最低堆叠顺序的元素的前面。
css position定位:
position定位：relative absolute static fixed
relative：定位是相对于自身位置定位（设置偏移量的时候，会相对于自身所在(原来)的位置偏移）。设置了relative的元素仍然处在文档流中，元素的宽高不变，设置偏移量也不会影响其他元素的位置。最外层容器设置为relative定位，在没有设置宽度的情况下，宽度是整个浏览器的宽度。
absolute：定位是相对于离元素最近的设置了绝对或相对定位的父元素决定的，如果没有父元素设置绝对或相对定位，则元素相对于根元素即html元素定位。设置了absolute的元素脱了了文档流，元素在没有设置宽度的情况下，宽度由元素里面的内容决定。脱离后原来的位置相当于是空的，下面的元素会来占据位置。

overflow是用于控制元素溢出元素框时显示的方式
overflow属性（规定只作用在指定高度的块元素上）：
visible:默认值，内容不会被修剪，但是会显示在元素框外面，
hidden:内容会被修剪，其余内容是不可见的，
scroll:内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
auto：如果内容被修剪，则浏览器会以滚动条的形式显示其余内容
inherit:规定应该从其父元素继承overfow的值
让某一个元素居中对齐，比如div元素居中对齐，使用margin:auto
让文本居中对齐：text-align=center
让图片居中对齐：设置margin:auto并将其设置成块元素

img{
display:block;
margin:auto;
width:40%
}

左右对齐方式一（开启绝对定位）

.right{
  position:absolute;
  right:0px
}

左右对齐方式二（浮动）

.right{
    float: right;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}

让元素内的内容垂直水平都居中，可以设置padding和text-align:center
移除ul列表前的小标志(圆点)：list-style-type:none;
li是块元素，指定水平导航栏，使li变为行内元素，display:inline
去除a标签下的下划线，text-decoration:none;
border-right:添加分割线
! important（尽量避免使用）:用于增加样式的权重,!important与优先级无关，使用!important规则时，此声明将覆盖掉其他任何声明。