17-CSS3 高级技巧精灵图字体图标滑动门

最新推荐文章于 2022-03-12 16:25:07 发布

Sarrykiss

最新推荐文章于 2022-03-12 16:25:07 发布

阅读量977

点赞数 1

分类专栏：学习笔记

本文链接：https://blog.csdn.net/weixin_38178755/article/details/78791216

版权

本文深入探讨CSS3的高级技巧，包括CSS用户界面样式，如cursor、outline、resize及vertical-align的用法。接着介绍了如何处理文字溢出，如word-break和text-overflow的应用。特别强调了CSS精灵技术和字体图标的优势及使用流程，以减少HTTP请求和提高页面加载速度。此外，文章详细解析了滑动门技术，用于创建自适应元素背景，适用于导航栏等场景。最后提到了CSS3的伸缩布局和过渡效果，展示了其在响应式设计中的重要性。

摘要由CSDN通过智能技术生成

CSS高级技巧

CSS用户界面样式

所谓的界面样式，就是更改一些用户操作样式，比如更改用户的鼠标样式，表单轮廓等。但是比如滚动条的样式改动受到了很多浏览器的抵制，因此我们就放弃了。防止表单域拖拽

鼠标样式cursor

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

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

鼠标放我身上查看效果哦：

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

尽量不要用hand 因为火狐不支持 pointer ie6以上都支持的尽量用

轮廓 outline

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

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

input {
/* outline: 5px solid red;
border: 1px solid blue; */
outline: 0;  /* 取消轮廓线 */
        }

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

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

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

防止拖拽文本域resize

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

右下角可以拖拽：

右下角不可以拖拽：

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
    textarea {
        resize: none;  /* 防止文本域拖拽 */
            outline: none;/*  取消轮廓线 */
            width: 400px;
            height: 120px;
            border: 1px solid pink;
            background-color: #f6e7f7;
            color: hotpink;
        }
        </style>
    </head>
    <body>
<textarea name="" id="" cols="30" rows="10"></textarea>
    <p>下面是文字</p>
    </body>
</html>

vertical-align 垂直对齐

以前我们讲过让带有宽度的块级元素居中对齐，是margin: 0 auto;

以前我们还讲过让文字居中对齐，是 text-align: center;

但是我们从来没有讲过有垂直居中的属性，我们的妈妈一直很担心我们的垂直居中怎么做。

vertical-align 垂直对齐，这个看上去很美好的一个属性，实际有着不可捉摸的脾气，否则我们也不会这么晚来讲解。
注意：对块级元素没有效果

vertical-align : baseline |top |middle |bottom

设置或检索对象内容的垂直对其方式。

vertical-align 不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素，特别是行内块元素，通常用来控制图片和表单等。

图片和文字对齐

所以我们知道，我们可以通过vertical-align 控制图片或者表单（行内块）和文字的垂直关系了。默认的图片会和文字基线对齐。

去除图片底侧空白缝隙

有个很重要特性你要记住：如果一个元素没有基线，比如图片或者表单等行内块元素，则他的底线会和父级盒子的基线对齐。这样会造成一个问题，就是图片底侧会有一个空白缝隙。

解决的方法就是：

给img vertical-align:middle | top等等。让图片不要和基线对齐。
给img 添加 display：block; 转换为块级元素就不会存在问题了。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
    div {
        width: 200px;
        height: 100px;
        background-color: pink;
        margin-left: auto;
        margin-right: auto;  /* 左右自动 auto  盒子可水平居中对齐 */
        text-align: center;  /* 文字水平居中 */
        /* vertical-align: middle; 对于块级元素无效 */
        }
  img { /* 行内块 */
    /* vertical-align: baseline;  默认的基线对齐 */
    vertical-align: middle;  /* 手动改为中线对齐 */
        }
        textarea {
            height: 300px;
            width: 300px;
            vertical-align: middle;
        }
        </style>
    </head>
    <body>
    <div>文字居中</div>
    <hr>
    <img src="images/2.jpg" > 我好尴尬呀  
   <!-- 图片和文字默认的是基线对齐，但是我们想要  中线对齐 -->
    <hr>
    用户留言: <textarea ></textarea>  
    </body>
</html>

溢出的文字隐藏

word-break:自动换行

normal 使用浏览器默认的换行规则。

break-all 允许在单词内换行。

keep-all 只能在半角空格或连字符处换行。

text-overflow 文字溢出

text-overflow : clip | ellipsis

设置或检索是否使用一个省略标记（…）标示对象内文本的溢出

clip : 　不显示省略标记（…），而是简单的裁切

ellipsis : 　当对象内文本溢出时显示省略标记（…）
必须结合white-spacing 和overflow一起来用

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
        div {
            width: 120px;
            height: 20px;
            border: 1px solid #f00;
            white-space: nowrap;  /* 首先先需要添加这句话 强制一行*/