overfloat textoverflow 高度塌陷

最新推荐文章于 2023-06-26 19:30:51 发布

weixin_44423850

最新推荐文章于 2023-06-26 19:30:51 发布

阅读量468

点赞数

分类专栏： html 文章标签： css

本文链接：https://blog.csdn.net/weixin_44423850/article/details/114577254

版权

html 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

在上课的空闲偷偷写一下笔记

overfloat

溢出属性（容器的）

overflow: visible / hidden(隐藏) / scroll(滚动) / auto(自动) / inherit;
visible: 默认值，内容不会被修剪，会出现在元素框之外；
hidden：内容会被修剪，并且其余内容是不可见的;
scroll：内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容;
auto：如果内容被修剪，则浏览器会显示滚动条，以便查看其他的内容;
inherit：规定应该从父元素继承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>overflow</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            float: left;
            margin-right: 20px;
        }
        .inherit{
            overflow: inherit;
            width: 100px;
            height: 100px;
            background: khaki;
            float: left;
        }
        .hidden{
            overflow: hidden;
            background: lightblue;

        }
        .scroll{
            overflow: scroll;
            background: lightblue;
        }
        .visible{
            overflow:visible;
            background: lightblue;
        }
        .auto{
            overflow:auto;
            background: lightblue;
        }
    </style>
</head>
<body>
    <div class="visible">
        <div class="inherit">
            汉皇重色思倾国，御宇多年求不得。

            杨家有女初长成，养在深闺人未识。

            天生丽质难自弃，一朝选在君王侧。

            回眸一笑百媚生，六宫粉黛无颜色。

            春寒赐浴华清池，温泉水滑洗凝脂。

             侍儿扶起娇无力，始是新承恩泽时。
        </div>

        云鬓花颜金步摇，芙蓉帐暖度春宵。

        春宵苦短日高起，从此君王不早朝。

        承欢侍宴无闲暇，春从春游夜专夜。

        后宫佳丽三千人，三千宠爱在一身。
        
        金屋妆成娇侍夜，玉楼宴罢醉和春。

        姊妹弟兄皆列土，可怜光彩生门户。

        遂令天下父母心，不重生男重生女。

        骊宫高处入青云，仙乐风飘处处闻。        
    </div>
    <div class="hidden">
        <div class="inherit">
            汉皇重色思倾国，御宇多年求不得。

            杨家有女初长成，养在深闺人未识。

            天生丽质难自弃，一朝选在君王侧。

            回眸一笑百媚生，六宫粉黛无颜色。

            春寒赐浴华清池，温泉水滑洗凝脂。

             侍儿扶起娇无力，始是新承恩泽时。
        </div>

        云鬓花颜金步摇，芙蓉帐暖度春宵。

        春宵苦短日高起，从此君王不早朝。

        承欢侍宴无闲暇，春从春游夜专夜。

        后宫佳丽三千人，三千宠爱在一身。
        
        金屋妆成娇侍夜，玉楼宴罢醉和春。

        姊妹弟兄皆列土，可怜光彩生门户。

        遂令天下父母心，不重生男重生女。

        骊宫高处入青云，仙乐风飘处处闻。        
    </div>
    <div class="scroll">
        <div class="inherit">
            汉皇重色思倾国，御宇多年求不得。

            杨家有女初长成，养在深闺人未识。

            天生丽质难自弃，一朝选在君王侧。

            回眸一笑百媚生，六宫粉黛无颜色。

            春寒赐浴华清池，温泉水滑洗凝脂。

             侍儿扶起娇无力，始是新承恩泽时。
        </div>

        云鬓花颜金步摇，芙蓉帐暖度春宵。

        春宵苦短日高起，从此君王不早朝。

        承欢侍宴无闲暇，春从春游夜专夜。

        后宫佳丽三千人，三千宠爱在一身。
        
        金屋妆成娇侍夜，玉楼宴罢醉和春。

        姊妹弟兄皆列土，可怜光彩生门户。

        遂令天下父母心，不重生男重生女。

        骊宫高处入青云，仙乐风飘处处闻。        
    </div>
    <div class="auto">
        <div class="inherit">
            汉皇重色思倾国，御宇多年求不得。

            杨家有女初长成，养在深闺人未识。

            天生丽质难自弃，一朝选在君王侧。

            回眸一笑百媚生，六宫粉黛无颜色。

            春寒赐浴华清池，温泉水滑洗凝脂。

             侍儿扶起娇无力，始是新承恩泽时。
        </div>

        云鬓花颜金步摇，芙蓉帐暖度春宵。

        春宵苦短日高起，从此君王不早朝。

        承欢侍宴无闲暇，春从春游夜专夜。

        后宫佳丽三千人，三千宠爱在一身。     
    </div>    
