css笔记一： vertical-align规则

原文出处：https://www.cnblogs.com/shuiyi/p/5597187.html
建议：英文里面的图片要比上面链接中的全。

1.vertical-algin是什么？

本意是用来对齐内联级元素，后来发展成垂直对齐布局。

2.什么情况下使用？

对齐内联级元素。

3.使用规则是什么？

1. 相关元素以及示意图

// 这是行框,父元素示意图
-------------------------------------(行框外边缘)

=====================(行框中的文本框顶部)
______________________(行框中的基线)
=====================(行框中的文本框底部)

-------------------------------------(行框外边缘)

// 而子元素示意图
=====================(子元素外边缘顶部)
______________________(子元素的基线)
=====================(子元素的外边缘底部)

2.对齐方式

子元素基线------对照父元素的基线对齐：baseline、sub、super、length、percent
子元素中心------对照父元素基线： middle
子元素外边缘—对照父元素文本框：text-top、text-bottom
子元素外边缘—对照父元素的顶部底部边缘：top、bottom

3.注意

在一个行中,每一个子元素的基线分别和行框的基线 | 行框的外边缘| 行框的文本框相照应,并满足每一个子元素的对齐方式, 可能导致行框高度变化
内联元素的默认对齐方式是baseline, 因为depth的存在,可能导致底部间隙. 如果有内容(内容会默认移动基线),或者设置基线为middle,都可解决这个问题.
内联元素中间有间隙,如果width:50%, 则导致两行排列,可以使用注释来解决white-space问题.

4.vertical-align和float布局的比较

对于高度参差不齐的，vertical-align占优点。
float脱离文本流，且有父元素高度坍塌。
浮动布局用于文字环绕比较合适。横向排列使用inline-block。

5.最后

1. 如何解决vertical-align问题

使用vertical-align,需要知道它是干什么的?
以及父元素和子元素的基线怎么找?
然后对齐他们就可以了.

2.引用文章中的bug

原文中, "“示例2—行框基线的移动”, 经测试图片是和内容有问题的,
因为,高个元素和低个元素的vertical-align对齐方式相结合,是可能造成行高度变高的.(详见本笔记3.1)
下面是代码,各位自行测试.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vertical测试</title>
    <script src="https://cdn.staticfile.org/jquery/2.1.0/jquery.js"></script>
</head>
<style>
    .container {
        height: 500px;
        margin: 30px;
    }

    .set{
        width: 300px;
        border-right: 1px dashed #a0b3d6;
        display: inline-block;
    }

    .content{
        margin-left: 100px;
        width: 500px;
        height: auto;
        background-color: aqua;
        float: right;
    }

    .conFirst {
        width: 100px;
        height: 100px;
        background-color: blue;
        vertical-align: baseline;
        display: inline-block;
    }
</style>
<body>
    <div class="container">
        <div class="set">
            <p>请选择:</p>
            <p>
                背景颜色:
                <select id="colorset">
                    <option value="black">黑色</option>
                    <option value="yellow">黄色</option>
                    <option value="gray">灰色</option>
                    <option value="green">绿色</option>
                </select>
            </p>
            <!-- <p>
                背景行高:
                <input id="bg_line_height" />
            </p> -->
            <p>
                设置数量:
                <select id="count">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                </select>
            </p>
            <p>
                选择要修改第几个元素:
                <select id="num">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                </select>
            </p>
            <p>
                修改内容:
                <input id="cont1" />
            </p>
            <p>
                修改高度:
                <input id="height1" />
            </p>
            <!-- <p>
                修改宽度:
                <input id="width1" />
            </p> -->
            <!-- <p>
                修改行高:
                <input id="line_height" />
            </p> -->
            <p>
                修改vertical-align样式:
                <select id="vert1">
                    <option value="top">top</option>
                    <option value="bottom">bottom</option>
                    <option value="baseline">baseline</option>
                    <option value="middle">middle</option>
                    <option value="text-top">text-top</option>
                    <option value="text-bottom">text-bottom</option>
                </select>
            </p>
        </div>
        <div class="content">
            x
            <span class="conFirst"></span>
            <span class="conFirst" ></span>
            <span class="conFirst" style="overflow:hidden;"><span style="overflow:hidden;">adf</span></span>
            <span class="conFirst"></span>
            <span class="conFirst"></span>
            <span class="conFirst"></span>
            <span class="conFirst"></span>
            <span class="conFirst"></span>
        </div>
    </div>
    <script>
        $(function(){
            var $content = $('.content');
            var idx = 1;
            var $current = $('.content > span').eq(idx - 1);

            $("#colorset").on("change", function(el, value){
                $content.css("background-color", $("#colorset").val());
            })

            $("#count").on("change", function(el, value){
                var count = $("#count").val();
                var hasCount = $('.content > span').length;
                if(hasCount < count){
                    for(var i = 0; i < count - hasCount; i++){
                        var span = $("<span></span>");
                        span.addClass("conFirst");
                        $content.append(span);
                    }
                }

                if(hasCount > count){
                    $('.content > span').slice(count - 1, hasCount - 1).remove();
                }
            })

            $("#num").on("change", function(el, value){
                idx = $("#num").val();
                $current = $('.content > span').eq(idx - 1);

            })

            $("#cont1").on("input", function(el, value){
                $current.text($("#cont1").val());
            })

            $("#height1").on("input", function(el, value){
                $current.css("height", $("#height1").val());
            })

            $("#vert1").on("change", function(el, value){
                $current.css("vertical-align", $("#vert1").val());
            })
        });
        
    </script>
</body>
</html>