前端第八波_空巷挽清风的意思-CSDN博客

本文链接：https://blog.csdn.net/Kong_xiang/article/details/90237631

前端第八波

光标的样式

光标放在盒子上时的光标样式：

cursor:光标

default:默认 pointer:指针 move:移动 text:文本

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .one{
            height: 100px;
            width: 100px;
            background-color: red;
            cursor: default;/*变为默认的形状*/    
        }
        .two{
            height: 100px;
            width: 100px;
            background-color: green;
            cursor: pointer;/*变成小手的形状*/
        }
        .three{
            height: 100px;
            width: 100px;
            background-color: blue;
            cursor: move;/*变成十字架的形状*/
        }
        .four{
            height: 100px;
            width: 100px;
            background-color: yellow;
            cursor: text;/*变成文本框输入时的竖线形状*/
        }
    </style>
</head>
<body>
    <div class ="one">默认</div>
    <div class = "two">小手形状</div>
    <div class = "three">十字架形状</div>
    <div class = "four">文本编辑形状</div>
</body>
</html>

取消选中时的边框：

<input type="text">/*输入文本框*/

<textarea name="" id="" cols="30" rows="10"></textarea>/*文本区域*/

outline:none;/*取消选中时边框线，理由：默认颜色过于难看*/

resize:none;/*禁止文本框拖拽*/

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        input{
            height: 25px;
            width: 200px;
            outline: none;/*设置边框被选中时没有颜色*/
            border: 1px solid #ccc;/*设置边框的宽度，边框的样式，边框的颜色*/
        }
        textarea{
            outline: none;/*设置边框被选中时没有颜色*/
            resize: none;/*禁止文本框拖拽 理由：文本框拖拽会形象其他块儿的位置布局*/
            border: 1px solid #ccc;/*设置边框的宽度，边框的样式，边框的颜色*/
        }
    </style>
</head>
<body>
    <input type="text">
    <textarea name="" id="" cols="30" rows="10"></textarea>
</body>
</html>

文本框溢出文字处理

overflow(溢出)

visible(可见)：对与溢出的文字不做任何处理，超出框架；

hidden(隐藏的)：对于溢出的文字不显示；

auto(自动)：当文字不溢出时不现实滚动条，当文字溢出时显示滚动条（隐藏时与scroll样式相同）；

scroll(滚动)：总是显示滚动条；

overflow: visible;

overflow: hidden;

overflow: scroll;

文字溢出部分用省略号显示：

white-space:nowrap; /*强制在一行显示文本全部内容，除非文章中出现了强制换行（如：<br />）才换行*/

overflow: hidden; /*隐藏溢出部分*/

text-overflow:ellipsis; /*多余部分（显示不全的）用省略号代替*/

三句话缺一不可，顺序尽量不要改变

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .text_1{
            height: 30px;
            width: 200px;
            border: 1px solid red;
            margin:auto;

            white-space: nowrap;/*强制在一行显示文本全部内容，除非文章中出现了强制换行（如：<br />）才换行*/
            overflow: hidden; /*隐藏溢出部分*/
            text-overflow: ellipsis; /*多余部分（显示不全的）用省略号代替*/       
        }
    </style>
</head>
<body>
    <div class ="text_1">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
    文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
    文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
    文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
    文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
    文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
    文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>
</body>
</html>