CSS- 3.1 盒子模型-块级元素、行内元素、行内块级元素和display属性

发布于：2025-05-16 ⋅ 阅读:(18) ⋅ 点赞:(0)

本系列可作为前端学习系列的笔记，代码的运行环境是在HBuilder中，小编会将代码复制下来，大家复制下来就可以练习了，方便大家学习。

HTML系列文章 已经收录在前端专栏，有需要的宝宝们可以点击前端专栏查看！

点赞关注不迷路！您的点赞、关注和收藏是对小编最大的支持和鼓励！

系列文章目录

CSS- 1.1 css选择器

CSS- 2.1 实战之图文混排、表格、表单

CSS- 3.1 盒子模型-块级元素、行内元素、行内块级元素和display属性

目录

系列文章目录

前言

一、理论部分 

1. 块级元素（Block-level Elements）

2. 行内元素（Inline Elements）

3. 块级元素与行内元素的区别总结

4. 行内块级元素（Inline-block Elements）

5. 元素类型的转换

6. 实际应用中的选择

7. 注意事项

8. 总结

 二、实战部分

总结

前言

小编作为新晋码农一枚，会定期整理一些写的比较好的代码，作为自己的学习笔记，会试着做一下批注和补充，如转载或者参考他人文献会标明出处，非商用，如有侵权会删改！欢迎大家斧正和讨论！

一、理论部分 

在CSS中，元素根据其默认的显示方式可以分为块级元素（Block-level Elements）和行内元素（Inline Elements）。理解这两者的区别对于网页布局和样式设计至关重要。下面将从定义、特点、常用元素、布局影响及转换方法等方面进行全面介绍。

1. 块级元素（Block-level Elements）

        块级元素在页面中默认独占一行，会从新的一行开始显示，并且会尽可能地占据其父元素的全部宽度。块级元素通常用于构建页面的结构，如标题、段落、列表等。

（1）特点

  • 独占一行：块级元素前后会自动换行，不会与其他元素在同一行显示。
  • 可设置宽高：可以通过CSS的width和height属性设置块级元素的宽度和高度。
  • 可设置内外边距：支持margin和padding属性，且这些属性会对周围元素产生影响。
  • 默认宽度为父元素的100%：如果不设置宽度，块级元素会默认占据父元素的全部宽度。

（2）常用块级元素

  • <div>：通用的块级容器，用于布局。
  • <p>：段落。
  • <h1> 到 <h6>：标题。
  • <ul>、<ol>、<li>：无序列表、有序列表和列表项。
  • <table>：表格。
  • <form>：表单。
  • <header>、<footer>、<section>、<article>：HTML5语义化标签。

(3)示例

html

<div>这是一个块级元素</div>
<p>这是另一个块级元素</p>

css

div {
  background-color: lightblue;
  width: 200px;
  height: 100px;
  margin: 10px;
  padding: 10px;
}
p {
  background-color: lightgreen;
  width: 300px;
  margin: 10px;
}

效果：

  • <div>和<p>会各自占据一行，并且可以设置宽高和边距

2. 行内元素（Inline Elements）

(1)定义

行内元素不会独占一行，而是与其他行内元素在同一行显示，直到空间不足时才会换行。行内元素通常用于包裹文本或其他行内内容，如链接、强调文本等。

(2)特点

  • 不独占一行：行内元素会与其他行内元素在同一行显示，直到空间不足。
  • 不能直接设置宽高：默认情况下，行内元素的宽度和高度由其内容决定，不能通过width和height属性直接设置。
  • 内外边距的垂直方向可能无效：margin和padding的水平方向（左右）会生效，但垂直方向（上下）可能不会影响周围元素的布局。
  • 默认宽度由内容决定：行内元素的宽度取决于其内容，不会自动扩展到父元素的全部宽度。

(3)常用行内元素

  • <span>：通用的行内容器，用于样式化文本。
  • <a>：超链接。
  • <strong>、<em>：强调文本。
  • <img>：图片（虽然<img>是行内元素，但可以通过CSS设置为类似块级元素的行为）。
  • <input>、<button>：表单控件（某些情况下表现为行内块级元素）。

(4)示例

html

<span>这是一个行内元素</span>
<a href="#">这是一个链接</a>

css 

span {
  background-color: yellow;
  padding: 10px;
  margin: 10px; /* 水平方向生效，垂直方向可能无效 */
}
a {
  background-color: pink;
  padding: 5px;
}

效果：

  • <span>和<a>会在同一行显示，且无法直接通过CSS设置宽高。

