【前端】【html/css】前端学习之路（十二）：CSS高级技巧（一）

本文链接：https://blog.csdn.net/yongqianbao4519/article/details/80981269

1.元素的显示和隐藏

在CSS中有三个关于元素隐藏与显示的比较常见的单词，分别是 display visibility 和 overflow。

他们的主要作用是让一个元素在页面中消失，但是不会在文档源码中删除，如我们点击网页中广告的关闭按钮，会关闭广告，但一旦页面刷新了，就又会出现。

（1）display 显示

display设置或检索对象是否及如何显示

display: none 隐藏对象

display:block 显示对象（转换为块级元素）

特点：隐藏之后，不再保留位置。

示例

目标效果：

图片：

代码：

    <style>
        a {
            /*将行级元素转换为块级元素才可以为a标签添加宽高*/
            display: block;
            margin: 0 auto;
            width: 448px;
            height: 252px;
            /*子绝父相*/
            position: relative;
        }
        .mask {
            /*跟随父盒子的宽高*/
            width: 100%;
            height: 100%;
            /*可以在background中将透明度和背景图片一同设置*/
            background: rgba(0,0,0,.4) url("images/arr.png") no-repeat center;
            position: absolute;
            /*贴紧父盒子*/
            top: 0;
            left: 0;
            display: none;
        }
        /*当a标签hovor时>改变mask中的元素属性,记住这个写法,比较常用*/
        a:hover .mask {
            display: block;
        }
        
    </style>

<a href="#">
    <img src="images/tudou.jpg" alt="土豆视频点击">
    <div class="mask"></div>
</a>

（2）visibility 可见性

设置或检索是否显示对象。

visibillity: visible 对象可视

visibility: hidden 对象隐藏

特点：隐藏之后，继续保留原有位置。

（3）overflow 溢出

检索或设置当对象内容超出其指定高度及宽度时如何管理内容。

overflow: visible 不剪切内容也不添加滚动条。

overflow: auto 超出自动显示滚动条，不超出不显示滚动条。

overflow: hidden 不显示超过对象尺寸的内容，超出部分隐藏掉。

overflow: scroll 不管超出内容否，都显示滚动条。

2.CSS界面样式（用户操作样式）

（1）鼠标样式（cursor）

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

cursor :  default  小白 | pointer  小手  | move  移动  |  text  文本

代码：

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

截图截不到鼠标，所以各位可以把以上代码复制然后自己在网页看效果。

尽量不要用hand，因为火狐不支持。

（2）轮廓（outline）

是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用，如：

 outline : outline-color ||outline-style || outline-width

但是我们都不关心可以设置多少，我们平时都是去掉的。

最直接的写法是： outline: 0; 或者 outline: none;

 <input  type="text"  style="outline: 0;"/>

（3）防止拖拽文本域（resize）

resize：none 这个单词可以防止火狐谷歌等浏览器随意的拖动文本域。

右下角可以拖拽：

右下角不可以拖拽：

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

3.垂直对齐（vertical-align）

我们之前学过：

margin: 0 auto 块级元素居中对齐

text-align: center 文字居中对齐

但垂直居中却没有讲过，v-a就是一个，但是v-a是比较难控制的一个属性。

在网页中，我们的字符一般分为以下几个部分：

vertical-align : baseline |top |middle |bottom

v-a不影响块级元素的内容对齐，它只针对于 行内元素 / 行内块元素，特别是行内块元素，通常用来控制表单/文字的对齐。

（1）图片/表单和文字对齐

代码：

    <style>
        img {
            vertical-align: middle;
        }

    </style>

<div>
    <img src="images/tudou.jpg" alt="">
    我是测试文字（testing）
</div>

①vertical-align: baseline（默认）

②vertical-align: middle

③vertical-align: top

（2）去除图片底侧空白缝隙

当给上图加上边框之后，就会出现如下情况：

可以看见因为文字仅基线对齐的原因，所以将边框撑开了一部分，导致图片和边框有了一段空隙。

解决这个空隙有两种办法：

①给img添加 vertical-align: middle | top，让图片不要和基线对齐。

②给img添加display: block，将其转换为块级元素就不会存在问题了。

4.溢出文字隐藏

我们日常见到网页内容，有些内容比如标题比较长，在一个列表中无法显示完整，此时就需要将其隐藏，如：

要将内容隐藏，甚至在其后加上省略号，就需要如下几个属性。

示例代码：

    <style>
        li {
            width: 200px;
            height: 20px;
            border: 1px solid red;
            /*让文字即便超过了空间不会换行也不会溢出盒子*/
            white-space: nowrap;
            /*不添加overflow则text-flow不会生效*/
            overflow: hidden;
            /*给溢出的文字部分添加省略号*/
            text-overflow: ellipsis;
            /*将溢出的文字部分截取掉*/
            /*text-overflow: clip;*/
        }
    </style>

<ul>
    <li>我是测试我是测试我是测试我是测试我是测试我是测试我是测试</li>
    <li>我是测试我是测试我是测试我是测试我是测试我是测试我是测试</li>
    <li>我是测试我是测试我是测试我是测试我是测试我是测试我是测试</li>
    <li>我是测试我是测试我是测试我是测试我是测试我是测试我是测试</li>
    <li>我是测试我是测试我是测试我是测试我是测试我是测试我是测试</li>
</ul>