取消表单和文本域外轮廓.图片和文字实现垂直居中，溢出文字的省略号显示，鼠标移动到对应的Li时的边框更变颜色

Posted 2021-12-22 勇敢*牛牛

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了取消表单和文本域外轮廓.图片和文字实现垂直居中，溢出文字的省略号显示，鼠标移动到对应的Li时的边框更变颜色相关的知识，希望对你有一定的参考价值。

取消表单和文本域外轮廓和拖曳

<style>
        input,
        textarea 
            /* 取消文本框轮扩线 */
            outline: 0;
        
        /* 文本域控制大小 防止拖曳 */
        textarea 
            resize: none;
        
    </style>

图片和文字实现垂直居中

<body>
    <style>
        .user img 
            vertical-align: middle;
            /* 图片与文字位置 */
        
    </style>
    <div class="user">
        <img src="images/use.png" alt="">
        qq-limimi
    </div>

</body>

解决图片下方的空白缝隙

一、vertical-align: middle;基线问题
二、display：block；行内转块级元素

溢出文字的省略号显示

单行文本：

<style>
        div 
            width: 150px;
            height: 80px;
            background-color: pink;
            margin: 100px auto;
            单行显示
            white-space: nowrap;
            多余的切除
            overflow: hidden;
            切除部分用省略号显示
            text-overflow: ellipsis;
        
    </style>
    <div class="user">
        啥也不说了，此处省略一万字
    </div>

鼠标移动到对应的Li时的边框更变颜色

<body>
    <style>
        ul li 
            position: relative;
            z-index: 0;
            float: left;
            margin-left: -1px;
            list-style-type: none;
            width: 200px;
            height: 400px;
            border: 1px solid red;
        
        ul li:hover 
            z-index: 1;
            border: 1px solid blue;
        
    </style>

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>

碰见问题就是“z-index”在位置的相对之下生效

以上是关于取消表单和文本域外轮廓.图片和文字实现垂直居中，溢出文字的省略号显示，鼠标移动到对应的Li时的边框更变颜色的主要内容，如果未能解决你的问题，请参考以下文章