3. 块级元素与行内元素的区别总结

特性 块级元素 行内元素
默认显示方式 独占一行 与其他行内元素同行显示
宽度和高度 可通过CSS设置 默认由内容决定，不能直接设置
内外边距 水平和垂直方向均生效 水平方向生效，垂直方向可能无效
默认宽度 父元素的100% 由内容决定
常用场景 构建页面结构 包裹文本或小范围内容

4. 行内块级元素（Inline-block Elements）

CSS还提供了一种混合模式——行内块级元素（Inline-block Elements），它结合了行内元素和块级元素的特点：

  • 不独占一行：可以与其他行内块级元素或行内元素在同一行显示。
  • 可设置宽高：可以通过CSS设置宽度和高度。
  • 内外边距均生效：水平和垂直方向的margin和padding都有效。

(1)如何将元素设置为行内块级

通过CSS的display: inline-block;属性可以将元素设置为行内块级。

(2)示例

html

<span class="inline-block">行内块级元素1</span>
<span class="inline-block">行内块级元素2</span>

css

.inline-block {
  display: inline-block;
  width: 100px;
  height: 50px;
  background-color: coral;
  margin: 5px;
  padding: 5px;
}

效果：

  • 两个<span>元素会在同一行显示，并且可以设置宽高和边距。

5. 元素类型的转换

CSS的display属性可以改变元素的默认显示方式：

  • display: block;：将元素设置为块级元素。
  • display: inline;：将元素设置为行内元素。
  • display: inline-block;：将元素设置为行内块级元素。
  • display: none;：隐藏元素（不占据空间）。
  • display: flex;、display: grid;：用于现代布局方式。

(1)示例

html

<a href="#" class="block-link">将链接设置为块级元素</a>
<div class="inline-div">将div设置为行内元素</div>

css

.block-link {
  display: block;
  width: 200px;
  height: 50px;
  background-color: lightblue;
  margin: 10px;
}
.inline-div {
  display: inline;
  background-color: lightgreen;
  padding: 5px;
}

效果：

  • <a>元素会独占一行，并可以设置宽高。
  • <div>元素会与其他行内元素同行显示，且无法设置宽高。

6. 实际应用中的选择

  • 使用块级元素：
    • 当需要构建页面的结构（如导航栏、内容区域、页脚）时。
    • 当需要设置元素的宽高、边距时。
    • 当需要元素独占一行时。
  • 使用行内元素：
    • 当需要包裹文本或小范围内容（如链接、强调文本）时。
    • 当需要元素与其他元素在同一行显示时。
  • 使用行内块级元素：
    • 当需要元素在同一行显示，但又能设置宽高和边距时（如导航菜单项、按钮组）。

7. 注意事项

  1. 默认样式的重置：
    • 不同浏览器对元素的默认样式可能有所不同，建议使用CSS重置（如normalize.css）或手动重置默认样式。
  2. 语义化：
    • 在HTML5中，应尽量使用语义化的标签（如<header>、<section>、<article>）来替代<div>，以提高代码的可读性和SEO效果。
  3. 布局的灵活性：
    • 现代CSS布局方式（如Flexbox、Grid）可以更灵活地控制元素的排列，但在某些情况下，理解块级和行内元素的基本概念仍然很重要。

8. 总结

  • 块级元素：独占一行，可设置宽高和边距，常用于构建页面结构。
  • 行内元素：与其他行内元素同行显示，不能直接设置宽高，常用于包裹文本或小范围内容。
  • 行内块级元素：结合了两者的特点，可在同一行显示且可设置宽高和边距。
  • display属性：可以灵活地改变元素的显示方式，满足不同的布局需求。

 二、实战部分

