前端（八）

作者: 要你何用杀了算了 | 来源:发表于2018-08-19 20:11 被阅读0次

前端(八)
前端（八）
聊聊你对前端的了解
前端学习(八)
2月21笔记
链家网前端总架构师杨永林：我的8年架构师成长之路
前端学习笔记八
前端学习任务八
好程序员web前端培训教程分享前端三大框架有哪些异同
前端三大框架有哪些异同？

1.条件Hack

    有一些情况，有一些特殊的代码我们只需要在某些特殊的浏览器中执行，而在其他的浏览器中不需要执行，
这时就可以使用CSS Hack来解决该问题
    CSS Hack实际上指的是一种特殊的代码，这段代码只在某些浏览器中可以识别，而其他浏览器
不能识别，通过这种方式，来为一些浏览器设置特殊的代码
     

    
    条件Hack
        它只对IE浏览器有效，其它的浏览器都会将它识别为注释
        IE10及以上的浏览器已经不支持这种方式


         以下内容只会出现在IE6中
    <!--[if IE 6]>
        <p>为了您和家人的健康，请远离IE6！！</p>
    <![endif]-->

    <!--[if IE 8]>
        <p>当前浏览器是IE8！！</p>
    <![endif]-->

    <!--[if lt IE 9]>
        <p>该标签会在IE9以下的浏览器中显示</p>
    <![endif]-->

    <!--[if gte IE 9]>
        <p>该标签会在IE9及以上的浏览器中显示</p>
    <![endif]-->

    <!--[if lte IE 9]>
        <p>该标签会在IE9及以下的浏览器中显示</p>
    <![endif]-->

    <!--[if ! IE 6]>
        <p>你的浏览器不是IE6</p>
    <![endif]-->

2.属性Hack

假设在IE6中需要将背景颜色设置为黄色才能达到和其它浏览器相同的效果
            
            
            希望黄色背景只在IE6中生效
                在样式前添加一个下划线，则该样式只有IE6及以下的浏览器才可以识别
            
            _background-color: yellow;

            添加了*的样式只有IE7及以下的浏览器认识
            *background-color: yellow;

            /*在样式最后添加一个\0，则只有IE8及以上的浏览器才能识别*/
            background-color: yellow\0;

            
            CSS Hack不到万不得已的情况尽量不要使用

3.选择符
在选择器前添加* html 则该选择器只有IE6可以识别

4.圆角阴影透明度

border-top-left-radius: 100px 50px;左上角为椭圆圆角
            border-top-left-radius: 100px;
            border-top-right-radius: 100px;左、右上角为正圆圆角
            border-radius: 40px;曲率半径为40的圆角矩形
            border-radius: 20%;最大200px，20%即40px

水平偏移 垂直偏移 羽化大小 扩展大小 颜色
            box-shadow: 10px 10px 10px 0px #bfa;

水平偏移 垂直偏移 羽化大小 扩展大小 颜色 是否内阴影
            box-shadow: 0px 0px 20px 2px red inset;

透明度30%，文字也透明了
            opacity: 0.3;

背景色变透明，但文字不会透明
            background-color: rgba(255,215,0,0.3);
            
边框透明
            border: 2px solid rgba(0,0,0,0.3);

5图片文字遮罩

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片文字遮罩</title>
    <style type="text/css">
        .box{
            width: 200px;
            height: 300px;
            margin: 50px auto 0;
            border: 1px solid #000;
            position: relative;
            /*默认文字不可见*/
            overflow: hidden;
        }
        .box img{
            width: 200px;
            height: 300px;
        }
        .box .pic_info{
            width: 200px;
            height: 200px;
            background-color: rgba(0,0,0,0.5);
            color: #fff;

            /*定位使色块在图片正下方*/
            position: absolute;
            left: 0;
            top: 300px;

            transition: all 500ms cubic-bezier(0.470, -0.485, 0.460, 1.435);
        }
        .box:hover .pic_info{
            /*色块上移*/
            top:150px;
        }
        /*间距用p标签的margin，而不直接给.pic_info用padding，因为padding会改变盒子大小*/
        .box .pic_info p{
            margin: 20px;
            line-height: 30px;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./img/2.jpg" alt="这是一张动漫图">
        <div class="pic_info">
            <p>图片说明：这是一张动漫图说明：这是一张动漫图说明：这是一张动漫图说明：这是一张动漫图</p>
        </div>
    </div>
</body>
</html>

运行结果：

6.元素选择

/*旋转方向判断
        1、X轴向右、Y轴向下、Z轴向屏幕外
        2、让轴向对着自己，顺时针方向就是该轴向的旋转方向*/
        .box{
            width: 300px;
            height: 300px;
            background-color: gold;
            margin: 50px auto 0;
            transition: all 500ms ease;
            /*设置盒子按3D空间显示*/
            transform-style: preserve-3d;
            transform: perspective(800px) rotateY(0deg);
        }
        .box:hover{
            /*默认沿Z轴旋转*/
            /*transform: rotate(45deg);*/
            /*perspective设置透视距离，经验数值800比较符合人眼的透视效果*/
            /*transform: perspective(800px) rotateX(45deg);*/
            transform: perspective(800px) rotateY(-45deg);
        }