在正式复习之前，强推几个不错的学习css的网站：MDN网站，css tricks，张鑫旭博客
好，下面开始正式复习

文档流

流动方向

1. 内联元素：从左向右流动，同一元素可能占两行
   
2. 块元素：从上向下流动
   
3. 内联块元素：也是从左向右排列，不过不会一个元素占两行
   ### 宽度
   
4. 内联元素：宽度是由元素内容宽度决定的，不能用width设置宽度
   
5. 块元素：默认宽度 auto，不是100%；可用width设置宽度
   
6. 内联块元素：默认宽度时内容宽度，可用width设置宽度
   ### 溢出
   如果内容宽高大于容器宽高时，溢出
   设置overflow，来对溢出内容进行处理
   overflow可选值
   visible：显示溢出内容
   hidden：隐藏溢出内容
   scroll：内容无论超不超出容器，容器上都有滚动条
   auto：容器会根据内容多少，添加滚动条
   #### 补充：脱离文档流的两种方法
   position:absolute;
   float:left/right;
   (脱离文档流，会使父元素产生高度塌陷)
   ### 盒模型
   主要的两种盒模型：内容盒，边框盒
   盒模型包括四部分：content，padding，border，margin
   如果设置
   css style{ box-sizing:content-box; width:500px;/*这个width就是content的width*/ }
   内容盒
   如果设置
   style{ box-sizing:border-box; width:500px;/*这个width是content.width+padding.width+border.width=500px*/ }
   内容盒中设置的宽度就是content的宽度
   边框盒中设置的宽度时content.width+padding.width+border.width的总和
   
7. margin
   margin会出现兄弟元素之间的margin合并
   以及父元素与子元素之间的margin会合并
   
8. 如何消除margin合并呢？
   消除兄弟元素间的margin合并：设置display：inline-block
   消除父子元素间的margin合并：设置
   
9. 给父元素加border
   
10. 给父元素加padding
    
11. overflow：hidden
    
12. display：flex；
    

### CSS页面布局

• 布局分类

  • 固定宽度
    
  • 不固定宽度
    
  • 响应式布局
    ### float布局
    在子元素中加上float：left
    在父元素中加上class = "clearfix"
    style{
    .clearfix::after{
    content:"";
    display:block;
    clear:both;
    }
    }
    ### flex布局
    
  • container容器（父元素）
    
  • display：flex；
    
  • flex-direction：row/row-reverse/column/column-reverse
    
  • flex-wrap：wrap（默认）/nowrap/是否换行/
    flex-direction和flex-wrap这两个属性可缩写成flex-flow:flex-direction flex-wrap
    
  • justify-content（水平方向的位置）：flex-start/end/center/space-between/space-around
    
  • align-items（垂直方向的内容）：center/flex-end/stretch/flex-start
    

  • align-content（垂直方向多行内容）：flex-start/flex-end/center/stretch/space-between/space-around
    items 属性
    

    第一个item元素

    
    

    1

    
    在css中
    style{
    .item:first-child{

    }
    .item:nth-child(n){

    }
    item:last-child{
    order:1;
    }
    }
    order 默认均为0
    如果设置order则按order的大小顺序由大到小排序（可正可负）
    order：1

  • flex-grow：1；（对空间的占有）默认是0

  • flex-shrink：数字；
    数字越大，当空间不足时，缩小越多，默认是1,0表示不变瘦

  • flex-basis：默认auto，功能类似width，优先级比width高
    上述三个flex可缩写成：flex： flex-grow flex-shrink flex-basis
    中间用空格隔开
    align-self：可以单独设置某个item

    总结：

    align-content：决定行与行之间的间隔
    align-items：决定元素整体在容器的什么位置，只有一行时，align-content不起左右

  vertical-align：只对行内元素，表格单元格生效，内容居中
  可取值：baseline/top/middle/bottom/text-top/sub

  grid布局

  常用属性
  1. grid-template-rows：分几行
  2. grid-template-columns：分几列
  3. grid-row-start：1；（指第一条线）
  4. grid-row-end：4；
  5. grid-column-start：1；
  6. grid-column-end：5；
  上述5.6可以合并成grid-column：1/5；
  上述3.4.5.6可以合并成grid-areas：grid-row-start/grid-column-start/grid-row-end/grid-column-end
  7. grid-gap：12px；
  8. grid-template-areas：可以直接分成几个部分

  本文版权有本人和饥人谷所有