查漏补缺

作者: Monee121 | 来源:发表于2018-04-11 18:43 被阅读0次

【Android面试查漏补缺】之事件分发机制详解
查漏补缺
查漏补缺
查漏补缺
查漏补缺
查漏补缺
查漏补缺
查漏补缺
查漏补缺
查漏补缺

如果想让HTML5标签兼容低版本浏览器的话，可以使用 html5shiv js来实现。
注意：一定要把它引入到前面。

<!--[if lt IE 9]>
        <script src="html5shiv.min.js"></script>
    <![endif]-->
    <!--[if IE 6]>
        条件注释语句：可以一直到IE 9
    <![endif]-->

    <!--[if gt IE 6]>
        大于IE6 （不含6）
    <![endif]-->

2

<details open>
        <summary>和details配合使用的 - 标题</summary>
        爱上对方爱上对方爱的色放爱上对方爱上对方爱上对方爱上对方爱的色放
    </details>

3.audio

 <!--<audio src="tq.mp3" controls autoplay muted loop preload></audio>-->
    <audio controls autoplay muted loop preload>
        <source src="tq.ogg" type="audio/ogg">
        <source src="tq.mp3" type="audio/mpeg">
        <source src="tq.wav" type="audio/wav">
    </audio>

    <!--
        controls  显示浏览器自带的控制条 （每个浏览器都不一样）
        autoplay    自动播放
        muted  静音
        loop    循环
        preload     预加载
            当 元素身上出现了 autoplay  默认就是预加载的

        href 和 src区别
            href 引入资源   可以并行加载  link . href
            src  替代资源   当该文件没有加载完成的时候，不会进行后面的操作。

        音频转换 工具：
            格式工厂
    -->

4.video

<input type="button" value="播放"><br>
    <video poster="i.jpg" width="600" height="400" controls id="video">
        <source src="v/mov_bbb.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
        <source src="v/mov_bbb.ogv" type='video/ogg; codecs="theora, vorbis"'>
        <source src="v/mov_bbb.webm" type='video/webm; codecs="vp8, vorbis"'>
    </video>
    <script>
        var oBtn = document.getElementsByTagName('input')[0];
        var oVideo = document.getElementById('video');

        oBtn.onclick = function(){
            oVideo.play();
        }


    </script>
    <!--
        controls  显示浏览器自带的控制条 （每个浏览器都不一样）
        autoplay    自动播放
        muted  静音
        loop    循环
        preload     预加载
            当 元素身上出现了 autoplay  默认就是预加载的
        poster="i.jpg"  封面（用在未播放之前的图片）


        视频转换 工具：
            webm  狸窝
            ogv ogv转换工具
    -->

隔行变色

6

image.png
7

image.png
8

image.png
9.

image.png
10

image.png
11

image.png
12

image.png
13

image.png
14

image.png 15

image.png

16

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>零玖玖教育 - ljj.cn </title>
    <meta name="author" content="零玖玖教育 - ljj.cn">
    <meta name="copyright" content="零玖玖教育 - ljj.cn">
    <meta name="description" content="零玖玖教育，是一家专注的前端开发培训的公司，是目前培训行业中最具口碑的机构。我们向学员提供了JavaScript、nodeJs、AngularJS、jQuery、HTML+CSS、HTML5+CSS3，移动端等课程。">
    <style>
        *{
            margin:0;
            padding: 0;
            list-style: none;
        }
        .list{
            height: 400px;
            border: solid 1px red;
            display: flex;

            /*
                为复杂布局而生
                    -webkit-flex-shrink
                    缩小比例
                        此时剩余空间是不足时都将等比例缩小
                        0 表示不参加收缩比例
                        若没写该属性，则为1

                    -webkit-flex-grow
                        扩展比率
                        剩余空间是正值的时，伸缩项目相对于伸缩容器里其他伸缩项目能分配到空间比例
                            若没写该属性，则为0
                            0代表不参与扩展



            */
        }
        .list li{
            height: 40px;
            color: #FFF;
        }

        .list li:nth-child(1){
            background-color: #E3B456;
            width: 800px;
            flex-shrink: 2;
        }
        .list li:nth-child(2){
            background-color: #D94C3D;
            width: 300px;
        }
        .list li:nth-child(3){
            background-color: #C9EBFA;
            flex: 1;
            white-space: nowrap;
        }
        .list li:nth-child(4){
            background-color: #BA5F56;
            flex: 1;
            white-space: nowrap;
        }
        .list li:nth-child(5){
            background-color: #F1A20A;
            width: 267px;
            flex-shrink: 0;
        }

    </style>
</head>
<body>
<ul class="list">
    <li>800 - 779</li>
    <li>300 - 292</li>
    <li>为为为为为为为为</li><!--64-->
    <li>为为为为</li><!--64-->
    <li>267 - 260</li>
</ul>

现在总体 剩余的  1238 （总宽度 - 自适应两个元素的宽度的和）
（每个元素的实际宽度 / 总宽度） * 剩余的宽度
1 800
2 300
3
4
5 267


</body>
</html>

image.png

<style>
        *{
            margin:0;
            padding: 0;
            list-style: none;
        }
        .list{
            height: 400px;
            border: solid 1px red;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: center;
            /*
                justify-content（水平对齐方式）
                flex-start | flex-end | center | space-between | space-around;
                左对齐 | 右对齐 | 居中对齐 | 两端对齐(之间的间隔相等) | 每个项目两侧的间隔相等

                align-items（垂直对齐方式）
                flex-start | flex-end | center | baseline | stretch
                起点对齐 | 终点对齐 | 中点对齐 | 基线对齐 | 默认值(未设置高度或设为auto，将占满整个容器的高度)

                align-content （多行对齐方式）
                注：需要多行才行
                多根轴线的对齐方式
                flex-start | flex-end | center | space-between | space-around | stretch
                左对齐 | 右对齐 | 居中对齐 | 两端对齐(之间的间隔相等) | 每个项目两侧的间隔相等 | 轴线占满整个交叉轴

                align-self
                允许单个项目有与其他项目不一样的对齐方式
                auto | flex-start | flex-end | center | baseline | stretch
                该属性可能取6个值，除了auto，其他都与align-items属性完全一致。
                可覆盖align-items属性
                默认值auto，表示继承父级元素的align-items，如果没有父级，则则等同于stretch


                 当这两个属性遇到了
                    flex-direction: column / column-reverse  整个顺序就都变了。

            */
        }
        .list li{
            height: 40px;
            color: #FFF;
        }

        .list li:nth-child(1){
            background-color: #E3B456;
            align-self: flex-end;
        }
        .list li:nth-child(2){
            background-color: #D94C3D;
            width: 300px;
        }
        .list li:nth-child(3){
            background-color: #C9EBFA;
        }
        .list li:nth-child(4){
            background-color: #BA5F56;
        }
        .list li:nth-child(5){
            background-color: #F1A20A;
        }

    </style>
</head>
<body>
<ul class="list">
    <li>800 - 779</li>
    <li>300 - 292</li>
    <li>为为为为为为为为</li><!--64-->
    <li>为为为为</li><!--64-->
    <li>267 - 260</li>
</ul>