在CSS中width:100%和width:auto的应用不同在呢
Admin 2022-07-14 群英技术资讯 1065 次浏览
这篇文章给大家分享的是在CSS中width:100%和width:auto的应用不同在呢。小编觉得挺实用的,因此分享给大家做个参考,文中的介绍得很详细,而要易于理解和学习,有需要的朋友可以参考,接下来就跟随小编一起了解看看吧。| 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进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
这篇文章给大家分享一个用css3实现环形渐变进度条的内容,也就是给环形进度条添加渐变的效果,实现效果如下。那么这个效果具体怎样做呢?本文有实现思路及代码,接下来我们就详细来看看吧。
用CSS3怎样实现一个球体效果?CSS3的功能还是很强大的,能实现很多的图形效果,这篇我们主要来看如何实现一个球体的效果,文中的示例代码介绍得很详细,有需要的朋友可以参考,接下来就跟随小编一起了解看看吧。
这篇文章主要介绍了AmazeUI 按钮交互的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
1.问题描述在使用flask开发web的时候啊,并不是所有的页面都需要template进行修饰吧,如果我们用returnrender_template("xxx/xxx/xxx.html")来进行页面跳转xxx.html,那么xxx.html一定是经过模板引擎(如jinja2)修饰过的,纯静态html应该没什么问题,但是如果这个静态页面使用anjularjs,静态页面代码部分{{}}会ji
flex-shrink指的是当flex容器空间不足时候,单个元素的收缩比例。不支持负值,默认值是1,也就是默认所有的flex子项都会收缩。如果设置为0,则表示不收缩,保持原始的宽度。
成为群英会员,开启智能安全云计算之旅
立即注册关注或联系群英网络
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核准(ICP备案)粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008