温习css

2017-12-25 本文已影响12人 Vijay_

css速查表
定位(position)
- relative :控件依旧占据文档流位置,但是显示的效果类似absolute,但是占据文档流位置所以会影响后面元素的位置。
z-index
- 用于position非static的元素上,默认是0。

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

四个值分别是剪裁出发点

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

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .donuts{
            width: 500px;
            height: 500px;
            position: absolute;
            clip:rect(0 500px 500px 0);
            background: black;
            color: white;
            margin: 100px ;
            transition: clip linear 2s;
        }
    </style>
</head>
<body>
<img class="donuts" src="http://img.hb.aicdn.com/577bb1aed67d6a979b9ba46bf9e8491cb98a4f3f195a0-LPL1qm_fw658" alt="">
<img class="donuts" src="http://img.hb.aicdn.com/577bb1aed67d6a979b9ba46bf9e8491cb98a4f3f195a0-LPL1qm_fw658" alt="">
<img class="donuts" src="http://img.hb.aicdn.com/577bb1aed67d6a979b9ba46bf9e8491cb98a4f3f195a0-LPL1qm_fw658" alt="">
<img class="donuts" src="http://img.hb.aicdn.com/577bb1aed67d6a979b9ba46bf9e8491cb98a4f3f195a0-LPL1qm_fw658" alt="">
<script>
    setTimeout(function () {
        var list = document.querySelectorAll(".donuts");
        list[0].style.clip = "rect(0 500px 0 0)";
        list[1].style.clip = "rect(0 0 500px 0)";
        list[2].style.clip = "rect(500px 500px 500px 0)";
        list[3].style.clip = "rect(0 500px 500px 500px)";
    },2000);

</script>
</body>
</html>

结果

淡出效果

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;
        }
    }

设置容器背景等比例缩放
- 设置等比例背景
圣杯布局等各种布局
- 双飞燕布局

温习css

猜你喜欢

热点阅读