Skip to main content

块级、行内、置换元素

一、块级元素​

1、块级元素特点​

  • 独占一行
  • 行高和边距可变
  • 可以容纳块级元素和内联元素
  • display: block / table;

2、常见的块级元素​

<div>
<header>
<nav>
<article>
<aside>
<section>
<footer>
<p>
<h1> ~ <h6>
<ul>
<ol>
...

二、行内元素​

1、行内元素特点​

  • 与其他元素在同一行上
  • 行高和边距不可变
  • 只可容纳内联元素
  • display: inline / inline-block;

2、常见的行内元素​

<span>
<img>
<label>
<input>
<button>
...

三、置换元素​

1、什么是置换元素​

置换元素的内容不受 CSS 视觉格式化模型控制，CSS 渲染模型并不考虑对此内容的渲染，且元素本身一般拥有固有尺寸（宽度，高度，宽高比），浏览器会根据置换元素的标签和属性，来决定元素的具体显示内容。

2、与一般行内元素的区别​

置换元素拥有内在尺寸，可以设置宽高，其性质等同于设置了 display: inline-block; 的元素

3、常见的置换元素​

<img>
<input>
<textarea>
<select>
<object>