JS电影选票

一夕ξ

于 2022-04-28 09:15:20 发布

阅读量388

点赞数

分类专栏：前端学习文章标签： html 前端 css javascript

本文链接：https://blog.csdn.net/qq_45387575/article/details/124461417

版权

前端学习专栏收录该内容

77 篇文章 6 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="static.css">
</head>

<body>
    <div class="box">
        <div class="zuowei">
            <ul>
            </ul>
        </div>
        <div class="center">屏幕中央</div>
    </div>
    <script src="static.js"></script>
</body>

</html>

window.onload = function() {
    //根据输入的座位数目，动态生成li,附加到ul里面，最大值为30
    var ul = document.querySelector('.zuowei ul')
    var flag = []
    var a = 30
    for (i = 0; i < a; i++) {
        var li = document.createElement('li')
        li.className = 'listy'
        ul.appendChild(li)
        flag[i] = 0
        li.setAttribute('id', i)
    }
    var lis = document.querySelectorAll('li')
        //利用事件委托给每个li添加点击事件.因为是动态生成的li所以无法用事件委托.
        //上述错误。动态生成的元素可以使用addeventlistener来进行事件委托，注意书写格式
        // ul.addEventListener('click', function(e) {
        //         e.target.style.backgroundColor = 'pink'
        //     })
        // console.log(flag);

    for (i = 0; i < lis.length; i++) {
        lis[i].addEventListener('click', function() {
            var b = this.getAttribute('id')
                //   console.log(b);
            if (flag[b] == 0) {
                this.className = 'listy'
                this.innerText = '座位已选'
                this.style.backgroundColor = 'skyblue'
                flag[b] = 1
            } else if (flag[b] == 1) {
                this.className = 'listy'
                this.innerText = ''
                this.style.backgroundColor = ''
                flag[b] = 0
            }
        })
    }
}

.box {
    width: 1000px;
    height: 800px;
    border: 1px solid grey;
    margin: 100px auto
}

.zuowei {
    width: 800px;
    height: 600px;
    margin: 0 auto
}

.center {
    width: 600px;
    height: 120px;
    font-size: 35px;
    border: 1px solid grey;
    margin: 40px auto;
    text-align: center;
    line-height: 120px;
}

ul {
    display: block;
    width: 800px;
    height: 500px;
}

.listy {
    /* display: inline-block; */
    list-style: none;
    float: left;
    width: 130px;
    height: 80px;
    background-color: grey;
    font-size: 25px;
    text-align: center;
    line-height: 80px;
    margin-top: 10px;
    margin-right: 13px;
    padding: 0px;
}

注意：如果将里面li元素的css属性改为行内块：

当点击后，会出现位置下移，

vertical-align:’inline-block'依赖型元素

vertical-align属性。按照 w3school 上的解释：该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐方式，默认值为 baseline。

行内元素基线---所在行基线

辨别“行内元素的基线”与“行内元素所在行的基线”

“行内元素的基线”就是我们在基线中所说的：字母“x”的下端沿。我们在一个元素里写一个"x"，它的下沿就是这个元素的基线。

可以看到，元素的基线和元素的底线之间是有间距的（上图"x"和红色底边之间），这部分留给"g"、"j"等字母或中文字符

那么什么是“该元素所在行的基线”？一句话概括就是：所在行的基准元素在对齐时所依据的那条线。我们把该元素所在行当作父元素，这句话表明，父元素的基线是由它的一个子元素——基准元素决定的，基准元素依据哪条线对齐，父元素的基线就是哪条线。

行内元素的基线：是它的自有属性，当该元素没有子元素而只有文字时，取字母"x"的下端沿
行内元素的父元素的基线：来自于它的一个子元素——基准元素，基准元素依据哪条线对齐，父元素的基线就是哪条线

如果基准元素采用中线对齐，那么所在行的基线就是基准元素的中线；如果基准元素采用顶线对齐，那么所在行的基线就是基准元素的顶线。

有一个元素属于inline或是inline-block水平，其身上的vertical-align属性才会起作用。

vertical-align:middle属性的表现与否，仅仅与其父标签有关，至于我们通常看到的与后面的文字垂直居中显示那都是假象！

参考：

我对CSS vertical-align的一些理解与认识（一） « 张鑫旭-鑫空间-鑫生活

指定元素的垂直对齐方式，只对行内元素有效，就是display的属性为inline、inline-block、inline-table，再加一个table-cell (<td></td>)的元素，

line-height行高的定义就是两基线的间距；vertical-align的默认值就是基线；其他中线顶线一类的定义也离不开基线；基线甚至衍生出了：

行高是 上行线高度+上行线到下行线之间的高度 +下行线高度

当一个盒子的height=line-height时，文字就会垂直居中显示了

当行高小于height时，文字就偏上显示，（因为行高不够所以偏上显示）

当行高大于height时，文字就偏下显示，（因为行高冒了，所以文字就偏下显示）

当为元素设置设置float属性或position:absolute属性（可以试验一下），块级元素和内联元素都会脱离文档流，同时display属性都变为inline-block。此时，元素可以设置大小，并能在同一行显示。

案例中要保持位置不变的话需要给vertical-align设置为text-top属性

主要原因在于：

对于有内容的inline-block，其基线为最后一行文本基线所在的位置

而对于空白的inline-block，其基线为margin bottom边缘所在位置，即底部边缘。

注意：

对于内联元素各种想得通或者想不通的行为表现，基本上都可以用vertical-align和line-height来解释，以及进行行为矫正

一夕ξ

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS电影选票

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title...
复制链接

扫一扫