CSS中使用浮动会有哪些影响
Admin 2022-07-29 群英技术资讯 830 次浏览
这篇文章主要介绍了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进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
这篇文章主要介绍用css3实现内容展开收起的效果,对于点击展开和收起的效果我们之前也有了解过,而这篇分享的是移动端的实现,实现效果及代码如下,感兴趣的朋友就继续往下看吧。
在了解box-sizing之前,让我们来稍稍回顾一下盒子模型,模型分为:标准盒模型+IE盒模型。那这有什么区别呢?见图所示:从上图可以看到标准w3c盒子模型的范围包括margin、border、padding、content,并且content部分不包含其他部分。从上图可以看到ie盒子模型的范围也包括margin、border、padding、content,和标准w3c盒子模 ...
本篇文章带大家深入了解CSS中一个非常有意思的属性 mask,希望对大家有所帮助!
这篇文章主要介绍了对常见的css属性进行浏览器兼容性总结(推荐)的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
篇文章给大家分享的是用CSS怎样做一个动态的二级菜单效果。小编觉得挺实用的,因此分享给大家做个参考,实现效果及实现代码如下,感兴趣的朋友接下来一起跟随小编看看吧。
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008