2021.5.28.21：07

2021-05-28 21:35:24 阅读：188 来源： 互联网

标签：文字很多 2021.5 07 元素 28.21 height 60px hidden

今天是第五天今天学的比较少不过今天讲了怎么使用阿里巴巴图标库，

阿里巴巴图标库：https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2

下面照常记录今天所学；

清除浮动的方式

<style>
        *{
            margin: 0;
            padding: 0;
        }
        /* 
            清除浮动的方式：
                1. 给父元素加高度
                2. 隔墙法:在浮动元素的末尾，添加一个【块元素】，给这个块元素设置 clear属性。
                clear:left(清除左浮动)  clear:right(清除右浮动) clear:both(清除左右浮动)

                3. 给父元素设置 overflow:hidden(overflow:溢出  hidden:隐藏) 。 注意：谨慎使用
                4. 给父元素添加后缀(伪元素) ::after
                5. 给父元素添加前缀及后缀(双伪元素)  ::before  ::after
         */
        ul{
            list-style: none;
            background-color: aqua;
            /* 方式1 */
            /* height: 60px; */

            /* 方式3 */
            /* overflow: hidden; */
        }
        /* 方式4 */
        /* 伪元素： 伪标签，可以把它当成标签使用 */
        /* .clearfix::after{
            content: "";
            display: block;
            height: 0;
            visibility: hidden;
            clear: both;
        } */

        /* .clearfix{
            *zoom: 1;
        } */

        /* 方式5 */
        .clearfix::before,
        .clearfix::after{
            content: "";
            display: table;
        }
        .clearfix::after{
            clear: both;
        }
        .clearfix{
            /* IE6 IE7 专有*/
            *zoom: 1;
        }

        ul li:not(.clear){
            float: left;
            width: 100px;
            height: 60px;
            text-align: center;
            line-height: 60px;
            margin: 0 10px;
            background-color: antiquewhite;
        }
        .con{
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <ul class="list clearfix">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <!-- 方式2 -->
        <!-- <li class="clear" style="clear: both;"></li> -->
    </ul>
    <div class="con clearfix">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>

overflow属性

<style>
        .box{
            width: 500px;
            height: 300px;
            border: 1px solid #333;
            /* 
                overflow ：溢出
                    1> hidden:隐藏【溢出的内容】
                    2> scroll:滚动， 显示滚动条，无论是否有内容溢出，都会存在滚动条
                    3> auto: 自动，
                    4> visible: 可见

             */
            overflow: hidden;
        }
    </style>
</head>
<body>
    
    <div class="box">
        <p>
            很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字
        </p>
    </div>
</body>

visibility属性

<style>
        .header{
            height: 60px;
        }
        .item{
            float: left;
            height: 60px;
            width: 80px;
            background-color: skyblue;
            margin: 0 10px;
        }
        .list{
            width: 80px;
            height: 150px;
            border: 1px solid red;
            visibility: hidden;
        }
        .header .item:nth-child(2):hover .list{
            visibility: visible;
        }
        .box{
            height: 60px;
            background-color: blue;
            visibility: hidden;
        }

        /* 
            visibility: 设置元素的显示和隐藏
            1> hidden 隐藏
            2> visible 显示
            注意： 该属性实现元素隐藏时， 元素依然占据原来的空间
         */
    </style>
</head>
<body>
    <div class="header">
        <div class="item">1</div>
        <div class="item">
            <a href="#">2</a>
            <div class="list"></div>
        </div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>
    <div class="box"></div>
    <div class="banner" style="height: 200px; background-color: pink;">

    </div>
</body>

display实现显示和隐藏

<style>
        .header{
            height: 60px;
        }
        .item{
            float: left;
            height: 60px;
            width: 80px;
            background-color: skyblue;
            margin: 0 10px;
        }
        .list{
            width: 80px;
            height: 150px;
            border: 1px solid red;
            display: none;
        }
        .header .item:nth-child(2):hover .list{
            display: block;
        }
        .box{
            height: 60px;
            background-color: blue;
            display: none;
        }

        /* 
            display： 设置元素的显示和隐藏
                1> none 隐藏
                2> block 以块的形式显示
                3> inline 以行的形式显示
                4> inline-block 以行内块的形式显示

            与 visibility 实现元素隐藏 的区别：
            display:none 元素隐藏时，不再占据原来的空间。
         */
    </style>
</head>
<body>
    <div class="header">
        <div class="item">1</div>
        <div class="item">
            <a href="#">2</a>
            <div class="list"></div>
        </div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>
    <div class="box"></div>
    <div class="banner" style="height: 200px; background-color: pink;">

    </div>
</body>

伪元素选择器

<style>
        /* 
            伪元素： 伪标签，它可以当成行标签使用
            ::before  表示前缀
            ::after  表示后缀

            content属性： 设置伪元素的内容
            注意：content属性 在任何情况下都不能省去。

            使用场景：清除浮动 添加字体图标等
         */
        #txt::before{
            content: "hello";
            color: red;
            font-size: 18px;
            width: 200px;
            height: 300px;
            background-color: cornflowerblue;
            display: inline-block;
        }
        #txt::after{
            content: '!';
        }
    </style>
</head>
<body>
    <div id="txt">world </div>
</body>

今日练习：土巴兔网页导航

end

明天是周六，虽然不上课，但是要自习，所以明天应该不会发了，后天是星期天，休息，应该也不会发，就这样吧。

标签：文字,很多,2021.5,07,元素,28.21,height,60px,hidden
来源： https://www.cnblogs.com/wangjie677/p/14823845.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

2021.5.28.21：07