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

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

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

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

系列文章目录

CSS- 1.1 css选择器

CSS- 2.1 实战之图文混排、表格、表单、学校官网一级导航栏

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

CSS- 4.1 浮动（Float）

CSS- 4.2 相对定位（position: relative）

系列文章目录

前言

一、理论部分

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. 注意事项

默认样式的重置：
- 不同浏览器对元素的默认样式可能有所不同，建议使用CSS重置（如normalize.css）或手动重置默认样式。
语义化：
- 在HTML5中，应尽量使用语义化的标签（如<header>、<section>、<article>）来替代<div>，以提高代码的可读性和SEO效果。
布局的灵活性：
- 现代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;盒子在浏览器页面居中，上下留10pxmargin: 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;盒子在浏览器页面居中，上下留10pxmargin: 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>

代码运行：