CSS-overflow和vertical-align的用法-八

最新推荐文章于 2022-12-16 21:15:00 发布

@浩轩

最新推荐文章于 2022-12-16 21:15:00 发布

阅读量227

点赞数

分类专栏： CSS 文章标签： css3

本文链接：https://blog.csdn.net/HAOXUAN_/article/details/107481039

版权

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

溢出问题

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            /*让溢出的内容隐藏*/
            overflow: hidden;
            /*显示隐藏内容（溢出）*/
            overflow: visible;
            /*显示滚动条    内容溢出的情况下使用*/
            overflow: scroll;
            /*自动
            内容溢出则显示滚动条，不溢出不显示滚动条
            */
            overflow: auto;
        }
    </style>
</head>

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

</html>

文字与图片垂直方向的对齐方式
图片与图片垂直方向的对齐方式

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*行内元素
        文字与图片垂直方向的对齐方式
        图片与图片垂直方向的对齐方式
        */
        
        img.img1 {
            vertical-align: baseline;
            /*默认基线对齐*/
            vertical-align: middle;
            /*剧中对齐*/
            vertical-align: top;
            /*顶部对齐*/
            vertical-align: bottom;
            /*底部对齐*/
        }
    </style>
</head>

<body>
    <input type="text" value="请输入值：">
    <span>123456</span>
    <div class="box">
        <img class="img1" src="草莓.jpg" alt="" height="30">
        <img src="草莓.jpg" alt="" height="40">
    </div>

</body>

</html>