社区首页 >专栏 >HTML 面试要点：行内元素和块级元素

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

Cellinlab

发布于 2023-05-17 08:06:17

66400

代码可运行

文章被收录于专栏：Cellinlab's BlogCellinlab's Blog

运行总次数：0

代码可运行

# 行内元素

一个行内元素 (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

<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 居中

水平居中

垂直居中

水平垂直居中

<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.

<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 居中

水平居中

水平垂直居中

<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>