温习css

• css速查表

• 定位(position)

  • relative :控件依旧占据文档流位置,但是显示的效果类似absolute,但是占据文档流位置 所以会影响后面元素的位置。

• z-index

  • 用于position非static的元素上,默认是0。

• clip:rect(top,right,bottom,left)

  • 四个值分别是剪裁出发点

    
    
    

    clip示意图
  • 图片从中心渐变打开

  结果
  

  

  淡出效果

• vertical-align

  • display:table-cell(单元格特性)的元素设置vertical-align:middle可以让内容(包括块级元素)垂直居中
  • 内联元素(包括inline-block)设置vertical-align:middle可以使该元素在行内居中对齐。
  • 注意,如果外层容器是块级元素如果设置了高度，则需要设置line-height和高度一样，如果没有设置高度，lineHeight则和容器内元素最高的那个一样高，再设置容器内的所有内联元素的vertical-align:middle就可以使他们都在行里居中对齐！

  图片解析

  
  

  

  没行高

  
  

  

  有行高

• 块级元素垂直居中

  • 设置父元素为display:table-cell;然后父元素设置vertical-align:middle;
    • 缺点 多重容器嵌套时，高宽不能用百分比相对父级元素
  • 设置父元素position:relative;子元素为绝对定位;然后用top:50%;transform:translateY(-50%)设置定位.
    • 缺点 不占常规流
  • 设置父元素position:relative;子元素为绝对定位;然后用top:0;bottom:0;margin:auto 0;设置定位
    • 缺点 不占常规流
一定要设置子元素高度，不能让子元素来撑高度，因为不设置高度的话,浏览器会自动计算其高度

• 块级元素水平居中

  • margin:0 auto;

• 块级元素绝对定位(水平、垂直)居中

// !!!父元素首先要设置非static的定位

    position:absolute;left:0;right:0;margin:0 auto;//相对父元素水平居中
    position:absolute;top:0;bottom:0;margin:auto 0;//相对父元素垂直居中  
    position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;//相对父元素水平垂直居中

//  浏览器会自动计算出绝对定位元素的margin值。
//  设置上下、左右为0的情况下如果元素没有设置高度或者宽度的话，浏览器会给元素计算宽高。
//  如果设置了高宽并且如果设置margin:auto的话，浏览器则会自动计算元素的margin值，如果没设置auto,则不计算margin值。

• box-shadow,text-shadow,filter:drop-shadow

  • box-shadow比text-shadow多的属性:外延,inset
  • 默认第一个参数是右边阴影，第二个是西边阴影，负数相反
  • drop-shadow参数和text-shadow是一样的,它的作用把显示出来的形状投影，所以是可以投影不规则图形。
    [图片上传失败...(image-a60deb-1514149374837)]

• float图文混排

  • 图片浮动,文字不浮动，就会出现图文混排的效果。
    [图片上传失败...(image-4e0135-1514149374837)]
  • 注意,文字默认的word-wrap是会撑开容器的，所以要设置该属性为break-word,遇到边框就会进行换行。
  • 容器内部元素如果浮动的话，容器就不会被撑开，可以使用overflow:hidden，强行让容器计算高度，或者在浮动下方添加一个元素设置clear:both。清除当前行的浮动

• background-position

  • 表示图片从哪个点显示，默认是从左上角顶点开始显示
  • 传两个数值，xx xx代表left xx top xx(距离左边和上边距离)然后定位到一个点，图片会从这个点开始显示下去
  • 传四个值则,right xx bottom xx可以自己设置顶点位置，但是兼容性不好。

• background-attachment

  • fixed表示背景以浏览器作为参照物固定,上下滚动内容图片不跟随滚动
  • 默认值是scroll 表示上下滚动时，背景随之滚动

• background-clip

  • 默认是border-box 表示背景从边框开始往外剪裁
  • content-box 表示背景从内容开始往外剪(剪掉内外边距)
  • padding-box 表示从内边距开始剪裁

• white-space

  • normal 遇到边框不换行 合并空格 不合并换行
  • pre 遇到边框不换行 不合并空格
  • nowrap 遇到边框不换行 合并空格和换行 强制在一行内把所以内联内容显示完。
  • pre-wrap 遇到边框换行 不合并空格
  • pre-line 遇到边框换行 合并空格 不合并换行

• 选择器

  • E~F 会命中E下面的所有F兄弟节点
  • E+F 只会命中在E的下一个兄弟节点F

• text-overflow (文字超出时的显示状态)

  • 必须和white-space,overflow一起使用
    • clip 默认 隐藏超出文字部分
    • ellipsis 超出文字部分用省略号代替

• zoom

  • 按数值比例缩放元素

• cursor

  • 鼠标移动到元素时的状态

• box-sizing 盒模型的高宽属性组成模式

  • content-box ”高宽属性“仅为内容高宽，不包括内边距边框
  • border-box “高宽属性”包括内边距和边框的宽度

• transform-origin 形变作用点

  • 默认center center 中心点
  • 可以任意调两个方向作为形变转换点 例:left bottom

• transform

  • rotate(xxdeg)绕着Z轴旋转 = rotateZ()
  • rotateX(xxdeg)绕着X轴
  • rotateY(xxdeg)绕着Y轴

• perspective 透视距离

  • 给父元素设置透视距离后，子元素的形变动画会变成3d的

• 媒体查询

  • 设置某个条件状态下元素的状态

  @media all and (min-width: 200px) and (max-width: 2500px){
          .f{
              background: gold;
          }
      }
  

• 设置容器背景等比例缩放

  • 设置等比例背景

• 圣杯布局等各种布局

  • 双飞燕布局