前端面试题-行内元素和块级元素

约定不等于承诺〃 2023-02-19 11:22 4阅读 0赞

## 一、行内元素 ##

> 一个行内元素只占据它 **对应标签的边框所包含的空间**。

## 二、块级元素 ##

> 块级元素 **占据其父元素（容器）的整个空间**，因此创建了一个“块”。通常浏览器会在块级元素前后另起一个 **新行**。

## 三、行内元素示例 ##

HTML

![HTML][]

CSS

![CSS][]

Example

![Example][]

## 四、块级元素示例 ##

HTML

![HTML][HTML 1]

CSS

![CSS][CSS 1]

Example

![Example][Example 1]

## 五、行内元素的特点 ##

### 5.1 和其他元素都在同一行上 ###

### 5.2 高，行高及外边距和内边距不可改变 ###

### 5.3 宽度就是它的文字或图片的宽度，不可改变 ###

### 5.4 行内元素只能容纳文本或者其他行内元素 ###

### 5.5 设置行内元素，需要注意如下 ###

（1）设置宽度 **width 无效**。

（2）设置高度 **height 无效**，但可以通过 **line-height** 来设置。

（3）设置 margin 只有 **左右有效，上下无效。**

（4）设置 padding 只有 **左右有效，上下无效**。注意元素范围是增大了，但是对元素周围的内容是没影响的。

## 六、块级元素的特点 ##

### 6.1 总是在新一行开始 ###

### 6.2 高度，行高以及外边距和内边距都可改变 ###

### 6.3 若宽度没有设置，则默认宽度为容器的100%，除非设定一个宽度 ###

### 6.4 块级元素可以容纳行内元素和其他块级元素 ###

## 七、**行内元素和块级元素**对比 ##

### 7.1 内容 ###

（1）一般情况下，行内元素只能包含**数据和其他行内元素**。

（2）而块级元素可以包含**行内元素和其他块级元素**。这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。

### 7.2 格式 ###

默认情况下，行内元素**不会以新行开始**，而块级元素会**新起一行**。

### 7.3 宽高 ###

（1）行内元素**不可以**设置宽高

（2）块级元素**可以**设置宽高

### 7.4 内边距和外边距 ###

（1）行内元素**水平方向**的 margin 和 padding 可以生效。但**竖直方向**的 margin 和 padding 不能生效。

（2）块级元素可以设置margin，padding

## 八、行内元素列表 ##

<table> 
 <tbody> 
  <tr> 
   <td>a</td> 
   <td>锚点</td> 
  </tr> 
  <tr> 
   <td>abbr</td> 
   <td>缩写</td> 
  </tr> 
  <tr> 
   <td>acronym</td> 
   <td>首字</td> 
  </tr> 
  <tr> 
   <td>b</td> 
   <td>粗体(不推荐)</td> 
  </tr> 
  <tr> 
   <td>bdo</td> 
   <td>bidi override</td> 
  </tr> 
  <tr> 
   <td>big</td> 
   <td>大字体</td> 
  </tr> 
  <tr> 
   <td>br</td> 
   <td>换行</td> 
  </tr> 
  <tr> 
   <td>cite</td> 
   <td>引用</td> 
  </tr> 
  <tr> 
   <td>code</td> 
   <td>计算机代码(在引用源码的时候需要)</td> 
  </tr> 
  <tr> 
   <td>dfn</td> 
   <td>定义字段</td> 
  </tr> 
  <tr> 
   <td>em</td> 
   <td>强调</td> 
  </tr> 
  <tr> 
   <td>font</td> 
   <td>字体设定(不推荐)</td> 
  </tr> 
  <tr> 
   <td>i</td> 
   <td>斜体</td> 
  </tr> 
  <tr> 
   <td>img</td> 
   <td>图片</td> 
  </tr> 
  <tr> 
   <td>input</td> 
   <td>输入框</td> 
  </tr> 
  <tr> 
   <td>kbd</td> 
   <td>定义键盘文本</td> 
  </tr> 
  <tr> 
   <td>label</td> 
   <td>表格标签</td> 
  </tr> 
  <tr> 
   <td>q</td> 
   <td>短引用</td> 
  </tr> 
  <tr> 
   <td>s</td> 
   <td>中划线(不推荐)</td> 
  </tr> 
  <tr> 
   <td>samp</td> 
   <td>定义范例计算机代码</td> 
  </tr> 
  <tr> 
   <td>select</td> 
   <td>项目选择</td> 
  </tr> 
  <tr> 
   <td>small</td> 
   <td>小字体文本</td> 
  </tr> 
  <tr> 
   <td>span</td> 
   <td>常用内联容器，定义文本内区块</td> 
  </tr> 
  <tr> 
   <td>strike</td> 
   <td>中划线</td> 
  </tr> 
  <tr> 
   <td>strong</td> 
   <td>粗体强调</td> 
  </tr> 
  <tr> 
   <td>sub</td> 
   <td>下标</td> 
  </tr> 
  <tr> 
   <td>sup</td> 
   <td>上标</td> 
  </tr> 
  <tr> 
   <td>textarea</td> 
   <td>多行文本输入框</td> 
  </tr> 
  <tr> 
   <td>tt</td> 
   <td>电传文本</td> 
  </tr> 
  <tr> 
   <td>u</td> 
   <td>下划线</td> 
  </tr> 
 </tbody> 
