HTMLCSS学习笔记（八）——元素类型及类型转换

在CSS中，html中的标签元素大体被分为三种不同的类型： 块状元素(block)、内联元素(又叫行内元素，inline)和内联块状元素(inline-block)。

块状元素(block)

语法：display:block;

• 块状元素在网页中是以“块”的形式显示，所谓块状就是元素显示为矩形区域；
• 块状元素默认宽度是容器的100%；
• 块状元素默认是占据一行，按照顺序自上而下排列；
• 块状元素可以自定义自己的宽度、高度；
• 块状元素可以通过设置margin和padding的值来控制块元素与其他元素的边距以及自身边框与内容的留白（内边距）；
• 块状元素一般都作为其他元素的容器，它可以容纳其它内联元素和其它块状元素。我们可以把这种容器比喻为一个盒子。

常见块状元素：<div> <p> <h1>...<h6> <ul> <ol> <li> <dl> <form> <table> <address> <blockquote>等。

内联元素（又叫行内元素，inline）

语法：display:inline;

• 内联元素的表现形式是始终以行内逐个进行显示，即和相邻行内元素在一行上；
• 内联元素没有自己的形状，不能定义它的宽和高,它显示的宽度、高度只能根据所包含内容的高度和宽度来确定，它的最小内容单元也会呈现矩形形状；
• 内联元素也会遵循盒模型基本规则，但是对于margin和padding个别属性值不生效。

常见内联元素（行内元素）：<a> <span> <em> <br> <i> <strong> <label> <b>等。

内联块元素（又叫行内块元素，inline-block）

语法：display:inline-block;

• 内联块元素可以和其他元素都在一行上，如果该行内块元素在设置完宽度、padding、margin之后，父容器后面的宽度还能够容的下第二元素，那么第二个元素就会与第一个元素同行显示，否则，另起一行。；
• 内联块元素的高度、宽度、行高以及顶和底边距都可设置。
• 两个同行显示的行内块元素，对其上下的元素的间隔距离，以其中最大的间距为主。
• 支持盒子模型。

常见内联块元素：<input> <img> <textarea>等

可变元素

可变元素为根据上下文语境决定该元素为块元素、内联元素或者内联块元素。一旦确定了它的类别，它就遵循块状元素、内联元素或者内联块元素的规则限制。
常见可变元素：<button> <iframe> <script>等。

元素类型的转换

盒子模型可通过display属性来改变默认的显示类型
display属性具有19个属性值。
display:none/block/inline/inline-block/list-item/run-in/compact/marker/table/inline-table/table-row-group/table-header-group/table-footer-group/table-row/table-column-group/table-column/table-cell/table-caption/inherit;
常用的属性值为前五个：

• none：此元素不会被显示；
• block：此元素将显示为块状元素，此元素前后会带有换行符；
• inline：默认，此元素会被显示为内联元素，元素前后没有换行符；
• inline-block：行内块元素。（CSS2.1 新增的值）；
• list-item：此元素会作为列表显示。

例子：

• 将内联元素a转换为块状元素，从而使a元素具有块状元素特点。

a{
    display:block;
}

• 将块状元素div转换为内联元素，从而使 div 元素具有内联元素特点。

div {
     display:inline;
 }

• 将内联元素a转换为内联块状元素，从而使a元素具有内联块状元素特点。

a{
    display:inline-block;
}

拓展知识：置换与非置换元素

置换元素
置换元素是指：浏览器根据元素的标签和属性，来决定元素的具体显示内容。例如：浏览器根据标签的src属性显示图片。根据标签的type属性决定显示输入框还是按钮。置换元素在其显示中生成了框，这也就是有的内联元素能够设置宽高的原因。html中的都是置换元素，这些置换元素往往没有实际内容，即是一个空元素。
非置换元素
非置换元素：浏览器中的大多数元素都是不可置换元素，即其内容直接展示给浏览器。例如标签，

标签里的内容会被浏览器直接显示给用户。