css windows块状,CSS之行内元素与块状元素

问题来源于在segmentfault上看到的一个问题，button改变不了高度，在还没看代码之前，我猜是因为input是行内元素，没有改变其display：block或display：inline-block的话，应该不能设置其高度，但实验了一下过后，发现我错了。都能正常显示宽度和高度，查询了资料过后，知道了大概。

1. 关于html元素的分类：

其实大多数人都知道，元素可以分为行内(inline element)元素和块状(block element)元素，其中行内元素设置宽度和高度不起作用，只有水平方向的padding和margin才有效，宽度取决于其内容的宽度，高度可以通过设置line-height来改变。

其实元素还可以分为置换元素(relplaced element)和非置换元素(non-relpalced element)，他们在w3c的标准如下：

置换元素：An element whose content is outside the scope of the CSS formatting model, such as an image, embedded document, or applet. For example, the content of the HTML IMG element is often replaced by the image that its "src" attribute designates. Replaced elements often have intrinsic dimensions: an intrinsic width, an intrinsic height, and an intrinsic ratio. For example, a bitmap image has an intrinsic width and an intrinsic height specified in absolute units (from which the intrinsic ratio can obviously be determined). On the other hand, other documents may not have any intrinsic dimensions (for example, a blank HTML document).

大概的意思就是对于置换元素，它的内容不再CSS format model内，比如说img，video，object，input,textarea,select,button。比如说img元素经常被它的src属性指向的内容所替换。置换元素有着固有的尺寸：默认的长，宽和比例。另一些元素没有明确的尺寸，比如说空元素。浏览器会根据其标签和属性的内容来确定显示的效果。

非置换元素：

其内容直接表现给用户，多数的元素都是非置换元素。

1.关于 行内置换元素

行内置换元素的宽度：对于行内级置换元素来说，其宽度的设置需遵循以下几点：

若宽高的计算值都为auto且元素有固有宽度，则width的使用值为该固有宽度；

典型的例子是：拥有默认宽高的input当宽度的计算值为auto时，则宽度使用值为其默认的固有宽度

若宽度的计算值为auto且元素有固有宽度，则width的使用值为该固有宽度；

例子同上

若宽度的计算值为auto且高度有非auto的计算值，并且元素有固有宽高比，则width的使用值为高度使用值 * 固有宽高比；

典型的例子：img当只定义了其高度值时，其宽度将会根据固有宽高比进行等比设置

除此之外，当width的计算值为auto时，则宽度的使用值为300px

典型的例子：比如iframe, canvas

其它类型的置换元素，其宽度的定义都参照行内置换元素的定义。

2.关于 行内非置换元素

对于非置换元素，直接设置width和height都是无效的，想要改变，

可以通过改变display类型，然后再设置宽度和高度；

或者设置line-height改变高度