浮动,影响width:auto块级元素的默认宽度(宽度值与浮动之间的关系)
2014-10-13 09:43
302 查看
如果块级元素的width属性设置为auto的话(如果不设置,默认是auto),块级元素的宽度等同于浏览器 窗口所显示的大小,也就是会尽可能占据可以占据的空间。
但当width:auto的块级元素遇到浮动(float)之后,其宽度不再等同于根据浏览器 窗口所显示的大小,而是随着盒模型中的内容而产生变化,即width会根据元素里的内容尽可能小地占用空间(收缩以适应内容,shrink-to-fit,参考文档:http://www.w3.org/TR/CSS21/visudet.html#float-width)。
为了更好地理解关于宽度值跟浮动之间的关系,附上《CSS那些事儿》里的相关代码:
但当width:auto的块级元素遇到浮动(float)之后,其宽度不再等同于根据浏览器 窗口所显示的大小,而是随着盒模型中的内容而产生变化,即width会根据元素里的内容尽可能小地占用空间(收缩以适应内容,shrink-to-fit,参考文档:http://www.w3.org/TR/CSS21/visudet.html#float-width)。
为了更好地理解关于宽度值跟浮动之间的关系,附上《CSS那些事儿》里的相关代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> * { margin:0; padding:0; font-size:12px; } div { height:30px; line-height:30px; } hr { clear:both; } .header, .footer { height:50px; text-align:center; line-height:50px; } </style> <title>宽度值与浮动之间的关系</title> </head> <body> <div class="header">头部信息</div> <hr /> <div style="width:auto;background-color:#999999;">width:auto;background-color:#999999;</div> <hr /> <div style="width:auto;padding:0 200px;background-color:#EEEEEE;">width:auto;padding:0 200px;background-color:#EEEEEE;</div> <hr /> <div style="width:auto;margin:0 100px;background-color:#999999;">width:auto;margin:0 100px;background-color:#999999;</div> <hr /> <div style="width:auto;padding:0 200px;margin:0 100px;background-color:#EEEEEE;">width:auto;padding:0 200px;margin:0 100px;background-color:#EEEEEE;</div> <hr /> <div style="float:left;width:auto;background-color:#999999;">float:left;width:auto;background-color:#999999;</div> <hr /> <div style="float:left;width:auto;padding:0 200px;background-color:#EEEEEE;">float:left;width:auto;padding:0 200px;background-color:#EEEEEE;</div> <hr /> <div style="float:left;width:auto;margin:0 100px;background-color:#999999;">float:left;width:auto;margin:0 100px;background-color:#999999;</div> <hr /> <div style="float:left;width:auto;padding:0 200px;margin:0 100px;background-color:#EEEEEE;">float:left;width:auto;padding:0 200px;margin:0 100px;background-color:#EEEEEE;</div> <hr /> <div class="footer">底部信息</div> </body> </html>
相关文章推荐
- 【CSS】思考和再学习——关于CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响
- 正常文档流block、inline、inline-block元素与浮动框之间的位置关系
- 【CSS】思考和再学习——关于CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响
- CSS中浮动和定位对元素宽度-外边距-其他元素所占空间的影响
- 元素之间的位置关系
- box各元素之间的关系
- RD8004: IE6 IE7 IE8(Q) 中浮动元素宽度的 shrink-to-fit 算法与标准规定的算法不同
- IE6 浮动元素之间注释太多 导致重复字符BUG
- 页面各元素位置和距离对象关系图解。 (深入document.documentElement、body.clentTop、div.scrollTop、div.scrollHeight、body.offsetWidth and so on)
- 默认构造与特殊的成员变量之间的关系
- div宽度100%,内部元素浮动,div居中
- CSS+DIV布局,一个列宽影响另一个列宽,使总宽度自适应(CSS+DIV Layout, one column's width depend on the other's)
- 如何理解VB窗体中的scale类属性及width height属性之间的关系
- 如何理解VB窗体中的scale类属性及width height属性之间的关系
- 在特定的屏幕宽度下,合理排版页面元素。根据width进行计算得出
- CPU字长、数据总线宽度、几位的处理器之间的关系
- WPF元素之间的关系
- 度量直接影响到了人与人之间的关系是否能协调发展
- 很清楚了元素,属性和属性的值之间的关系。
- [C++]数据结构:从m叉搜索树谈到B-树的结构特点、阶数、高度、元素个数之间的关系