CSS的width:100%和width:auto区别
CSS的width:100%和width:auto区别
一、 问题
前段时间在调整树结构的时候,发现如果树的节点名称比较长的话在IE6下则不会撑开外面的元素,导致节点的名称只显示了一半,同时图标和名称换行显示了,但是在IE8和IE9下则显示正常。定位到问题后,最终发现是下面的属性导致的,如下图红色所致,把width的值设置为auto后即可解决问题:
.TreeView,.TreeView ul{ padding:0px 0px 0px 19px; list-style:none; margin:0px 0px; width:100%;/*这里修改为auto*/ background:url(./trstree-default-line.gif) repeat-y 0px center ; } |
二、 结论
[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的解析是一致的。
width:auto;会将元素撑开至整个父元素width,但是会减去子节点自己的margin,padding或者border的大小。
width:100%;会强制将元素变成和父元素一样的宽,并且添加额外的空间到这个元素的width上。就是因为这个,会导致很多问题。
使用width:100%永远都不是一个好主意。这个属性容易让人产生你正在定义一个元素可视大小,其实,你是在对这个元素的状态做了巨大的改变。
块元素会填满其父元素的整个width,因为块元素默认的是width:auto;的。
See the Pen jGgIu by liqian (@liqian) on CodePen.
下面的例子里,黑色的边框(border)代表容器父元素。蓝色和绿色表示的是一个有着红色边框,边框宽为20个像素的子节点。(border:20px solid red;),不同点在于,蓝色的子节点是width:auto;,绿色的是width:100%;的。
See the Pen H2F - March 25, 2014 #1 by liqian (@liqian) on CodePen.
可以看到绿色的子节点伸出了父元素。这是因为绿色的子节点设置了width:100%;使得自己的width变得和父元素一样大小,但是这个width不包含子节点自己边框的大小。这样边框就到父元素外面了;
对于padding和margin也是同样的作用。
See the Pen H2F - March 25, 2014 #2 by liqian (@liqian) on CodePen.
无论多的宽度是padding,margin或者border,width:auto;都不会将子节点撑破父元素。
很多CSS问题的解决办法不是添加更多的CSS,而是去掉那些有问题的CSS,这就得需要对类似width这样的CSS样式的副作用有深刻的认识。
1)width: 100%并不包含margin-left/margin-right的属性值,直接取其父容器的宽度+margin-left/margin-right的值。如果该div设置了margin值,则该div的width值=容器的宽度+margin值。(细心观察)就会发现加了margin值后,相对应的边就会多出设置的空白。如果其父容器是body,则还会多出横向滚动条,因为它的宽度已经超出了屏幕的范围,如果该div你设置了overflow-x:auto,则在超出范围时,也会出现滚动条。
相关文章
- [转] 使用babel-plugin-react-css-modules简化CSS Modules的使用
- 在SUBLIME TEXT中安装SUBLIMELINTER进行JS&CSS代码校验
- 网页基础:网页设计(我所知道的所有的html和css代码(含H5和CSS3)),如有错误请批评指正 wpf Listbox 实现按住ctrl键来取消选中 详解C#的协变和逆变 C#效率优化(1)-- 使用泛型时避免装箱
- vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结
- jquery 属性操作 attr( ) prop()css( )区别
- 【Css】针对logo头像实现的示例
- 【CSS】css弹出菜单设置示例
- jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
- CSS Modules 解决 react 项目 css 样式互相影响的问题
- css兄弟选择器,+ ~选择器的区别
- 3天学会css视频_PHP初级 CSS教程_CSS入门教程
- 【前端学习之HTML&CSS】-- 视觉格式化模型之三 定位练习
- CSS(字体相关知识以及css三种样式表使用方法)
- 【黑马程序员pink名师讲CSS】学好CSS有这一篇就够了(CSS笔记)
- 【HTML】CSS中的margin、border、padding区别
- 《网页设计与前端开发 Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript 从入门到精通》—— 2.1 HTML的基本概念
- CSS-基础语法
- CSS: inline、block和inline-block的区别
- css实现遮罩层(解决透明背景上的文字不透明)
- CSS阻塞渲染、怎么防止css阻塞
- CSS学习知识整理(五)Css display(显示)
- CSS学习知识整理(二)Css 背景
- CSS学习知识整理(一)Css 布局
- css插入图片和背景图片区别
- JQuery采纳CSS实现DOM显示和隐藏要素