1.代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型-块级元素，行内元素</title>
		<style type="text/css">
			/* 块级元素的特点
			1.块级元素独占一行，标准文档流
			2.宽和高可以设置
			3.margin可以取负数，padding不可以取负数，padding和margin可以相加
			4.块级元素margin取同一空间值时，会出现塌陷，就是取最大值而不是相加 */
			
			div{
				border: 1px solid black;
			}
			
			.div1{
				width: 200px;
				height: 100px;
				/* margin: 10px;上下左右
				margin: 10px 30px;上下 左右
				margin: 10px auto;盒子在浏览器页面居中，上下留10px
				margin: 10px 20px 30px;上 左右 下
				margin: 10px 20px 30px 40px;上 右 下 左 
				 */
				margin-left: 50px;
				padding-left: 20px;
				margin-bottom: 20px;
				/* display:inline-block; */  /* 通过CSS的display: inline-block;属性可以将元素设置为行内块级。 */
			}
			.div2{
				width: 100px;
				height: 50px;
				margin-left: 20px;
				
			}
			.div3{
				width: 100px;
				height: 100px;
				margin-top: 50px;
				/* display: inline-block; */
			}
			.div4{
				width: 200px;
				height: 100px;
				margin-top: 50px;
				/* display: inline-block; */
			}
			/* 行内元素特点：除span a是行内元素外，其余都是块级元素
			1.不独占一行
			2.不可以设置宽高，宽高由内容决定
			3.margin和padding上下设置无效，左右有效
			4.margin不会在行内元素里出现塌陷 */
			span{
			border: 1px solid black;
			}
			#sp1{
				width: 100px;
				height: 100px;
				margin-top: 100px;
				margin-left: 50px;
				padding-left: 50px;
				padding-top:50px ;
				margin-right: 50px;
				/* display:block; */  /* display: block;：将元素设置为块级元素 */
			}
			#sp2{
				margin-left:50px ;
			}
		</style>
	</head>
	<body>
		<h1>块级元素</h1>
		<div class="div1">div1
			<div class="div2">
				div2
				
			</div>
			
		</div>
		<div class="div3">
			div3
			
		</div>
	    <div class="div4">
	    	div4
	    	
	    </div>
		<h1>行内元素</h1>
		<br>
		<br>
		<span id="sp1">
			span1span1
		</span>
		<span id="sp2">
			span2
		</span>
		<a href="../个人主题网站/index.html"><h3 align="center">返回首页</h3></a>
	</body>
</html>

2.代码运行如下

3.修改块级元素为行内快寄元素，行内元素变为块级元素

在块级元素div 的CSS样式中添加：display:inline-block;  属性可以将元素设置为行内块级。

在行内元素span 的CSS样式中添加：display: block;：将元素设置为块级元素

修改后的代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型-块级元素，行内元素</title>
		<style type="text/css">
			/* 块级元素的特点
			1.块级元素独占一行，标准文档流
			2.宽和高可以设置
			3.margin可以取负数，padding不可以取负数，padding和margin可以相加
			4.块级元素margin取同一空间值时，会出现塌陷，就是取最大值而不是相加 */
			
			div{
				border: 1px solid black;
			}
			
			.div1{
				width: 200px;
				height: 100px;
				/* margin: 10px;上下左右
				margin: 10px 30px;上下 左右
				margin: 10px auto;盒子在浏览器页面居中，上下留10px
				margin: 10px 20px 30px;上 左右 下
				margin: 10px 20px 30px 40px;上 右 下 左 
				 */
				margin-left: 50px;
				padding-left: 20px;
				margin-bottom: 20px;
				display:inline-block;  /* 通过CSS的display: inline-block;属性可以将元素设置为行内块级。 */
			}
			.div2{
				width: 100px;
				height: 50px;
				margin-left: 20px;
				
			}
			.div3{
				width: 100px;
				height: 100px;
				margin-top: 50px;
				display: inline-block;
			}
			.div4{
				width: 200px;
				height: 100px;
				margin-top: 50px;
				display: inline-block;
			}
			/* 行内元素特点：除span a是行内元素外，其余都是块级元素
			1.不独占一行
			2.不可以设置宽高，宽高由内容决定
			3.margin和padding上下设置无效，左右有效
			4.margin不会在行内元素里出现塌陷 */
			span{
			border: 1px solid black;
			}
			#sp1{
				width: 100px;
				height: 100px;
				margin-top: 100px;
				margin-left: 50px;
				padding-left: 50px;
				padding-top:50px ;
				margin-right: 50px;
				display:block;  /* display: block;：将元素设置为块级元素 */
			}
			#sp2{
				margin-left:50px ;
			}
		</style>
	</head>
	<body>
		<h1>块级元素</h1>
		<div class="div1">div1
			<div class="div2">
				div2
				
			</div>
			
		</div>
		<div class="div3">
			div3
			
		</div>
	    <div class="div4">
	    	div4
	    	
	    </div>
		<h1>行内元素</h1>
		<br>
		<br>
		<span id="sp1">
			span1span1
		</span>
		<span id="sp2">
			span2
		</span>
		<a href="../个人主题网站/index.html"><h3 align="center">返回首页</h3></a>
	</body>
</html>

代码运行：

总结

以上就是今天要讲的内容，本文简单记录了CSS的盒子模型-块级元素、行内元素、行内块级元素和display属性，仅作为一份简单的笔记使用，大家根据注释理解

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布