关于CSS中display:flex与inline-flex属性的详细介绍_css教程
本文来自CSS教程栏目,文中为大家详细介绍了display:flex与inline-flex属性的用法,具有一定的参考价值,希望可以帮助到大家。flex:将对象作为弹性伸缩盒显示;inline-flex:将对象作为内联块级弹性伸缩盒显示。
1、给父级元素设置高度
效果图:
代码:
<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>
(推荐教程:CSS入门教程)
2、外墙法 :使用一个空白块级元素上添加css样式 clear 清除浮动
注意:添加了clear样式的块级元素添加不了 margin 外边距属性
效果图:
代码:
CSS3实现各种表情(代码示例)_css教程
CSS3实现各种表情。代码如下,复制即可使用。
<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>
3、内墙法 :使用一个空白块级元素上添加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>
内墙法 相对于 外墙法 有相对优点:
内墙法 设置后,浮动元素的父级元素会被撑开,也就是说有了高度
4、给浮动元素的父元素添加 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>
更多编程相关内容,请关注ki4网编程入门栏目!
以上就是css如何清除浮动的详细内容,更多请关注ki4网其它相关文章!
给你的网页弹窗加个遮罩_css教程
本篇文章为你介绍使用css实现网页遮罩效果,主要是通过控制两个盒子的显示层级,控制遮罩层的背景色和显示透明度来达到遮罩效果。希望对学习css的朋友有帮助。