今天使用要为元素设置水平居中的时候发现 margin:0 auto 不起作用，查资料发现原来我给div设置了的是disply:inline-block属性,这种情况下 margin:0 auto 是无效的，于是通过给父元素div 设置了 text-aglin:center得以解决.然后搜集了一些资料，加深一下对inline 属性的了解。
测试结果
- inline元素, 有效的:
background,margin-left,margin-right,padding,border - inline元素, 无效的:
width,height,margin-top,margin-bottom(个别除外) - 因width, height无效, 因此下列属性也无效:
text-align,text-indent,min|max-width|height,overflow - 原文字相关的依然有效, 如
word-spacing,word-wrap,white-space,letter-spacing - 下面两个有效,
line-height,vertical-align,box-shadow float,position及与之相关top,left, 不考虑, 已经不是inline了img,button,input,label,select,textarea设置inline与inline-block, 效果是一样的, 没有变化, 都等同于设置了inline-block
思考:
- inline元素的宽高是不能定义, 即宽高度是由inline元素inline内容的元素决定的,(ie6,ie7下高度会受inline-block元素的影响)
- 即宽高完全是自适应而得出的, 因此也不存在overflow的问题,
min|max-width|height也没有影响 - margin四个属性,
left|right与top|bottom有不同的待遇 margin-top,margin-bottom, 可以用line-height模拟, 但有很大不同, 与inline-block也不兼容, 另margin:0 auto的居中效果, 也没有作用
最后:
mdn中说: 默认 inline-level 的元素 inline + inline-block
b,big,i,small,ttabbr,acronym,cite,code,dfn,em,kbd,strong,samp,vara,bdo,br,img,map,object,q,script,span,sub,sup- 表单元素:
button,input,label,select,textarea与inline-block等同
