css相关学习记录

为什么写这个呢？因为在开发管理系统的过程中，会不可避免的对一些css属性进行调整，其次虽然在大学中学过这些东西，但是主业为java后端，这些我当时是的确是聊聊而过了

一、flex布局介绍，代码如下

{
     display: flex;
     justify-content: space-between;
     align-items: center;
}

　　flex是一个新的布局，采用这个布局的元素，叫做Flex容器，其子元素则自动的成为容器成员，简称项目

　　容器中存在两个轴（main asix, cross axis）

　　关于布局样式 具体可以去这个大佬这去看 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

　　容器具有6个属性：

　　　　1 flex-direction: row | row-reverse| column|column-reverse  --> 项目的排列方向，属性大都见文知意，就不一一翻译了

　　　　2 flex-wrap: nowrap | wrap| wrap-reverse --> 如果一条轴线排不下，如何换行

　　　　3 flex-flow: flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

　　　　4 justify-content: flex-start| flex-end | center| space-between                             | space-around --> 项目在主轴的对齐方式

　　　　　　　　　　　　　　　　　　　　　　　　两端对齐，项目之间的间隔相等     每个项目的两侧相等

　　　　5 align-items: flex-start|flex-end| center| baseline                                   | stretch --> 项目在 cross axis的对齐方式

　　　　　　　　　　　　　　　　　　　　　   项目的第一行文字的基线对齐   拉伸，即占满整个的容器的高度（默认）

　　　　6 align-content: flex-start| flex-end| center| space-between| space-around| strech --> 多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

二、text-align:left| right| center| justify|inherit --> 元素内文本的水平对齐方式

三、直接上几段css代码方便记录

1 header.vue

    .header {
      position: fixed;
      top: 0;
      left: 0;
      display: flex;
      -ms-flex-align: center; /* Internet Explorer 10 私有支持 垂直居中 w3c中box-align 属性*/
      align-items: center;
      width: 100%;
      min-width: 960px;
      height: 48px;
      font-size: 14px;
      line-height: 1;
      /* -webkit-box-shadow: 0 1px #dadfe6; */
      /* box-shadow: 0 1px #dadfe6; */
      background: #fff;
      z-index: 1030;
      background-color: #00acb6;
    }

　　position :  absolute| fixed| relative| static| inherit

　　定位方式

原文地址：https://www.cnblogs.com/zzl521/p/12702374.html