overflow，white-space，text-overflow:ellipsis（显示...）text-overflow:ellipsis，鼠标样式，垂直居中，表单域限制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .a{
            width: 200px;
            height: 200px;
            background: red;
            /*overflow: auto;超过部分自动添加滚动条*/
            /*overflow: hidden;除掉超出盒子范围的元素*/
            /*overflow: scroll; 添加滚动条，不管元素超不超过*/
            /*display: none;*/
        }
    </style>
</head>
<body>
<div class="a">这是一个div
<p>hah</p>
<p>hah</p>
<p>hah</p>
<p>hah</p>
<p>hah</p>
<p>hah</p>
<p>hah</p>
<p>hah</p>
<p>hah</p>
<p>hah</p>
<p>hah</p>
</div>
<div>这是第二个</div>
</body>
</html>

注意一定要对li进行white-space，谁隐藏就操作谁

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        li{
            width: 200px;
            height: 80px;
            white-space: nowrap;  /*显示为一行*/
            overflow: hidden;    /*隐藏*/
            text-overflow:ellipsis;  /*显示为...*/
        }
    </style>
</head>
<body>
    <ul>
        <li>哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈</li>
        <li>哈哈哈哈或或或或或或或或或或或或或或或或或</li>
        <li>哈啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊</li>
        <li>哈啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</li>
        <li>哈啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</li>
    </ul>
</body>
</html>

鼠标样式cursor 轮廓垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .a{
            /*鼠标变为小手*/
            cursor: pointer;
        }
        .b{
            /*正常的鼠标*/
            cursor: default;
        }
        .c{
            /*鼠标十字架*/
            cursor: move;
        }
        .d{
            cursor: auto;
        }
        textarea{
            /*resize: none; 表单域大小限制*/
            /*outline: 0; 去除轮廓*/
        }
        .e img{
            /*vertical-align: bottom;*/
            /*vertical-align: top;*/
            /*vertical-align: middle;*/
        }
    </style>
</head>
<body>
    <div class="a">div1</div>
    <div class="b">div2</div>
    <div class="c">div3</div>
    <div class="d">div4</div>
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <div class="e">
        <img src="../8.28作业/images/tudou.jpg"/>
        我要向图片对齐
    </div>
</body>
</html>

overflow，white-space，text-overflow:ellipsis（显示...）text-overflow:ellipsis，鼠标样式，垂直居中，表单域限制

猜你喜欢