元素和文字的显示和隐藏技术详解代码案例

元素的显示与隐藏

display

dispaly：none； 隐藏对象 display：block； 除了转换成块级元素以外，还有显示元素的意思。

特点是隐藏后，不再保留位置

a{
            width: 50px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            background-color: greenyellow;
        }
        .b{
            display: none;
            text-align: left;
        }
        .c{
            height: 35px;
            width: 100px;
            line-height: 35px;
            background-color: #F9F9F9;
            padding-left: 10px;
            /* display: none; */
        }
        .b div:hover{
            background-color: #F1F1F1;
        }
        .a:hover .b{
            display:block;
        }

<div class="a">左
        <div class="b">
           <div class="c">模板1</div>
           <div class="c">模板2</div>
           <div class="c">模板3</div>
        </div>
</div>

visibility可见性

visibility: visible; 对象可见
visibility:hidden: 对象隐藏
特点：隐藏之后，保留原有位置

overflow 溢出

检索或设置当对象的内容超过指定高度及宽度时如何管理内容
visible 不剪切内容也不加滚动条，
hidden 不显示超出对象尺寸的内容，超出部分隐藏掉
scroll 不管超出内容否，总是显示滚动条
auto 超出自动显示滚动条，不超出不显示滚动条

显示和隐藏总结

css用户界面样式

鼠标样式cursor

default 小白（默认）
pointer 小手
move 移动
text 文本
not-allowed 禁止

<ul>
<li style="cursor:default">我是小白</li>
<li style="cursor:pointer">我是小手</li>
<li style="cursor:move">我是移动</li>
<li style="cursor:text">我是文本</li>
<li style="cursor:not-allowed">我是文本</li>
</ul>

轮廓线outline

是绘制元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用
outline： outline-color || outline-style || outline-width

input{
    width: 300px;
    height: 30px;
    outline-color: #A0BEF0;
}

<input type="text">

防止拖拽文本域resize

<textarea style="resize: none;"></textarea>

vertical-align垂直对齐

vertical-align垂直对齐,它只针对于行内元素或行内块元素

vertical-align : baseline |top |middle |bottom

baseline 默认。元素放置在父元素的基线上
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
bottom 把元素的顶端与行中最低端的元素顶端对齐
middle 把元素放置在父元素的中部

img{
             width: 50px;
             height: 50px;
             vertical-align: middle;
         }
         
<p class="p2">
        12313213
        <img src="./1001726.jpg" alt="">
        64564674684
</p>    
效果如下

其他模式：

去除图片底侧空白缝隙

图片或者表单的等行内块元素，它的底线会和父级盒子的基线对齐，在图片的底侧就会有一个空白缝隙
解决方法：
给img设置vertical-align属性，改变对齐默认
给img添加display：block；转换为块级元素

溢出文字省略号显示

white-space设置或检索对象内文本显示方式，通常我们使用强制一行显示内容。

white-space：nowrap；  强制在同一行内显示所有文本，直到文本结束或遭遇br标签才换行
white-space：normal;   默认处理方式

text-overflow文字溢出，设置或检索是否使用一个省略标记（…）标示对象文本溢出

text-overflow:  clip;   不显示省略号（...），而是简单的剪切
text-overflow： ellipsis;    当对象内文本溢出时显示省略号（...）
text-overflow：  string；   使用给定字符串来代表被修剪的文本。

省略号三部曲

/*1. 先强制一行内显示文本*/
white-space: nowrap;
/*2. 超出的部分隐藏*/
overflow: hidden;
/*3. 文字用省略号替代超出的部分*/
text-overflow: ellipsis;