在CSS中width:100%和width:auto的应用不同在呢
Admin 2022-07-14 群英技术资讯 527 次浏览
div{ width:980px; background-color: #ccc; height:300px; } p{ width:100%; /*width:auto;*/ padding:10px; background-color:#000; } |
如果是p的width:100%,则说明p的width会得到980px就已经充满div区域,然后自己又有padding,所以会超出div。
而当width:auto时它是总体宽度(包括width,margin,padding,border)等于父级宽度(width,不包含父级的margin,padding,border),所以如果padding已经左右占去10px的空间,那么width给的值就是960px。
但无论是width:100%还是auto,其计算的参照都是父级内容区width值,而非总宽度值。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
怎么利用CSS实现内凹平滑圆角效果?下面本篇文章带大家了解一下怎么巧用CSS滤镜实现内凹平滑圆角效果,希望对大家有所帮助!
css将文字放在div的底部方法:1、利用position属性,将div元素设置为相对定位,将文字元素设置为绝对定位;2、利用bottom属性将文字放在div的底部,只需要给文字元素添加“bottom:0;”样式即可。
HTML表头怎样设置垂直对齐,方法是什么?想对这方面内容了解清楚的朋友,可以看看小编所整理的资料。
text-fill-color单单从字面上来看就是“文本填充颜色”,不过它实际也是设置对象中文字的填充颜色,和color的效果很相似.这篇文章主要介绍了css3 text-fill-color属性 ,需要的朋友可以参考下
用CSS3怎样做元素的动态左右翻转效果?在CSS中,我们要实现动态左右翻转效果可以使用CSS3中的animation属性给元素添加动画效果,下文有详细的介绍,有需要的朋友可以参考,接下来就跟随小编来一起学习一下吧!
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008