CSS样式表

定位与布局

坐标定位

1. 静态坐标

   .static{
     position: static;
   }
   

2. 相对坐标

   .relative{
     position: relative;
     top: 10px;
     left: 10px;
   }
   

3. 绝对定位

4. 固定坐标

.fixed{
  position: fixed;
  top: 10px;
  left: 10px;
}

浮动定位

图文混排时，采用浮动定位。

浮动元素

#item{
  float: left|right;
}

浮动容器

#container{
  clear: none|left|right|both|inherit;
}

页面布局

1. Flex布局

Flex容器

#container{
  display: flex;
  /*排列方向*/
  flex-direction: row|row-reverse|column|column-reverse;
  /*溢出方式*/
  flex-wrap: no-wrap|wrap|wrap-reverse;
  /*纵向对齐*/
  align-content: flex-start|center|flex-end|stretch|baseline;
  /*横向对齐*/
  justify-content: flex-start|center|flex-end|space-between|space-around;
}

Flex元素

#item{
  flex: 1;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 100;
}

1. Grid布局

   Grid容器

   /*坐标区域*/
   #container{
     display: grid;
     grid-template: repeat(4,1fr)/repeat(4,1fr);
     grid-gap: 10px;
   }
   
   /*命名区域*/
   #container{
     display: grid;
     grid-template: repeat(4,1fr)/repeat(4,1fr);
     grid-gap: 10px;
     grid-template: 
       "nav nav nav nav"
       "sidebar content content content"
       "sidebar content content content"
       "sidebar content content content";
   }
   
   /*浮动区域*/
   #container{
     display: grid;
     grid-template: repeat(4,1fr)/repeat(4,1fr);
     grid-gap: 10px;
     grid-auto-flow: column;
   }
   

   Grid区域

   /*坐标区域*/
   #area{
     grid-row-start: 1;
     grid-row-end: 2;
     grid-column-start: 1;
     grid-column-end: 5;
   }
   
   /*命名区域*/
   #area{
     grid-area: nav;
   }
   
   /*浮动区域*/
   #area{
     grid-column-start: 1;
     grid-column-end: 4;
   }