块级元素和行级元素的区别

二次程序猿

于 2021-03-07 21:01:43 发布

阅读量369

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/qq_42121620/article/details/114495868

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

块级元素和行内元素

前言
一、块级元素
- 特征
- 常见的块级元素
二、行内元素
- 1.特征
- 2.常见的行内元素
三、行内块级元素
- 特点
- 常见的行内块元素
四、行内元素转换块级元素
总结

前言

网页的布局少不了块级元素和行内元素，在日常使用是对于行内元素和块级元素总是混淆
本篇文章可以在一定程度上让大家简单的了解行内元素和块级元素的去别

提示：以下是本篇文章正文内容，下面案例可供参考

一、块级元素

特征

1、可以设置宽高
2、块级元素中可以嵌套块级元素和行内元素
3、块级元素从新的一行开始
4、块级元素宽度不设置时默认为100%

常见的块级元素

<center>...</center>  地址文字
<h1>-<h6>  一级标题到六级标题
<hr> 水平分割线
<ul>无序列表
<ol>有序列表 
<div>
<p> 段落
<from>表单
<dl> 定义列表

二、行内元素

1.特征

1、行内元素的宽高不可以控制，宽高取决于内容
2、行内元素只能内嵌行内元素
3、可以设置padding,margin只能设置水平方向

2.常见的行内元素

代码如下（示例）：

  <b> 加粗

  <strong> 加粗
  
  <sup>上标

  <sub>下标

  <i>斜体

  <em>斜体

  <del> 删除线

  <u>下划线

三、行内块级元素

特点

1、可以设置宽高和内外边距

常见的行内块元素


<button>按钮

<input> 表单

<img>引用图像的占位空间

<select>select 表单控件

<textarea>定义多行的文本输入控件

四、行内元素转换块级元素

	<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style>
			.block-img{
			display: block;
		}

	</style>
</head>

<body>
<body>
		<!-- 不做改变 -->
	<img src="0001.png" alt="">
	<img src="0001.png" alt="">
	
	<hr>
	
	<!-- 转为块级元素 -->
	<img src="0001.png" alt="" class="block-img">
	<img src="0001.png" alt="" class="block-img">

</body>
</html>

效果图：
在这里插入图片描述

总结

在网页的搭建过程中，要灵活运用各种不同的元素，才可以搭建好一个整洁的网页

二次程序猿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
块级元素和行级元素的区别

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档块级元素和行内元素前言一、块级元素特征常见的块级元素二、行内元素1.特征2.常见的行内元素三、行内块级元素特点常见的行内块元素四、行内元素转换块级元素总结前言网页的布局少不了块级元素和行内元素，在日常使用是对于行内元素和块级元素总是混淆本篇文章可以在一定程度上让大家简单的了解行内元素和块级元素的去别提示：以下是本篇文章正文内容，下面案例可供参考一、块级元素特征1、可以设置宽高2、块级元素中可以嵌套块级元素和行内元素3、
复制链接

扫一扫