块元素和行内元素及其元素转换

怎么区分块元素、行内元素以及行内块元素呢,以及他们之间怎么相互转换呢?


1、块元素

特点:

  • 独占一行
  • 可以对其设置 宽、高、内外边距
  • 宽度默认为容器的100%
  • 布局时,块元素可以包含块元素和行内元素

常见的块元素:
块元素和行内元素及其元素转换_第1张图片
注:

  • 文字类的元素内不能使用块元素,例如:p、h1~h6.

2、行内元素

特点:

  • 同行多个显示
  • 宽、高直接设置无效,可以设置margin和padding的左右
  • 默认宽度由内容撑开
  • 布局时,行内元素一般不包含块级元素

常见的行内元素:
块元素和行内元素及其元素转换_第2张图片

注:

  • 链接中不能再嵌套链接

3、行内块元素

同时具备块元素和行内元素的特点。
特点:

  • 和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙。一行可以显示多个
  • 默认宽度由内容撑开
  • 可以对其设置 宽、高、内外边距

行内块元素:img、input、td

4、相互转换

  • 行内元素转换为块元素:display:block;
DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行转块title>
head>

<body>
    
    <img src="../images/nature.jpg">
    <img src="../images/nature.jpg">
    <img src="../images/nature.jpg">
body>

html>

块元素和行内元素及其元素转换_第3张图片

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行转块title>
    <style>
        img {
            display: block;
        }
    style>
head>

<body>
    
    <img src="../images/nature.jpg">
    <img src="../images/nature.jpg">
    <img src="../images/nature.jpg">
body>

html>

块元素和行内元素及其元素转换_第4张图片

  • 块元素转换为行内元素:display:inline;
DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>块转行title>
head>

<body>
    
    <p>块转行p>
    <p>块转行p>
    <p>块转行p>
body>

html>

块元素和行内元素及其元素转换_第5张图片

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>块转行title>
    <style>
        p {
            display: inline;
        }
    style>
head>

<body>
    
    <p>块转行p>
    <p>块转行p>
    <p>块转行p>
body>

html>

块元素和行内元素及其元素转换_第6张图片

  • 行内元素转换为行内块元素:display:inline-block;
DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行内转行内块title>
    <style>
        span {
            display: inline-block;
        }
    style>
head>

<body>
    
    <span>行内转行内块span>
    <span>行内转行内块span>
    <span>行内转行内块span>
body>

html>

块元素和行内元素及其元素转换_第7张图片


加油,分享课堂笔记~

不当之处请大家及时指出,若有什么建议可以给我留言!
❤笔芯

你可能感兴趣的:(HTML+CSS,css,html,前端)