*新闻详情页*/>
网页页面合理布局中常常会用到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完成消除波动的方式汇总,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!
假如你感觉本文对你有协助,欢迎转载,烦请注明出处,感谢!
Copyright © 2002-2020 微信小程序页面设计_python小程序_小程序首页模板_如何建立微信小程序_怎么做微信小程序 版权所有 (网站地图) 粤ICP备10235580号