HTML 面试要点：行内元素和块级元素

# 行内元素

一个行内元素 (opens new window)只占据它对应标签的边框所包含的空间。

This span is an inline element; its background has been colored to display both the beginning and end of the inline element's influence

代码语言：javascript复制

<html>
  <body>
    <div class="demo0">
      <p>This <span>span</span> is an inline element; its background has been colored to display both the beginning and end of the inline element's influence</p>
    </div>
  </body>
</html>
<script>
</script>
<style>
.demo0 span {
  background-color: #8abb55;
}
</style>

# 行内元素列表

b, big, i, small, tt
abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
a, bdo, br, img, map, object, q, script, span, sub, sup
button, input, label, select, textarea

# 特点

和其他元素在一行
高、行高及外边距和内边距部分可变
宽度只与内容有关（靠内容撑开）
只能容纳文本或其他行内元素

# CSS 居中

水平居中

垂直居中

水平垂直居中

代码语言：javascript复制

<html>
  <body>
    <div class="demo1">
      <div>
        <span>水平居中</span>
      </div>
      <div>
        <span>垂直居中</span>
      </div>
      <div>
        <span>水平垂直居中</span>
      </div>
    </div>
  </body>
</html>
<script>
</script>
<style>
.demo1 {
  display: flex;
  flex-direction: column;
}
.demo1 div {
  border: 1px solid lightgray;
}
.demo1 span {
  background-color: #8abb55;
}
.demo1 div:nth-child(1) {
  text-align: center;
}
.demo1 div:nth-child(2) {
  height: 100px;
  line-height: 100px;
}
.demo1 div:nth-child(3) {
  height: 100px;
  line-height: 100px;
  text-align: center;
}
</style>

# 块级元素

块级元素 (opens new window)占据其父元素（容器）的整个水平空间，垂直空间等于其内容高度，因此创建了一个“块”。

块级元素只能出现在 <body> 元素内。

This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.

代码语言：javascript复制

<html>
  <body>
    <div class="demo3">
      <p>This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.</p>
    </div>
  </body>
</html>
<script>
</script>
<style>
.demo3 p {
  background-color: #8abb55;
}
</style>

# 块级元素列表

<address>
<article>
<aside>
<blockquote>
<dd>
<div>
<dl>
<fieldset>
<figcaption>
<figure>
<footer>
<form>
<h1>、<h2>、<h3>、<h4>、<h5>、<h6>
<header>
<hgroup>
<hr>
<ol>
<p>
<pre>
<section>
<table>
<ul>

# 特点

总是在新的一行开始，占据一整行
高度、行高及外边距和内边距都可以控制
宽度默认与浏览器宽度一样
可以容纳行内元素和其他块级元素

# CSS 居中

水平居中

水平垂直居中

代码语言：javascript复制

<html>
  <body>
    <div class="demo2">
      <div>
        <p>水平居中</p>
      </div>
      <div>
        <p>水平垂直居中</p>
      </div>
    </div>
  </body>
</html>
<script>
</script>
<style>
.demo2 {
  display: flex;
  flex-direction: column;
}
.demo2 div {
  border: 1px solid lightgray;
}
.demo2 p {
  width: 40%;
  background-color: #8abb55;
}
.demo2 div:nth-child(1) p {
  margin: 0 auto;
}
.demo2 div:nth-child(2) {
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

# 行内元素与块级元素对比

# 内容

一般情况下，行内元素只能包含数据和其他行内元素
块级元素可以包含行内元素和其他块级元素

# 格式

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

html 容器 script 面试数据

0 人点赞