学习-WEB前端快速入门-49 复习

1.标准盒模型 box-sizing:content-box

2.IE盒子模型 box-sizing:border-box

3.弹性盒模型

1）父元素的属性

 dispaly:flex; 子元素默认水平排列
 flex-direction:column; 子元素垂直排列
 justify-content: center;子元素主轴对齐方式
 align-items: center; 子元素侧轴对齐方式

2）子元素的属性

  flex-grow:number;子元素所占的比例

4.浮动 float:left/right/none

  原理：浮动后排除到文档流以外，浮动后不占据位置
  浮动是碰到父元素的边框或者浮动元素的边框就会停止
  浮动不会重叠
  浮动没有上下浮动，只有左右
  浮动后，所有元素都转换为块级元素
  

5.清除浮动

 <1>.受影响的元素加clear:both
 
 <2>.浮动元素的父元素加overflow:hidden;或者overflow:auto;
 
 <3>.空div法
             浮动元素后面加空div
             空div clear:both
<4>.伪对象法
         
         浮动元素的父元素：after{
             content:"";
             dispaly:block;
             clear:both
         }
         
<5>.给浮动元素的父元素加高（父元素的高度已知）

6.display属性

 属性值：
         block                 块级别元素
         inline 	           行内元素
         inline-block          内块，即在同一行显示，又可以设置宽高
         none                  隐藏 隐藏后不占据位置
         visibility：hidden     隐藏 隐藏后占据位置
         opacity：0；           隐藏 隐藏后占据位置
         flex                  弹性盒，伸缩盒
         table-cell            表格
         

7.子元素在父元素中水平垂直居中

  1).内容水平居中 (行内) 
     
     text-align:center    					
 
 2).盒子水平居中
 
         div{
              width:200px
              margin:0 auto;
          }

3).一行位置垂直居中
        
   line-height=height

 4).多个垂直居中
       
   父元素加padding(上下padding值一样)

 5).子元素在父元素中水平居中
    
    <1> 弹性盒法

      .partent{
                width: 500px;
       		    height: 500px;
                background-color: red;
                display: flex;
                justify-content: center;
                align-items: center;
      }

    .child{
            width: 200px;
            height: 200px;
            background-color: pink;
    }
    
    <2>table-cell 方法

      .partent{
        width: 500px;
        height: 500px;
        background-color: red;
        display: table-cell;
        vertical-align: middle;
    }

    .child{
        width: 200px;
        height: 200px;
        background-color: pink;
        margin: 0 auto;
    }