行内(inline)元素的一些属性
并不是所有的属性对行内元素都能够生效
1.行内元素不会应用width属性,其长度是由内容撑开的
2.行内元素不会应用height属性,其高度也是由内容撑开的,但是高度可以通过line-height调节
3.行内元素的padding属性只用padding-left和padding-right生效,padding-top和padding-bottom会改变元素范围,但不会对其它元素造成影响
4.行内元素的margin属性只有margin-left和margin-right有效,margin-top和margin-bottom无效
5.行内元素的overflow属性无效,这个不用多说了
6.行内元素的vertical-align属性无效(height属性无效)
代码如下:
测试结果如下:
通过例子可以看出,我们对span设置的width和height属性并没有生效,margin-top和margin-bottom无效,padding-top和padding-bottom会改变元素范围(背景区域变大了),但并没有影响下面元素位置
一些互斥的元素
1.对于absolute和fixed定位的(固定大小,设置了width和height属性)元素,如果设置了top和left属性,那么设置bottom和right值就没有作用了,应该是top和left优先级高,否则同时写了浏览器怎么知道按照谁定位
2.对于absolute和fixed定位的元素,如果设置了top、left、bottom、right的值后margin属性也就不起作用了
3.对于absolute和fixed定位的元素,如果设置了top、left、bottom、right的值后float属性同样会失效
4.块元素如果设置了float属性或者是absolute、fixed定位,那么vertical-align属性不再起作用