开发者社区> 流楚丶格念> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

CSS高级技巧——鼠标样式,轮廓,文本域防拖拽,vertical-align 垂直对齐,文字溢出问题

简介: CSS高级技巧——鼠标样式,轮廓,文本域防拖拽,vertical-align 垂直对齐,文字溢出问题
+关注继续查看

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以上都支持的尽量用


案例


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    li {
         cursor: pointer; 让我们的鼠标样式变成小手
        /*cursor: text;  让我们的鼠标样式变成选择*/
        /*cursor: default; /* 让我们的鼠标样式小白*/
    }
    p {
        width: 100px;
        height: 100px;
        background-color: pink;
        cursor: move;  /*鼠标变成十字架样子*/
    }
    </style>
</head>
<body>
    <ul>
        <li>文字效果</li>
        <li>文字效果</li>
        <li>文字效果</li>
        <li>文字效果</li>
        <li>文字效果</li>
        <li>文字效果</li>
    </ul>
    <p></p>
    <ul>
  <li style="cursor:default">我是小白</li>
  <li style="cursor:pointer">我是小手</li>
  <li style="cursor:move">我是移动</li>
  <li style="cursor:text">我是文本</li>
</ul>
</body>
</html>


轮廓 outline


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


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


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


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


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


案例


image


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    input {
        outline: none;  /*取消轮廓线的做法*/
        border: 1px solid #ccc;
        width: 200px;
        height: 25px;
        background: url(images/s.png) no-repeat 180px center;
    }
    textarea {
        resize: none;  /*防止拖拽*/
        outline: none;  /*取消蓝色边框*/
    }
    </style>
</head>
<body>
    <input type="text">
    <textarea name="" id="" cols="30" rows="10"></textarea>
</body>
</html>


防止拖拽文本域resize


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


右下角可以拖拽:


<textarea></textarea>


右下角不可以拖拽:


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


vertical-align 垂直对齐


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


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


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


vertical-align 垂直对齐, 这个看上去很美好的一个属性, 实际有着不可捉摸的脾气,否则我们也不会这么晚来讲解。


image


vertical-align : baseline |top |middle |bottom 


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


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


image


图片、表单和文字对齐


所以我们知道,我们可以通过vertical-align 控制图片和文字的垂直关系了。 默认的图片会和文字基线对齐。


去除图片底侧空白缝隙


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


解决的方法就是:


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


image


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


image


对齐案例


不使用方法1 2,底部就会有小空白


image


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    img {
        /*方法一*/
        vertical-align: middle;
        /*方法二*/
        display: block;
    }
    div {
        border: 2px solid red;
    }
    </style>
</head>
<body>
    <div>
        <img src="images/tudou.jpg" height="252" width="448" alt=""> 
        <!-- my name is 强哥 -->
    </div>
</body>
</html>


溢出的文字隐藏


word-break:自动换行


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


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


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


主要处理英文单词


white-space


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


normal :  默认处理方式


nowrap :  强制在同一行内显示所有文本,直到文本结束或者遭遇br标签对象才换行。


可以处理中文


text-overflow 文字溢出


text-overflow : clip | ellipsis


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


clip :  不显示省略标记(…),而是简单的裁切


ellipsis :  当对象内文本溢出时显示省略标记(…)


注意一定要首先强制一行内显示,再次和overflow属性 搭配使用


溢出案例


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            /*overflow: hidden;  溢出隐藏*/
            overflow: scroll;  /*scroll 滚动条 */
            overflow: auto;  /*auto 自动  */
        }
    </style>
</head>
<body>
    <div>
        溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字
        溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字
        溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字
        溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字
        溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字
        溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字
        溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字
        溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字
        溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字
        溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字
        溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字
        溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字
        溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字
    </div>
</body>
</html>


案例:溢出文字变省略号


image


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }
    body {
        padding: 30px;
    }
    li {
        list-style: none;
        width: 200px;
        height: 30px;
        border: 1px solid pink;
        white-space: nowrap;
        /*1.强制在同一行内显示所有文本,直到文本结束或者遭遇br标签对象才换行*/
        overflow: hidden;  /* 2. 超出的部分 隐藏*/
        text-overflow: ellipsis;  /* 3. 溢出的部分用省略号替代*/
        line-height: 30px;
    }
    </style>
</head>
<body>
    <ul>
        <li>文字内容文字内容文字内容文字内容文字内容</li>
    <li>文字内容文字内容文字内容文字内容文字内容</li>
    <li>文字内容文字内容文字内容文字内容文字内容</li>
    <li>文字内容文字内容文字内容文字内容文字内容</li>
    <li>文字内容文字内容文字内容文字内容文字内容</li>
    </ul>
</body>
</html>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
XGRIDS三维重建服务,构建云上数字孪生世界
基于阿里云建设三维重建云平台,搭建云端仿真资源池
10564 0
SAP Spartacus B2B ListComponent响应回车事件的实现
SAP Spartacus B2B ListComponent响应回车事件的实现
20 0
【linux】CentOS编译程序报错 修复 ./Modules/_ssl.c:64:25: 致命错误:openssl/rsa.h:没有那个文件或目录
如果你在编译时遇到这个错误,这可能是下面的原因:你尝试编译的程序使用OpenSSL,但是需要和OpenSSL链接的文件(库和头文件)在你Linux平台上缺少。 所以在CentOS下, 退到根路径,【需要在root用户下】然后输入: yum install openssl-devel 安装完成后,重新编译自己的程序即可。
2287 0
2017广东工业大学程序设计竞赛初赛 题解&源码(A,水 B,数学 C,二分 D,枚举 E,dp F,思维题 G,字符串处理 H,枚举)
Problem A: An easy problem Description       Peter Manson owned a small house in an obscure street.
948 0
与众不同 windows phone (20) - Device(设备)之位置服务(GPS 定位), FM 收音机, 麦克风, 震动器
原文:与众不同 windows phone (20) - Device(设备)之位置服务(GPS 定位), FM 收音机, 麦克风, 震动器 [索引页][源码下载] 与众不同 windows phone (20) - Device(设备)之位置服务(GPS 定位), FM 收音机, 麦克风, 震动器 作者:webabcd介绍与众不同 windows phone 7.
1072 0
ORA-26040: Data block was loaded using the NOLOGGING option
测试如下: SQL> create table testerr  2  as  3  select * from dba_objects where 1=2; Table created SQL> alter table testerr nologging; Table altered 然后进行备份,然后。
901 0
+关注
流楚丶格念
csdn平台优质创作者,51cto TOP博主,360图书馆科技博主,燕山大学目前大三在读,日拱一卒,功不唐捐,加油!!!
1010
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载