html之行内元素和块级元素的区别? 分别有哪些?

文章目录

  • 前言
  • 一、什么是行内元素和块级元素
    • 简单概述
    • 1、常见的行内元素
    • 2、常见的块级元素
    • 代码演示
  • 二、它们之间的区别特点
    • 行内元素的区别特点
    • 块级元素的区别特点


前言

本章学习的是常见的行内元素和块级元素,以及它们的区别和特点

一、什么是行内元素和块级元素

简单概述

行内元素:行内元素是指在HTML中默认没有换行的元素,它们的显示方式是按行排列的,只占据内容所需的宽度空间。

块级元素:块级元素是指在HTML中默认独占一行的元素,它们会自动在其前后创建新的行,并且会占据整个可用的宽度空间。

通过将元素设置为行内元素或块级元素,可以决定元素在页面中的显示方式和布局。可以使用CSS的display属性来控制元素的显示类型。

1、常见的行内元素

行内元素有:a b span img input select strong

2、常见的块级元素

块级元素有:div ul ol li dl dt dd h1 p table th tr td 等等

代码演示

代码演示1:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div style="background-color: red;width: 300px;height: 300px">
	<span style="background-color: aqua">
		这是行内元素span我在块级元素div里面
	span>
div>
body>
html>

效果图如下:
html之行内元素和块级元素的区别? 分别有哪些?_第1张图片

代码演示2:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>

<div style="background-color: blue;height: 50px">
    div块级元素
div>
<span style="background-color: aqua">span行内元素span>
body>
html>

效果图如下:
html之行内元素和块级元素的区别? 分别有哪些?_第2张图片

二、它们之间的区别特点

行内元素的区别特点

1.行内元素不可以设置宽高
2.不独占一行,将左右排序下去
3.外边距和内边距上下无效,左右有效
4.无法包含块级元素,可以包含行内元素
5.设置行高有效,等同于给父级元素设置行高;

块级元素的区别特点

1.块级元素可以设置宽高
2.独占一行
3.外边距和内边距都有效
4.行内元素和块级元素都可包含

你可能感兴趣的:(html,javascript,前端)