Css完成消除波动的方式汇总

日期:2021-02-28 类型:科技新闻 

关键词:图片模板,淘宝作图用什么软件好,在线制作白底图,设计图制作软件,抠图软件

网页页面合理布局中常常会用到float波动,可是波动的块级元素摆脱了规范文本文档流,使得波动元素的父元素沒有高宽比,致使父级元素沒有高宽比,因此必须消除波动对父级元素的危害,本文详细介绍消除波动的几种方式。

消除波动危害的几种方式: 给父级元素设定高宽比

实际效果图:

编码:

<style>
    * {
        padding: 0;
        margin: 0;
    }
    .header {
        height: 30px;
        line-height: 30px;
        background-color: #333;
    }
    .header a {
        color: #fff;
        text-decoration: none;
    }
    ul {
        float: right;
    }
    li {
        float: left;
        list-style: none;
        padding-right: 20px;
    }
</style>

<div class="header">
    <ul>
        <li><a href="#">主页</a></li>
        <li><a href="#">文章内容</a></li>
        <li><a href="#">问与答</a></li>
        <li><a href="#">协助</a></li>
        <li><a href="#">有关</a></li>
    </ul>
</div>

外墙法 :应用1个空白块级元素上加上css款式 clear 消除波动

留意:加上了clear款式的块级元素加上不上 margin 外边距特性

实际效果图:

编码:

<style>
    * {
        padding: 0;
        margin: 0;
    }
    .header {
        /* background-color: #333; */
    }
    .header a {
        /* color: #fff; */
        text-decoration: none;
    }
    ul {
        float: right;
    }
    li {
        float: left;
        list-style: none;
        padding: 5px 20px;
    }

    .clearfix {
        height: 10px;
        background-color: red;
        clear: both;
    }

    .main {
        color: #fff;
        height: 100px;
        background-color: blue;
    }
</style>

<div class="header">
    <ul>
        <li><a href="#">主页</a></li>
        <li><a href="#">文章内容</a></li>
        <li><a href="#">问与答</a></li>
        <li><a href="#">协助</a></li>
        <li><a href="#">有关</a></li>
    </ul>
    
</div>

<div class="clearfix"></div>
    
<div class="main">关键內容</div>

内墙法 :应用1个空白块级元素上加上css款式 clear 消除波动

实际效果图:

编码:

<style>
    * {
        padding: 0;
        margin: 0;
    }
    .header {
        background-color: #333;
    }
    .header a {
        color: #fff;
        text-decoration: none;
    }
    ul {
        float: right;
    }
    li {
        float: left;
        list-style: none;
        padding: 5px 20px;
    }
    .clearfix {
        clear: both;
    }
</style>

<div class="header">
    <ul>
        <li><a href="#">主页</a></li>
        <li><a href="#">文章内容</a></li>
        <li><a href="#">问与答</a></li>
        <li><a href="#">协助</a></li>
        <li><a href="#">有关</a></li>
    </ul>
    <div class="clearfix"></div>
</div>

内墙法 相对 外墙法 有相对性优势:

内墙法 设定后,波动元素的父级元素会被撑开,也便是说有了高宽比

给波动元素的父元素加上 overflow:hidden

原意:表明移除掩藏,外溢边框的內容都要掩藏掉

实际效果图:

编码:

<style>
    * {
        padding: 0;
        margin: 0;
    }
    .header {
        background-color: #333;
        overflow: hidden;
    }
    .header a {
        color: #fff;
        text-decoration: none;
    }
    ul {
        float: right;
    }
    li {
        float: left;
        list-style: none;
        padding: 5px 20px;
    }

    .main {
        color: #fff;
        height: 100px;
        background-color: blue;
    }
</style>

<div class="header">
    <ul>
        <li><a href="#">主页</a></li>
        <li><a href="#">文章内容</a></li>
        <li><a href="#">问与答</a></li>
        <li><a href="#">协助</a></li>
        <li><a href="#">有关</a></li>
    </ul>
</div>
    
<div class="main">关键內容</div>

总结

以上所述是网编给大伙儿详细介绍的Css完成消除波动的方式汇总,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!
假如你感觉本文对你有协助,欢迎转载,烦请注明出处,感谢!

上一篇:CSS3自定翻转条款式 ::webkit 返回下一篇:没有了