image.png
我以前一直不知道，哪些元素会独占一行，哪些元素可以一行放多个，现在知道了，html的标签分为块级元素和行内元素两种。

1.块元素及其特性

image.png

2.行内元素及其特性

image.png
一般来说，经典的行内元素中是不允许放块元素的，但是有一些特殊情况可以转变a标签的显示模式，比如在a标签中添加img标签，做成图像链接。
注意点：块级元素的宽度默认使用父亲元素的宽度，即父元素宽度的100%

3.行内块元素(特殊)

image.png
行内块元素标签会被放在一行中但是可以修改宽、高、内外边距来让其显示效果发生改变。

元素显示模式的转换（重要）

image.png
image.png
以上三种是最基础的转换，然而display属性还新增了很多其他的显示模式，比如很重要的盒子模型（CSS3新增）具体请看CSS3帮助文档。

示例

  1. <body>
  2.   <a href="#">普通行内标签</a>
  3.   <a href="#">普通行内标签</a>
  4.   <a href="#" class="block">块级链接</a>
  5.   <a href="#" class="block">块级链接</a>
  6.   <a href="#" class="inblock">行内块链接</a>
  7.   <a href="#" class="inblock">行内块链接</a>
  9. </body>
  11. <style>
  12.   a {
  13.     color: black;
  14.   }
  16.   .block {
  17.     width: 100px;
  18.     height: 100px;
  19.     background-color: red;
  20.     display: block;
  21.   }
  23.   .inblock {
  24.     width: 200px;
  25.     height: 100px;
  26.     background-color: skyblue;
  27.     display: inline-block;
  28.   }
  29. </style>

image.png