CSS的一些重点

一、浮动

浮动的影响

父级高度塌陷

清除浮动的方法

1. 给父元素设置宽高（不推荐，高度一般由内容撑开）

2. 给父元素设置溢出隐藏（不推荐，如果有下拉列表的话，会看不到）

   overflow:hidden;
   

3. 给父元素添加一个伪类after

   .clear:after{
    content:"";//内容为空
    clear:both;//清除左右两边的浮动
    height:0;//高度为0
    display:block;//块元素
    visiblity:hidden;//不可见
   }
   

4. 给父元素添加一个没有意义的子元素div在最后，并且给子元素添加clear:both;的属性

   div{
       width:0;
       height:0;
       clear:both;
   }
   

二、margin的一些问题

margin-top

margin-top会把父元素一起推下来，解决方案

1. 给父元素添加内容

   比如加一个空格  ；（不推荐）

2. 给父元素加一个边框

3. 给父元素设置溢出隐藏

   overflow:hidden;
   

margin 上下左右

同级关系margin外边距上下取最大的值，左右取和

三、居中

水平居中

1. 文字的水平居中

   text-algin:center;
   

2. 块元素的水平居中

   给元素设置一个宽度，设置水平外边距自动；

   margin:0 auto;
   

垂直居中

1. 文字的垂直居中

   如果容器中是单行文字，设置容器的高度等于行高

   height:50px;
   line-height:50px;
   

   如果容器中有n行文字，那么将行高设置为容器高度的n分之一

2. 容器的垂直居中

   给父元素设置一个相对定位 position:relative;

   给子元素设置绝对定位,top设置为50%并且设置margin-top为子元素高度的一半的负数

   例如 结构如下

   设置样式

   #big{
       position:relative;
       height:100px;
   }
   #small{
    width:50px;
    heigth:50px;
       position:absolute;
       top:50%;
       margin-top:-25px;
   }
   

总结一下垂直居中

例如 html结构如下

1. 父元素高度已知

   1. 子元素高度已知且为单行文本

      用line-height

      #div_big{
          width:100px;
          height:100px;
          line-height:100px;
      }
      

   2. 子元素高度已知且为多行文本

      设置垂直方向的margin值设置为（父元素高度-子元素高度）/2

      #div_big{
          width:100px;
          height:100px;
      }
      #div_small{
            width:50px;
          height:50px;
          margin:auto;
      }
      

   3. 子元素高度未知

      position+transform

      css如下

      #div_big{
          width:100px;
          height:100px;
          position:relative;
      }
      #div_small{
          position:absolute;
          left:50%;
          top:50%;
          transform:translateX(-50%)  translateY(50%);
      }
      

2. 父元素高度未知

   1. 子元素高度已知

      position+margin

      #div_big{
          position:relative;
      }
      #div_small{
          height=50px;
          position:absolute;
          left:50%;
          top:50%;
          margin-top:-25px;/*子元素的高度除以2*/
      }
      

   2. 子元素高度未知

      position+transform

      #div_big{
          position:relative;
      }
      #div_small{
          position:absolute;
          left:50%;
          top:50%;
          transform:translateX(-50%)  translateY(50%);
      }
      

四、定位

一般情况下用父相子绝

相对定位

position:relative;

特点：

1. 占位置
2. 相对于自己本身的位置，他不会脱离正常文档流。

绝对定位

position：absolute；

1. 绝对定位会相对于某个点定位，这个点是根据祖先元素，
   如果祖先元素有定位属性，那么就是相对于最近的祖先位置 ，
   如果没有，它会一级一级往上找，直到找到浏览器x0，y0，这是就是
   相对于浏览器的位置
2. 脱离文档流，不占文档流位置

固定定位

position:fixed;

1. 相对于浏览器的位置，可做固定到浏览器
2. 脱离文档流，不占文档流位置

默认定位

position static

1. 给绝对定位添加一个参照物（无意义）

定位中的层级问题

z-index：用来调整元素的层级关系

注意：

1. 结构决定层级感必须是兄弟关系，父子关系，父亲永远在底下。
2. 默认的都是0，数字越大层级越高。
3. 使用这个属性该元素必须有定位属性（定位属性不能改变层级结构，
   父元素始终会在子元素下面）
4. 必须有定位属性才能使用

五、图片回车解析为空格

把容器的font-size设置为0；

如果有文字，则再单独设置元素font-size的值

六、隐藏

5个隐藏：

1. display：none； 消失 （不占位置）（不能设置过度）

2. visibility：hidden；隐藏（占位置）（不能设置过度）

3. opacity：0-1；透明度，可以设置过度

4. overflow：hidden；溢出隐藏（要写宽度）

5. background-color：rgba；仅背景透明，文字不影响

   color有继承，写字体颜色时注意