内蒙古11选5走势图跨度:css width 100% 宽度百分之百设置与不设置

内蒙古11选五开奖5号的 width 100% css宽度百分之百设置与不设置

css width可以设置具体固定数值比如10px、500px、980px、1200px等,以达到网页固定宽度显示。css 宽度 width也可以设置百分比值,比如80%、90%、100%等。这里为大家介绍100%宽度知识,究竟100% width宽度究竟是多宽?

一、随浏览器分辨率宽度而改变100% width

如果是最外层内蒙古11选五开奖5号的设置css宽度100%(width:100%),此时该div盒子将随浏览器宽度改变而宽度自适应改变。

一般网页布局自适应浏览器宽度布局时,可以设置根据需求百分之百宽度(width:100%),当然避免浏览器全屏后,网页左右太靠边,可以根据需求设置宽度90%、98%、96%、80%等,根据需求来。

一般情况下如果要让布局网页自适应浏览器宽度改变而改变,通常即使最外层div默认宽度就是自适应值100%的,但我们依然最好也设置个width:100%,达到最大限度让各大浏览器兼容。

二、有固定值得100% 宽度width

有父级的盒子对象如果设置宽度100%,那么这个盒子将继承上一级(父级)宽度而计算百分比值。假如父级宽度设置400px,子级div设置width 100%,那么这个子级div宽度就是400px。

从上面描述看出虽然宽度设置100%,但实际这个div盒子是有固定宽度的。

1、有固定宽度的100%宽度实例
这里设置父级设置一个450px宽度,子级设置100% 宽度,为了观察此100%宽度效果我们再对子级设置背景颜色,从此实例观察观察100%宽度是否受父级宽度而固定。

2、百分之百宽度实例完整HTML+内蒙古11选五开奖5号的代码

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>100%宽度实例 ThinkCSS</title> 
  6. <style> 
  7. .main{ width:450px} 
  8. .exp{ width:100%; background:#CCC} 
  9. </style> 
  10. </head> 
  11. <body> 
  12. <div class="main"> 
  13. <div class="exp"> 
  14. 我在exp内宽度设置100%<br /> 
  15. 测试文字,ThinkCSS 
  16. </div> 
  17. </div> 
  18. </body> 
  19. </html> 

以上实例代码可以直接拷贝后测试!

3、百分百宽度效果截图

有宽度的百分百宽度实例效果截图
有宽度的百分百宽度实例效果截图

从以上截图看出,虽然子级DIV我们设置100%的宽度,实际他宽度为继承父级宽度后计算其百分比宽度值。

三、百分之百100%宽度总结

div、p这类标签,默认宽度是自适应100%的,有时是不需要设置100%宽度的(可以不设置width),只要不给设置float样式,那么宽度就是默认为自适应100%的。但最外层的DIV width是百分百时候,就最好给予设置width宽度为100%,这样最大限度兼容各大浏览器。

犹如以上实例,设置100%宽度的div不是最外层,而默认div宽度自适应的,又没有设置float浮动,那么这里100%宽度其实是可以不设置的,从而减少代码。

相关标签: 百分比 宽度 百分百
如需转载,请注明文章出处和来源网址://www.phlmy.com/jiqiao/1000.shtml

日期:2016-08-05 10:38:39 来源:内蒙古11选五开奖5号的 www.phlmy.com 作者:div css

热门点击

  • 其实啊也不奇怪,菜做好了先来一份尝尝味道于是提前开吃了。 2019-08-19
  • 十九大精神进机关:原原本本吃透精神 学懂弄通昂扬斗志 2019-08-13
  • 我们是建立市场经济,公有制如何建立市场经济,就要明晰产权,不明晰产权如何建立市场经济? 2019-08-13
  • 2017巴塞尔国际钟表珠宝展 2019-08-11
  • 政务舆情回应如何把握语言分寸感? 2019-08-11
  • 候选案例:机井通电惠民生 2019-08-08
  • 2018年04期 中国国家地理网 2019-08-05
  • 解析视频播控平台黑产链 20元看12家网站VIP会员视频 2019-07-31
  • 西安外国语大学第二十四届校园文化艺术节闭幕式暨第一届朗读者圆满落幕西安外国语大学第二十四届校园文化艺术节-陕西教育新闻 2019-07-31
  • 俄罗斯世界杯今日开战,送上最全观赛指南!你最看好哪支球队? 2019-07-29
  • 《人民日报》让我爱上了文学(原创首发) 2019-07-29
  • 【北京页川车型报价】北京页川4S店车型价格 2019-07-27
  • 河北沧州经济开发区管理委员会 2019-07-24
  • 强村带弱村结对共发展 2019-07-24
  • 《读药》151期:短篇小说——解读蒋一谈《庐山隐士》 2019-07-15
  • 北京快3一定牛形态走势图 快三推荐号 棒球棒标准尺寸 青海11选5开奖结果走势图 体彩p3综合走势图 深圳风采2019最新开奖优势 组选六技巧 足彩半全场奖金算法 大乐透在那 内蒙古快3走势 福建36选7开奖查询今天 组选200 上海天天彩选4开奖查询周公解梦 重庆时时彩软件计划 北京pk10开奖历史记录皇家