</table>

## 九、块级元素列表 ##

<table> 
 <tbody> 
  <tr> 
   <td>address</td> 
   <td>地址</td> 
  </tr> 
  <tr> 
   <td>blockquote</td> 
   <td>块引用</td> 
  </tr> 
  <tr> 
   <td>center</td> 
   <td>举中对齐块</td> 
  </tr> 
  <tr> 
   <td>dir</td> 
   <td>目录列表</td> 
  </tr> 
  <tr> 
   <td>div</td> 
   <td>常用块级容易，也是CSS layout的主要标签</td> 
  </tr> 
  <tr> 
   <td>dl</td> 
   <td>定义列表</td> 
  </tr> 
  <tr> 
   <td>fieldset</td> 
   <td>form控制组</td> 
  </tr> 
  <tr> 
   <td>form</td> 
   <td>交互表单</td> 
  </tr> 
  <tr> 
   <td>h1</td> 
   <td>大标题</td> 
  </tr> 
  <tr> 
   <td>h2</td> 
   <td>副标题</td> 
  </tr> 
  <tr> 
   <td>h3</td> 
   <td>3级标题</td> 
  </tr> 
  <tr> 
   <td>h4</td> 
   <td>4级标题</td> 
  </tr> 
  <tr> 
   <td>h5</td> 
   <td>5级标题</td> 
  </tr> 
  <tr> 
   <td>h6</td> 
   <td>6级标题</td> 
  </tr> 
  <tr> 
   <td>hr</td> 
   <td>水平分隔线</td> 
  </tr> 
  <tr> 
   <td>isindex</td> 
   <td>input prompt</td> 
  </tr> 
  <tr> 
   <td>menu</td> 
   <td>菜单列表</td> 
  </tr> 
  <tr> 
   <td>noframes</td> 
   <td>frames可选内容，（对于不支持frame的浏览器显示此区块内容</td> 
  </tr> 
  <tr> 
   <td>noscript</td> 
   <td>可选脚本内容（对于不支持script的浏览器显示此内容）</td> 
  </tr> 
  <tr> 
   <td>ol</td> 
   <td>有序表单</td> 
  </tr> 
  <tr> 
   <td>p</td> 
   <td>段落</td> 
  </tr> 
  <tr> 
   <td>pre</td> 
   <td>格式化文本</td> 
  </tr> 
  <tr> 
   <td>table</td> 
   <td>表格</td> 
  </tr> 
  <tr> 
   <td>ul</td> 
   <td>无序列表</td> 
  </tr> 
 </tbody> 
</table>

## 十、可变元素 ##

可变元素为根据上下文语境决定该元素为行内元素或者块级元素。

<table> 
 <tbody> 
  <tr> 
   <td>applet</td> 
   <td>java applet</td> 
  </tr> 
  <tr> 
   <td>button</td> 
   <td>按钮</td> 
  </tr> 
  <tr> 
   <td>del</td> 
   <td>删除文本</td> 
  </tr> 
  <tr> 
   <td>iframe</td> 
   <td>inline frame</td> 
  </tr> 
  <tr> 
   <td>ins</td> 
   <td>插入的文本</td> 
  </tr> 
  <tr> 
   <td>map</td> 
   <td>图片区块(map)</td> 
  </tr> 
  <tr> 
   <td>object</td> 
   <td>object对象</td> 
  </tr> 
  <tr> 
   <td>script</td> 
   <td>客户端脚本</td> 
  </tr> 
 </tbody> 
</table>

## 十一、**行内元素和块级元素**的转换 ##

### 11.1 display ###

（1）行内元素 **display:inline**

（2）块级元素 **display:block**

（3）行内块元素 **display:inline-block**

（4）行内元素转换块级元素 **display:block**

（5）块级元素转换行内元素 **display:inline**

### 11.2 float ###

若设置行内元素 **float:left/right**，则该行内元素转换为**块级元素** ，且具有浮动特性。

### 11.3 position ###

若为行内元素进行定位，**position:absolute** 或者 **position:fixed** 都会把行内元素转换为**块级元素**。

[HTML]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9zZWdtZW50ZmF1bHQuY29tL2ltZy9iVjZJd2w?x-oss-process=image/format,png
[CSS]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9zZWdtZW50ZmF1bHQuY29tL2ltZy9iVjZJeGU?x-oss-process=image/format,png
[Example]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9zZWdtZW50ZmF1bHQuY29tL2ltZy9iVjZJeHo?x-oss-process=image/format,png
[HTML 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9zZWdtZW50ZmF1bHQuY29tL2ltZy9iVjZJemw?x-oss-process=image/format,png
[CSS 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9zZWdtZW50ZmF1bHQuY29tL2ltZy9iVjZJeUk?x-oss-process=image/format,png
[Example 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9zZWdtZW50ZmF1bHQuY29tL2ltZy9iVjZJek8?x-oss-process=image/format,png