</body>
</html>

高度塌陷问题(soluteheight.html)

在文档流中，
父元素的高度默认是被子元素撑开的，
也就是子元素多高，父元素就多高。
但是当子元素设置浮动之后，子元素会完全脱离文档流，
此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。

高度塌陷：

<!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>解决高度塌陷</title>
    <style>
        .box1 {
            width: 100px;
            height: 100px;
            background: lightgreen;
            margin-right: 10px;
            float: left;
        }
        .all1 {
            width: 1000px;
            background: lightpink;
            /* 加入hidden，没有设置高度的父盒子就会显示  */
            overflow: hidden;
        }
        .all2 {
            width: 800px;
            height: 400px;
            background: lightseagreen;
            /* 如果没有加hidden，父盒子就会移动子盒子的margin-top距离 */
            overflow: hidden;
        }
        .box2 {
            width: 200px;
            height:200px;
            background: lightblue;
            margin-top: 100px;
        }
        </style>
</head>
<body>
    <div class="all1">
        <div class="box1"></div>
        <div class="box1"></div>
        <div class="box1"></div>
    </div>
    <div class="all2">
        <div class="box2"></div>
    </div>
</body>
</html>

文本溢出显示省略号(textoverflow.html)

文本溢出：text-overflow:clip/ellipsis
clip:不显示省略号（...），而是简单的裁切
ellipsis:当对象内文本溢出时，显示省略标记

text-overflow属性仅是...，当文本溢出时是否显示省略标记，
并不具备其他的样式属性定义，要实现溢出时产生省略号的效果还需定义

1、容器宽度:width.value;
2、强制文本在一行内显示：white-space:nowrap;
3、溢出内容为隐藏:overflow:hidden;
4、溢出文本显示省略号:text-overflow:ellipsis

<!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>文本溢出显示省略号</title>
    <style>
        .div1{
            width: 200px;
            height: 100px;
            background: lightseagreen;
            /* 强制文本在一行内显示 */
            white-space:nowrap;
            /* 溢出文本隐藏 */
            overflow: hidden;
            /* 溢出文本显示省略号 */
            text-overflow: ellipsis;
        }
        .div2 {
            width: 200px;
            height: 100px;
            background: lightseagreen;
            /* 强制文本三行显示省略号 */
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="div1">
        玉容寂寞泪阑干，梨花一枝春带雨。

        含情凝睇谢君王，一别音容两渺茫。

        昭阳殿里恩爱绝，蓬莱宫中日月长。

        回头下望人寰处，不见长安见尘雾。
    </div>
    <div class="div2">
        玉容寂寞泪阑干，梨花一枝春带雨。

        含情凝睇谢君王，一别音容两渺茫。

        昭阳殿里恩爱绝，蓬莱宫中日月长。

        回头下望人寰处，不见长安见尘雾。
    </div>  
    
</body>
</html>

结构伪类

weixin_44423850

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
overfloat textoverflow 高度塌陷

在上课的空闲偷偷写一下笔记overfloat溢出属性（容器的）overflow:visible / hidden(隐藏) / scroll(滚动)/ auto(自动) / inherit;visible: 默认值，内容不会被修剪，会出现在元素框之外；hidden：内容会被修剪，并且其余内容是不可见的;scroll：内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容;auto：如果内容被修剪，则浏览器会显示滚动条，以便查看其他的内容;inherit：规...
复制链接

扫一扫