CSS_12_CSS的高级特性

最新推荐文章于 2023-02-09 22:09:43 发布

M r.J

最新推荐文章于 2023-02-09 22:09:43 发布

阅读量144

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_43196061/article/details/87904881

版权

CSS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

CSS高级特性

鼠标样式

cursor属性用来设置鼠标样式。

属性值	描述
default	取消鼠标样式（默认值）
pointer	指针类型
text	文本类型
move	移动类型

轮廓样式

outline属性用来设置轮廓样式，与border属性完全一样，可以理解为外边框。

/*轮廓 可以理解为外边框*/
/*outline: 1px solid red;*/
/*轮廓与边框不冲突*/
border: 1px solid yellow;
/*一般取消轮廓线*/
outline:none;/*outline:0;*/

通常用来取消轮廓样式,不设置轮廓样式。

防止拖拽

resize属性用来设置文本域拖拽效果。通常拉动文本域右下角，可以改变大小，会改变已经调整好的布局，此时需要固定文本大小。resize:none;设置之后，文本域大小固定了，鼠标点击文本域时会出现轮廓效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        textarea {
/*            resize: none;!*防止文本域拖拽效果，单鼠标点击的时候轮廓会显示出来*!           outline:0;*/
        }

    </style>
</head>
<body>
<textarea name="" id="" cols="30" rows="10"></textarea>

</body>
</html>

垂直居中

vertical-align属性用来是设置元素的垂直居中，块级元素无效。一般使用在图片与文字的居中，默认是基线对齐。

vertical-align:baseline|top|middler|bottom

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 200px;
            height: 100px;
            background-color: pink;
            margin: 0 auto;/*水平居中*/
            text-align: center;/*文字水平居中*/
            vertical-align: middle;/*垂直居中，对块级元素无效*/
        }
        img {
            /*图片是行内块*/
            border: 1px solid #000000;
            vertical-align: middle; /*默认为基线对齐，手动改为中线对齐*/
            /*top 顶线 bottom 底线*/
        }
        textarea {
            vertical-align: top;
        }
    </style>
</head>
<body>
    <div>文字居中</div>
    <hr>
    <img src="../images/二维码.png" alt="">
    图片和文字默认是基线对齐，但是我们要中线对齐
    <hr>
    用户留言:<textarea name="" id="" cols="30" rows="10"></textarea>
</body>
</html>

去除图片底部间隙

针对行内块元素而言，图片大小和盒子大小相同（盒子设置了背景颜色）。在低版本浏览器中，会出现盒子底部一小块空隙，理论上图片会覆盖盒子。

在这里插入图片描述

解决方案

方案一：转化为块级元素

display:block;

方案二：改变图片对齐方式

vertical-align:middle|top|

溢出的文字隐藏

word-break:自动换行

主要处理英文单词。

属性值	描述
normal	浏览器默认的换行规则
break-all	允许单词拆开显示
keep-all	保持单词完整性，只能在半角空格或连字符处换行

white-space:文本显示方式

设置或检索对象文本显示方式。通常前置在一行显示，如新浪新闻内容，都是在一行显示没有换行。
在这里插入图片描述

属性值	描述
normal	默认处理方式
nowrap	强制在一行显示文本

text-overflow:文字溢出

首先设置white-space:nowrap;（文本强制在一行显示）,其次overflow:hidden(隐藏超出的对象)，最后才能设置。

属性值	描述
clip	裁剪溢出部分
ellipsis	超出的部分用省略号显示

M r.J

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS_12_CSS的高级特性

CSS高级特性鼠标样式cursor属性用来设置鼠标样式。属性值描述default取消鼠标样式（默认值）pointer指针类型text文本类型move移动类型轮廓样式outline属性用来设置轮廓样式，与border属性完全一样，可以理解为外边框。/*轮廓可以理解为外边框*//*outline: 1px solid red;*//*...
复制链接

扫一扫

专栏目录