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的对齐方式

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

二、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

　　定位方式

猜你喜欢