css溢出隐藏

VIP文章 All rivers run in to the sea

已于 2022-05-11 20:53:44 修改

阅读量6.6k

点赞数 3

文章标签：前端 css html 平面 css3

于 2022-04-09 19:00:19 首次发布

本文链接：https://blog.csdn.net/qq_43944285/article/details/123289334

版权

垂直对齐方式

场景:解决行内/行内块元素垂直对齐问题

vertical-align属性只对行内或行内块元素有效.

/* 默认值基线对齐 */

vertical-align: baseline;

/ 底部对齐 */*

 vertical-align: bottom;

/*中线对齐 */

vertical-align: middle;

/* 顶部对齐 */

vertical-align: top;

光标类型

border-radius:数值(百分比)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
     
            width: 300px;
            height: 300px;
            background-color: pink;
            margin: 50px auto;
            /*  */
            /* border-radius: 10px; */
            /* 从左上角开始赋值 如果没有赋值看对角 */
            border-radius: 10px 40px;
            border-radius: 10px 40px 60px;
            /* 左上角 右上角  右下角  左下角  顺时针 */
            border-radius: 10px 40px 60px 90px;
            border-radius: 0 50%;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

overflow溢出部分显示效果

场景：控制内容溢出部分的显示效果，如：显示、隐藏、滚动条……

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
     
            /* 溢出部分显示效果 */
            /* 默认值 溢出部分可见 */
            overflow: visible;
            /* 溢出部分隐藏 */
            overflow: hidden;
            /* 无论是否溢出都显示滚动条 */
            overflow: scroll;
            /* 根据是否溢出,自动显示滚动条 */
            overflow: auto;
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box">
        年少不知龙哥好,错把村花当成宝年少不知龙哥好,错把村花当成宝年少不知龙哥好,错把村花当成宝年少不知龙哥好,错把村花当成宝年少不知龙哥好,错把村花当成宝年少不知龙哥好,错把村花当成宝年少不知龙哥好,错把村花当成宝年少不知龙哥好,错把村花当成宝年少不知龙哥好,错把村花当成宝年少不知龙哥好,错把村花当成宝年少不知龙哥好,错把村花当成宝年少不知龙哥好,错把村花当成宝年少不知龙哥好,错把村花当成宝年少不知龙哥好,错把村花当成宝年少不知龙哥好,错把村花当成宝年少不知龙哥好,错把村花当成宝年少不知龙哥好,错把村花当成宝年少不知龙哥好,错把村花当成宝年少不知龙哥好,错把村花当成宝年少不知龙哥好,错把村花当成宝年少不知龙哥好,错把村花当成宝年少不知龙哥好,错把村花当成宝年少不知龙哥好,错把村花当成宝年少不知龙哥好,错把村花当成宝年少不知龙哥好,错把村花当成宝年少不知龙哥好,错把村花当成宝年少不知龙哥好,错把村花当成宝年少不知龙哥好,错把村花当成宝年少不知龙哥好,错把村花当成宝年少不知龙哥好,错把村花当成宝年少不知龙哥好,错把村花当成宝年少不知龙哥好,错把村花当成宝
    </div>
</body>

定位的盒子慎用 overflow: hidden;

文字溢出显示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
     
            width: 160px;
            height: 20px;
            font-size: 16px;
            background-color: pink;
            /* 如果文字显示不开 自动换行 */
            /* white-space: normal; */
            /* 1 让换行的文字强制在一行显示 */
            white-space: nowrap;

最低0.47元/天解锁文章

All rivers run in to the sea

关注

3
点赞
踩
16

收藏

觉得还不错? 一键收藏
打赏
0
评论
css溢出隐藏

垂直对齐方式场景:解决行内/行内块元素垂直对齐问题vertical-align属性只对行内或行内块元素有效. /* 默认值基线对齐 */ vertical-align: baseline; / 底部对齐 */* vertical-align: bottom; /*中线对齐 */ vertical-align: middle; /* 顶部对齐
复制链接

扫一扫