美文网首页
CSS高级技巧

CSS高级技巧

作者: fdeb17225224 | 来源:发表于2018-12-10 12:02 被阅读4次

原文:https://blog.csdn.net/z_x_qiang/article/details/82765990

1.鼠标样式属性:

1.1 cursor: default 默认的鼠标样式
1.2 cursor:pointer 小手的样子
1.3 cursor:text 勾选文本的样式;
1.4 cursor:move 拖动的样式;

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            ul li:nth-child(1){
                cursor: default;
            }
            ul li:nth-child(2){
                cursor: pointer;
            }
            ul li:nth-child(3){
                cursor: text;
            }
            ul li:nth-child(4){
                cursor: move;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>默认</li>
            <li>小手</li>
            <li>文本</li>
            <li>拖动</li>
        </ul>
    </body>

2.轮廓 outline

比如input默认有一脸色的轮廓线;

和border(边框)很像;

一般情况下都是去掉这种样式的;

            input{
                outline: 0;/*去除轮廓线*/
            }

3.文本区域 textarea

默认是可以拖动改变文本域大小的,在实际开发中是去掉这个属性的;
resize:none;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        
            textarea{
                resize:none
            }
        </style>
    </head>
    <body>
        
        <textarea name="" rows="30" cols="10"></textarea>
    </body>
</html>

4.垂直对齐

vertical-align :垂直对齐属性,但是对于块元素是无效的;

有baseline 、top、 middle、bottom 四种对齐方式;

只有对行内元素和行内块才有效,必须保证在一行显示的才行;

控制文字和图片垂直关系;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        
            img{
                vertical-align: middle;
            }
            textarea{
                vertical-align: middle;
            }
        </style>
    </head>
    <body>
        <img src="img/dongman.gif"  />一个gif图片
        <hr />
        <textarea name="" rows="30" cols="10"></textarea>文本输入区域
    </body>
</html>

5.空白缝隙问题:

图片和表单等行内块元素的底线会和父盒子的基线对齐;所以在有些浏览器上回有缝隙;

解决方法:

1.可以显示转换成块元素;

2.默认是vertical-align:baseline;但是这种有缝隙,所以该成top midden bottm都可以解决缝隙问题;

6.文字溢出的处理方案:

6.1 自动换行

work-break:break-all 允许才分单词进行换行;

keep-all 必须是带有连字符才能换行;

6.2 一行显示

while-space:nomal 默认是这样;

while-space:nowrap 强制一行显示;

6.3 省略显示

1.首先要一行显示;强制的 while-space:nowrap;

2.隐藏超出的部分 overflow: hidden;

3.设置省略号 text-overflow: ellipsis;

相关文章

  • CSS高级技巧

    双飞翼布局 什么是双飞翼布局呢? 事实上,圣杯布局其实和双飞翼布局是一回事。它们实现的都是三栏布局,两边的盒子宽度...

  • CSS 高级技巧

    1.黑白图像 img{filter:grayscale(100%)} 2.使用:not()在菜单上应用/取消应用边...

  • CSS:高级技巧

    学习目标 理解能说出元素显示隐藏最常见的写法能说出精灵图产生的目的能说出去除图片底侧空白缝隙的方法 应用能写出最常...

  • CSS高级技巧

    1、CSS精灵技术 sprite 减少请求次数 合成一张大图片(精灵图,雪剪图)处理网页背景图像的方式 2、字体图...

  • CSS高级技巧

    原文:https://blog.csdn.net/z_x_qiang/article/details/827659...

  • css高级技巧

    元素 显示和隐藏 display:none隐藏对象display:block显示元素隐藏后不有原来位置 visib...

  • CSS-高级技巧

    1. 元素的显示与隐藏 ① display 显示 display 设置元素是否及如何显示。 特点:隐藏之后,不再保...

  • iOS核心动画高级技巧 - 8

    iOS核心动画高级技巧 - 1iOS核心动画高级技巧 - 2iOS核心动画高级技巧 - 3iOS核心动画高级技巧 ...

  • 十几个 CSS 高级技巧汇总

    十几个 CSS 高级技巧汇总 「列举一下效果」 设置input的placeholder的字体样式 单行和多行文本超...

  • CSS教程汇总

    CSS揭秘实用技巧总结 不止于 CSS 灵活运用CSS开发技巧 前端基础篇之CSS世界 你未必知道的49个CSS知...

网友评论

      本文标题:CSS高级技巧

      本文链接:https://www.haomeiwen.com/subject/bijrhqtx.html