XHTML+CSS基础知识（二）：块状元素与内联元素
W3C标准中规定的HTML元素有91个，他们可以被分为块状元素（block element）和内联元素（inline element）两种。
块状元素一般是其他元素的容器元素，块状元素一般都从新的一行开始，它可以容纳文本、内联元素和其他块状元素，通过width和height属性可以设置其大小。
常见的块状元素有div、p、table、h1~h6、ul、ol、li、dl、dt、dd、center、form。
其中form元素比较特殊，因为XHTML规范当中规定它只能容纳块状元素。
内联元素即非块状元素，只能容纳文本或者其他内联元素，不会独占一行，width和height属性对其不起作用。
常见的内联元素有a、span、img、input、select、strong、textarea、label。
1.怎样让多个块状元素同处一行？
在页面布局当中，有很多情况下需要使得多个块状元素在同一行上出现，这时我们就要用到浮动的概念。
浮动（float:left;float:right;）可以使得块状元素脱离文档的普通流左右移动直到它的外边缘碰到包含框或者另一个浮动框的边缘，而文档的普通流则会表现的就像浮动框并不存在一样。
关于浮动的更多内容会在后面在做解释，在这里只要知道利用浮动可以使得多个块状元素同处一行就可以了。
<div style="width:100px;height:100px;float:left;background:yellow;">层一</div>
<div style="width:100px;height:100px;float:left;background:pink;">层二</div>
上述代码当中如果这两个层的宽度相加小于外面的容器的宽度，就会显示在一行当中。
2.如何让内联元素的宽高起作用？
让内联元素的宽高起作用有两种方法：
<a style="width:100px;height:100px;float:left;background:blue;">链接一</a>
上面这个内联元素在网页当中会以块状元素的形式显示，并向左浮动，这个原则在其他的内联元素上也同样适用。
<div style="width:100px;height:100px;float:left;background:black;">层三</div>
<a style="width:100px;height:100px;float:left;background:yellow;">链接二</a>
上面这个内联元素应用了浮动，但是并不会以块状元素的形式显示，因为前面的层中也应用了浮动，需要以clear:both;将它的浮动清除之后才能让下面的内联元素以块状形式显示。
<a style="display:block;width:100px;height:100px;background:grey;">链接三</a>
上面这个内联元素应用了display:block;这句代码能够使得内联元素以块状元素的形式显示。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
