h5-10

Posted 2021-03-05 qianfur

清除浮动-height

 1 <style>
 2         *{
 3             margin: 0;
 4             padding: 0;
 5         }
 6         ul,ol{
 7             list-style: none;
 8         }
 9         .box{
10             width: 800px;
11             /* height: 100px; */
12             border: 10px solid red;
13         }
14         .box p{
15             float: left;
16             width: 100px;
17             height: 100px;
18             margin-right: 10px;
19             background: yellowgreen;
20         }
21     </style>

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

 

 方法一、给父亲直接设置高度

 1 <style>
 2         *{
 3             margin: 0;
 4             padding: 0;
 5         }
 6         ul,ol{
 7             list-style: none;
 8         }
 9         .box{
10             width: 800px;
11             height: 100px;
12             border: 10px solid red;
13         }
14         .box p{
15             float: left;
16             width: 100px;
17             height: 100px;
18             margin-right: 10px;
19             background: yellowgreen;
20         }
21     </style>

 

 清除浮动-clear

 1 <style>
 2         *{
 3             margin: 0;
 4             padding: 0;
 5         }
 6         ul,ol{
 7             list-style: none;
 8         }
 9         div{
10             width: 800px;
11             border: 10px solid red;
12             margin-bottom: 20px;
13         }
14         .box2{
15             clear: both; /*  left right both 清除左或者右浮动带来的影响*/
16         }
17         div p{
18             float: left;
19             width: 100px;
20             height: 100px;
21             margin-right: 10px;
22             background: yellowgreen;
23         }
24         /* .box1 .p1{
25             height: 200px;
26         } */
27     </style>

<div class="box1">
        <p class="p1"></p>
        <p></p>
        <p></p>
        <p></p>
    </div>
    <div class="box2">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>

clear清除别的元素对自身造成的浮动影响

清除浮动-外墙法

 1 <style>
 2         *{
 3             margin: 0;
 4             padding: 0;
 5         }
 6         ul,ol{
 7             list-style: none;
 8         }
 9         .box1,.box2{
10             width: 800px;
11             border: 10px solid red;
12             margin-bottom: 20px;
13         }
14         div p{
15             float: left;
16             width: 100px;
17             height: 100px;
18             margin-right: 10px;
19             background: yellowgreen;
20         }
21         .cl{
22             clear: both;
23         }
24         .h20{
25             height: 20px;
26         }
27     </style>

<div class="box1">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>
    <div class="cl h20"></div>    <!-- 墙 -->
    <div class="box2">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>

 

 清除浮动-内墙法

 1 <style>
 2         *{
 3             margin: 0;
 4             padding: 0;
 5         }
 6         ul,ol{
 7             list-style: none;
 8         }
 9         .box1,.box2{
10             width: 800px;
11             border: 10px solid red;
12             margin-bottom: 20px;
13         }
14         div p{
15             float: left;
16             width: 100px;
17             height: 100px;
18             margin-right: 10px;
19             background: yellowgreen;
20         }
21         .cl{
22             clear: both;
23         }
24         
25     </style>

<div class="box1">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <div class="cl"></div>
    </div>
    <div class="box2">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <div class="cl"></div>
    </div>

 

 清除浮动-溢出隐藏

 1 <style>
 2         *{
 3             margin: 0;
 4             padding: 0;
 5         }
 6         ul,ol{
 7             list-style: none;
 8         }
 9         .box1,.box2{
10             width: 800px;
11             border: 10px solid red;
12             margin-bottom: 20px;
13             overflow: hidden;     /*原作用：让多余的内容隐藏*/
14         }
15         div p{
16             float: left;
17             width: 100px;
18             height: 100px;
19             margin-right: 10px;
20             background: yellowgreen;
21         }
22         div p.high{
23             height: 200px;
24         }
25     </style>

<div class="box1">
        <p></p>
        <p></p>
        <p class="high"></p>
        <p></p>

    </div>
    <div class="box2">
        <p></p>
        <p></p>
        <p></p>
        <p></p>

    </div>

 

a标签的伪类

 1 <style>
 2         *{
 3             margin: 0;
 4             padding: 0;
 5         }
 6         a:link{
 7             color: red;    /*访问前*/
 8         }
 9         a:visited{
10             color: green;    /*访问后*/
11         }
12         a:hover{
13             color: blue;    /*鼠标放到a上面时*/
14         }
15         a:active{
16             color: yellow;    /*激活，鼠标按住不放时*/
17         }
18         /* 爱恨原则    love hate    顺序不能颠倒 */
19 
20     </style>

    <a href="#">这是一个超级链接</a>

访问前

 

访问后

 

 鼠标移动道上面时

长按不放时

a标签的文字属性

 1 <style>
 2         *{
 3             margin: 0;
 4             padding: 0;
 5         }
 6         body{
 7             color: #f00;
 8             font-size: 30px;
 9             font-family: "微软雅黑";
10             font-weight: bold;
11             font-style: italic;
12             line-height: 60px;
13             text-align: center;
14             text-indent: 2em;
15             text-decoration: none;
16         }
17 
18         a:link,a:visited{
19             color: red;
20         }
21         a:hover{
22             color: blue;
23         }
24     </style>

<a href="#">这是一个超级链接</a>

 

 a标签的实际应用

<style>
        *{
            margin: 0;
            padding: 0;
        }    
        a{
            display: block;
            width: 150px;
            height: 50px;
            background: #bbb;
            color: #333;
            font-size: 24px;
            font-family: "微软雅黑";
            line-height: 50px;
            text-align: center;
            text-decoration: none;
        }
        a:hover{
            color: #fff;
            background: yellowgreen;
        }
        a:active{
            background: skyblue;
        }
        
    </style>

    <a href="#">登录</a>