首页 > 其他分享 >0823_浅学css

0823_浅学css

时间:2022-08-23 21:46:27浏览次数:64  
标签:浮动 color 0823 浅学 height 溢出 hidden li css

1. 浮动,清除浮动

<!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>
            li {
                list-style: none;
                height: 30px;
                width: 100px;
                float: left;
                background-color: green;
                margin-left: 20px;
            }
            ul {
                background-color: pink;
                /* height: 50px; */
                /* 我想要的就是ul的尺寸是根据li的尺寸来自动确定 */
                /* 清除浮动,解决内容坍塌 */
            }
            /* 推荐使用的清除浮动 */
            .ulstyle:after{
                content: '';
                height: 0;
                line-height: 0;
                display: block;
                visibility: hidden;
                clear: both;
            }
        </style>
    </head>
    <body>
        <ul class="ulstyle">
            <li>1111</li>
            <li>2222</li>
            <!-- <div style="clear: both;"></div> -->
        </ul>
    </body>
</html>

2. 

/* 可见性 */
        visibility: hidden; */
/* 溢出策略 */
         overflow:scroll;
           /*溢出滚动,溢出隐藏*/
        overflow: hidden;

 

标签:浮动,color,0823,浅学,height,溢出,hidden,li,css
From: https://www.cnblogs.com/yjjy/p/16617883.html

相关文章