900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > CSS的width:100%和width:auto区别

CSS的width:100%和width:auto区别

时间:2019-05-28 10:57:02

相关推荐

CSS的width:100%和width:auto区别

web前端|css教程

width,auto,100%

web前端-css教程

分期商城源码带wap,vscode 新功能,ubuntu配置java,tomcat添加,c sqlite3 操作,网页设计好的网站,空间数据库建设,静态网站需要服务器吗,实名认证插件,前端框架之争,网络爬虫书,php的标签,seo搜索排名优化,工作流springboot视频,优化标签怎么设置,中国风html5网站模板免费下载,手机网页diy哪个好用,手机个人简历模板下载网站模板下载,后台登陆模板 html,精美产品单页面,metro风格管理系统,p2p聊天程序clzw

CSS的width:100%和width:auto区别

ios音乐播放器源码,vscode讲解,ubuntu log清理,应用连接池和tomcat连接池,sqlite web 工具,做网站服务器在哪买,jsp上传图片插件,最好go前端框架,爬虫和python什么关系,php应用领域,seo太难,aps网站和php网站,网页阅读器源码,质感科技网站模板,javascript 页面最大化,数据管理系统源码,万年历 程序lzw

A、 问题

水墨风格 源码,Ubuntu文字存放路径,tomcat发布局域网网页,爬虫主题聚类,php中==是什么运算符,seo化化lzw

前段时间在调整树结构的时候,发现如果树的节点名称比较长的话在IE6下则不会撑开外面的元素,导致节点的名称只显示了一半,同时图标和名称换行显示了,但是在IE8和IE9下则显示正常。定位到问题后,最终发现是下面的属性导致的,如下图红色所致,把width的值设置为auto后即可解决问题:

B、 结论

[1] width:100% 并不包含margin-left margin-right的属性值,直接取其父容器的宽度加上含margin-left /margin-right的值。如果设置了margin那新的width值是容器的宽度加上margin的值。(细心观察)就会发现加了 margin相对应的边就会多出设置的空白。而且会多出横向滚动条因为宽度已经超出了屏幕的范围。(这条相对于父容器是body)。

[2] width:auto包含margin-left/margin-right的属性值。其值包含margin-left /margin-right的值。width:auto总是占据整行!!!这其中margin的值已经包含其中了(也就是一整行)如果要设置margin的值那就用一整行然后减去margin的值就得到了现在的宽度了。减去的这个值就是相应边得空白。显著的特征是这个没有横向滚动条出现也就是宽度没有增加。

[3] 在IE6下显示不正常,但是在IE8和IE9下显示正常,可能是IE8和IE9对width:100%的解析与IE6不同所致,但是两者对width:auto的解析是一致的。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。