CSS中浮动的产生会有什么负面影响
Admin 2022-05-26 群英技术资讯 952 次浏览
这篇文章主要介绍“CSS中浮动的产生会有什么负面影响”,有一些人在CSS中浮动的产生会有什么负面影响的问题上存在疑惑,接下来小编就给大家来介绍一下相关的内容,希望对大家解答有帮助,有这个方面学习需要的朋友就继续往下看吧。
1、背景不能显示(overflow:hidden)。
由于浮动产生,如果对父级设置了(css background背景)CSS背景颜色或CSS背景图片,而父级不能被撑开,所以导致CSS背景不能显示。
2、边框不能撑开,如果父级设置了CSS边框属性,子级里使用了float属性产生浮动,父级不能被撑开。
3、margin padding设置值不能正确显示。
由于浮动导致父级子级之间设置css padding,css margin 属性的值不能正确表达,特别是上下边的padding和margin不能正确显示。
实例
<head>
<style type="text/css">
*{ margin:0; padding:0;} //取消设置 如 li 留下的那个实点
ul{ width:900px; border:3px dotted red; list-style:none; overflow: hidden;}//overflow:hidden :让行高自适应
.left{ width:300px; height:300px; background:#FF0; float:left;} //float:left设置浮动全部向左排
.chent{ width:300px; height:300px; background:#000; float:left}
.right{ width:300px; height:300px; background:red; float:left}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
本文教程操作环境:windows7系统、css3版,DELL G3电脑。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
我们在网上做题目的时候,如果题目一起随选项滑动,那么就需要来回翻看题目,这样的体验效果是很差的。因此,这篇文章就给大家介绍用CSS sticky布局来实现题目定位顶部的效果,本文有思路以及代码,感兴趣的朋友一起来了解一下吧。
将js中的对象格式化,并打印在html中functionwriteHtml(name,obj){varobjStr=JSON.stringify(obj,null,4);varhtml=objStr.replace(/\n/g,'<br>').replace(/\s/g,'&nbsp');document.write(n
这篇文章主要介绍了CSS 小结笔记之变形、过渡与动画的示例的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
这篇文章主要介绍了使用css画一个文件上传图案效果,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友参考下吧
弹性布局,顾名思义就是具有弹性特点,能够自由的伸缩,也就是自适应网页。所以使用css弹性布局flex可以便捷,完整,响应式地实现多种页面布局。这篇文章就主要给大家介绍一下css弹性布局flex的使用。
成为群英会员,开启智能安全云计算之旅
立即注册关注或联系群英网络
7x24小时售前:400-678-4567
7x24小时售后:0668-2555666
24小时QQ客服
群英微信公众号
CNNIC域名投诉举报处理平台
服务电话:010-58813000
服务邮箱:service@cnnic.cn
投诉与建议:0668-2555555
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008