CSS-Tricks(二)

1. line-height的文字垂直居中方式

<style>
    .test{
      height:50px;
      border:1px solid red;
      line-height:50px;
    }
  </style>

demo在这里

2. SASS mixin根据不同设备像素比加载不同背影图片

@mixin background-image($url: 'decrease_1'){
  background-image($url + '@2x.png');
  @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3){
    background-image($url + '@3x.png')
  }
}

这个单独拿出来做一个文件

3.踩坑：如果父级元素设置min-height:100%;子级元素再设置min-height:100%;不生效

设置百分比的值的话，参照的元素相应的值必须是一个确定的值，不然不生效。

demo在这里

4. 把文字和图片放在一起默认是基线对齐，破的方法就是vertical-align:top;

之前用了很多次了，就不再举例了。

5. float和清除浮动

• 设置了浮动的话，它就会浮到当前行的最左边或者最右边，形成方图环绕的效果。

  demo在这里

• 浮动的元素脱离了文档流，会遮住div元素，但是不会遮住div的具体内容，浮动元素不会撑起父级元素的高度，父级元素的高度是由没有脱离文档流的元素撑起来的。

  demo在这里

• float最重要的技巧：清除浮动。浮动的元素脱离文档流，不会撑起父元素的高度，所以如果浮动元素高度大于父元素，就会跑出来，那么在这种情况下如何将父元素包住它，如何让浮动元素来撑起父元素的高度？

  使用clear方法。设置一个元素clear:both;它的左边和右边都不能有浮动元素，这样它就会跑到浮动元素的下面，而它又是处于文档流中，这样就使它上方的浮动元素也被父元素包起来。而这个元素我们通常会用父元素的伪元素来写。（踩坑：这里就不能写position了。。。。写了还怎么撑高度呀）

<style>
    .parent{
      border:1px solid red;
    }
    .parent:after{
      display:block;
      content:'';
      /* position:absolute;   这里不能写position写了就脱离文档流了，就不能撑起父元素的高度了，蠢货！*/
      clear:both;
    }
    img{
      float:left;
      opacity:0.5;
    }
  
  </style>

这里踩了一个坑，如果用伪元素来撑高度的话，怎么能写position呢？流汗！流汗！

demo在这里

6. 清除浮动的三种方法

• 写一个div标签，设置clear:both;

• 在父元素写一个CSS伪类（类似一个span标签），设置clear:both; 这种办法用的最多

• 设置父元素overflow:hidden/auto;

  第三种方法的demo