CSS盒子模型display和浮动详解

于 2025-02-08 16:56:53 发布
阅读量1.2k 收藏 12
点赞数 34
分类专栏： CSS 文章标签： 前端 css3 html5 visual studio code intellij-idea pycharm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_70296476/article/details/145518823
版权

目录

一、display

1. block

2. inline

3. inline-block

4. none

5. list-item

6. table、table-row、table-cell

7. flex

8. inline-flex

9. grid

10. inline-grid

11. contents

12. run-in

13. 综合示例

二、浮动

1. 浮动的基本概念

2. 浮动的属性值

3. 浮动的特点

4. 浮动的实现方式

示例 1：基础文字环绕

示例 2：两栏布局

示例 3：三栏布局

示例 4：导航菜单

5. 清除浮动

（1）使用 clear 属性

（2）使用伪元素清除浮动

（3）使用 overflow 属性

（4）使用 clearfix 类

（5）使用 Flexbox 和 Grid 布局

一、display

CSS 中的 display 属性用于控制元素的显示方式，包括其盒模型的行为，不同的 display 值会导致元素在布局中的行为不同。

1. block

元素显示为块级元素，每个块级元素从新的一行开始，并占满其父元素的宽度，可以设置宽高、内外边距。常见的块级元素包括 <div>, <p>, <h1> 等。

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>block</title>
     <style>
         .block-element {
             display: block;
             width: 150px;
             height: 150px;
             background-color: blue;
         }
     </style>
 </head>
 <body>
     <div class="block-element">
         这是一个块级元素。
     </div>
 </body>
 </html>

2. inline

元素显示为内联元素，内联元素不会从新的一行开始，并且只占据其内容所需的宽度。常见的内联元素包括 <span>, <a>, <strong> 等。

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>inline</title>
     <style>
         .inline-element {
             display: inline;
             background-color: yellow;
         }
     </style>
 </head>
 <body>
     <span class="inline-element">这是一个内联元素。</span>
 </body>
 </html>

3. inline-block

元素显示为内联块级元素，结合了 block 和 inline 的特性，类似于内联元素，不从新的一行开始，但可以设置宽度和高度。

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>inline-block</title>
     <style>
         .inline-block-element {
             display: inline-block;
             width: 180px;
             height: 40px;
             background: red;
         }
     </style>
 </head>
 <body>
     <div class="inline-block-element">这是一个内联块级元素。</div>
 </body>
 </html>

4. none

元素不显示，并且从文档布局中完全移除，相当于元素不存在。

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>none</title>
     <style>
         .hidden-element {
             display: none;
         }
     </style>
 </head>
 <body>
     <div class="hidden-element">Hidden Element</div>
 </body>
 </html>

5. list-item

元素作为块级元素显示，并增加项目符号（适用于 <li> 元素）。

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>list-item</title>
     <style>
         .list-item-element {
             display: list-item;
             list-style-type: disc;
         }
     </style>
 </head>
 <body>
     <ul>
         <li class="list-item-element">List Item Element</li>
     </ul>
 </body>
 </html>

6. table、table-row、table-cell

table：元素作为块级表格显示，适用于多列布局。

table-row：元素作为表格行显示。

table-cell：元素作为表格单元格显示。

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>table</title>
     <style>
         .table-element {
             display: table;
             width: 100%;
             border-collapse: collapse;
         }
 ​
         .table-row-element {
             display: table-row;
         }
 ​
         .table-cell-element {
             display: table-cell;
             border: 1px solid black;
             padding: 10px;
         }
     </style>
 </head>
 <body>
     <div class="table-element">
         <div class="table-row-element">
             <div class="table-cell-element">Cell 1</div>
             <div class="table-cell-element">Cell 2</div>
         </div>
     </div>
 </body>
 </html>

7. flex

元素成为弹性容器，其子元素成为弹性项目。弹性布局（Flexbox）用于一维布局，即水平或垂直布局。

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>flex</title>
     <style>
         .flex-container {
             display: flex;
             justify-content: center;
             align-items: center;
             height: 100px;
             background-color: lightgray;
         }
     </style>
 </head>
 <body>
     <div class="flex-container">
         Flex Container
     </div>
 </body>
 </html>

8. inline-flex

类似于 flex，但容器本身是内联的，且兼容性较差。

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>inline-flex</title>
     <style>
         .inline-flex-element {
             display: inline-flex;
             width: 150px;
             height: 50px;
             background: green;
         }
     </style>
 </head>
 <body>
     <div class="inline-flex-element">Inline-Flex Element</div>
 </body>
 </html>

9. grid

元素成为网格容器，其子元素成为网格项目。网格布局（Grid）用于二维布局，即行和列布局。

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>grid</title>
     <style>
         .grid-container {
             display: grid;
             grid-template-columns: repeat(3, 1fr);
             gap: 10px;
         }
     </style>
 </head>
 <body>
     <div class="grid-container">
         <div>Grid Item 1</div>
         <div>Grid Item 2</div>
         <div>Grid Item 3</div>
     </div>
 </body>
 </html>

10. inline-grid

类似 grid，但容器本身是内联的，且兼容性较差。

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>inline-grid</title>
     <style>
         .inline-grid-element {
             display: inline-grid;
             width: 150px;
             height: 50px;
             background: purple;
         }
     </style>
 </head>
 <body>
     <div class="inline-grid-element">Inline-Grid Element</div>
 </body>
 </html>

11. contents

使元素不产生边界框，仅保留内容，但背景、边框和填充部分不会渲染。

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>contents</title>
     <style>
         .contents-element {
             display: contents;
         }
     </style>
 </head>
 <body>
     <div class="contents-element">
         <span>Contents Element</span>
     </div>
 </body>
 </html>

12. run-in

用于将元素作为块级元素或行内元素显示，具体取决于上下文。

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <style>
         .run-in-element {
             display: run-in;
         }
     </style>
 </head>
 <body>
     <p class="run-in-element">Run-In Element</p>
 </body>
 </html>

13. 综合示例

以下是一个综合示例，展示了上述部分 display 属性的使用：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>CSS Display 属性示例</title>
     <style>
         .block-element {
             display: block;
             width: 100px;
             height: 100px;
             background-color: blue;
         }
 ​
         .inline-element {
             display: inline;
             background-color: yellow;
         }
 ​
         .inline-block-element {
             display: inline-block;
             width: 150px;
             height: 50px;
             background: red;
         }
 ​
         .hidden-element {
             display: none;
         }
 ​
         .list-item-element {
             display: list-item;
             list-style-type: disc;
         }
 ​
         .table-element {
             display: table;
             width: 100%;
             border-collapse: collapse;
         }
 ​
         .table-row-element {
             display: table-row;
         }
 ​
         .table-cell-element {
             display: table-cell;
             border: 1px solid black;
             padding: 10px;
         }
 ​
         .flex-container {
             display: flex;
             justify-content: center;
             align-items: center;
             height: 100px;
             background-color: lightgray;
         }
 ​
         .inline-flex-element {
             display: inline-flex;
             width: 150px;
             height: 50px;
             background: pink;
         }
 ​
         .grid-container {
             display: grid;
             grid-template-columns: repeat(3, 1fr);
             gap: 10px;
         }
 ​
         .inline-grid-element {
             display: inline-grid;
             width: 150px;
             height: 50px;
             background: green;
         }
 ​
         .contents-element {
             display: contents;
         }
 ​
         .run-in-element {
             display: run-in;
         }
     </style>
 </head>
 <body>
 <div class="block-element">Block Element</div>
 <span class="inline-element">Inline Element</span>
 <div class="inline-block-element">Inline-Block Element</div>
 <div class="hidden-element">Hidden Element</div>
 <ul>
     <li class="list-item-element">List Item Element</li>
 </ul>
 <div class="table-element">
     <div class="table-row-element">
         <div class="table-cell-element">Cell 1</div>
         <div class="table-cell-element">Cell 2</div>
     </div>
 </div>
 <div class="flex-container">
     Flex Container
 </div>
 <div class="inline-flex-element">Inline-Flex Element</div>
 <div class="grid-container">
     <div>Grid Item 1</div>
     <div>Grid Item 2</div>
     <div>Grid Item 3</div>
 </div>
 <div class="inline-grid-element">Inline-Grid Element</div>
 <div class="contents-element">
     <span>Contents Element</span>
 </div>
 <p class="run-in-element">Run-In Element</p>
 </body>
 </html>

二、浮动

CSS浮动（float）是一种重要的布局方式，通过将元素从文档流中移除并使其向左或右浮动，从而实现页面元素的灵活排列。

1. 浮动的基本概念

浮动（float）属性允许元素脱离文档流，向左或右移动，直到碰到父元素的边界或另一个浮动元素为止。浮动元素会自动成为块级元素，并且可以设置宽度和高度属性。

2. 浮动的属性值

  • none：默认值，元素不浮动。

  • left：元素向左浮动。

  • right：元素向右浮动。

  • inherit：元素继承其父元素的浮动值。

3. 浮动的特点

  1. 脱离文档流 浮动元素会脱离标准文档流，不再占据原来的位置，而是向左或向右移动，直到碰到父元素的边界或另一个浮动元素为止。

  2. 行内块元素特性 浮动元素具有行内块（inline-block）的特性，可以设置宽度和高度，且不会独占一行显示，多个浮动元素会紧挨着排列，顶部对齐。

  3. 影响其他元素布局 浮动元素会影响其他非浮动元素的排列和布局，非浮动元素会环绕在浮动元素的周围进行布局。

  4. 不遮挡文字 浮动元素不会遮挡文字，文字会环绕在浮动元素周围，形成“文字环绕”效果。

  5. 不会独占一行 浮动元素不会独占一行，而是与其他元素共享一行显示，即使没有设置宽度，浮动元素也会根据内容撑开。

  6. 不影响前一个标准流元素 浮动元素只影响其后的标准流元素，不会影响前面的标准流元素。

  7. 默认不合并margin 浮动元素的margin不会合并，因此可能会出现margin重叠的情况。可以通过清除浮动（如使用clear属性）来解决此问题。

  8. 高度塌陷问题 当父元素中所有子元素浮动后，父元素的高度可能会塌陷为0。解决方法包括给父元素设置min-height、height或使用伪元素模拟父元素高度。

4. 浮动的实现方式

浮动的实现方式非常简单，只需在CSS中设置float属性即可：

 /*向左浮动*/
 .float-left {
     float: left;
 }
 ​
 /*向右浮动*/
 .float-right {
     float: right;
 }

示例 1：基础文字环绕

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <style>
         .float-left {
             float: left;
             margin-right: 15px;
             width: 200px;
         }
     </style>
 </head>
 <body>
 <div class="container">
     <img src="image/1.png" alt="示例图片" class="float-left">
     <p>这是一段围绕浮动图片的文字。浮动让文字自然环绕在图片周围，类似于杂志排版效果。</p>
 </div>
 </body>
 </html>

示例 2：两栏布局

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <style>
         .left-column {
             float: left;
             width: 200px;
             background: #f0f0f0;
         }
 ​
         .right-column {
             margin-left: 200px; /* 避免内容重叠 */
             background: #e5e5e5;
         }
     </style>
 </head>
 <body>
 <div class="container">
     <div class="left-column">左侧栏</div>
     <div class="right-column">右侧内容区</div>
 </div>
 </body>
 </html>

示例 3：三栏布局

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <style>
         .column {
             float: left;
             width: 33.33%;
             box-sizing: border-box;
             padding: 20px;
         }
 ​
         .clearfix::after {
             content: "";
             display: table;
             clear: both;
         }
     </style>
 </head>
 <body>
 <div class="container clearfix">
     <div class="column">左栏</div>
     <div class="column">中栏</div>
     <div class="column">右栏</div>
 </div>
 </body>
 </html>

示例 4：导航菜单

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <style>
         .nav li {
             float: left;
             margin-right: 20px;
             list-style: none;
         }
     </style>
 </head>
 <body>
 <ul class="nav">
     <li><a href="#">首页</a></li>
     <li><a href="#">产品</a></li>
     <li><a href="#">我的</a></li>
 </ul>
 </body>
 </html>

5. 清除浮动

CSS浮动的清除是前端开发中非常重要的一环，主要目的是解决浮动元素对后续元素布局的影响，避免布局混乱。

以下是几种常见的清除浮动的方法及其优缺点：

（1）使用 clear 属性

clear 属性可以防止元素与浮动元素重叠，使当前元素从浮动元素下方开始排列。clear 属性有四个取值：

  • left：清除左侧的浮动对象。

  • right：清除右侧的浮动对象。

  • both：清除左右两侧的浮动对象。

  • none：默认值，允许两边都有浮动对象。

 .clear {
     clear: both;
 }

优点：

  • 简单易用。

  • 不需要额外的HTML结构。

缺点：

  • 需要手动指定需要清除浮动的元素，不够灵活。

（2）使用伪元素清除浮动

通过在父元素上使用伪元素（如 ::after）来清除浮动，是一种非常常用的方法。具体步骤如下：

  1. 在浮动元素的父级类名中添加 .clearfix::after 伪元素。

  2. 设置 content: "" 创建一个空内容。

  3. 设置 clear: both 清除伪元素两边的浮动流。

  4. 设置 display: block 将伪元素变为块元素。

 .container::after {
     content: "";
     display: table;
     clear: both;
 }

优点：

  • 不需要手动指定需要清除浮动的元素。

  • 不增加额外的HTML结构。

缺点：

  • 需要额外写一行CSS代码。

（3）使用 overflow 属性

通过设置父元素的 overflow 属性为 hidden 或 auto，可以触发BFC（块级格式化上下文），从而清除浮动。具体方法如下：

  • overflow: hidden

  • overflow: auto

 .parent {
     overflow: hidden;
 }

优点：

  • 简单易用。

  • 不需要额外的HTML结构。

缺点：

  • 当元素有阴影或存在下拉菜单时可能会被截断。

  • 兼容性较好，但需注意IE浏览器的兼容性问题。

（4）使用 clearfix 类

clearfix 类是一种常见的清除浮动的方法，通过在父元素上添加 clearfix 类来实现清除浮动。具体步骤如下：

  1. 在父元素上添加 clearfix 类。

  2. 在CSS中添加以下代码：

 .clearfix::after {
     content: "";
     display: table;
     clear: both;
 }

优点：

  • 不需要手动指定需要清除浮动的元素。

  • 不增加额外的HTML结构。

缺点：

  • 需要额外写一行CSS代码。

（5）使用 Flexbox 和 Grid 布局

CSS Flexbox 和 Grid 布局可以自动包含所有子元素，无需手动清除浮动。具体方法如下：

  • 使用 Flexbox 布局：

 .parent {
     display: flex;
 }

  • 使用 Grid 布局：

 .parent {
     display: grid;
 }

优点：

  • 简单易用。

  • 不需要手动清除浮动。

缺点：

  • 需要了解 Flexbox 和 Grid 布局的基本概念。

【HTML】CSS入门教程——盒子模型+列表属性+display+图像精灵 常用页面布局操作
hnspystqxskzlqc的博客
03-23 1489
目录 一、盒子模型 练习一 二、列表属性 练习二 三、display 练习三 四、图像精灵 五、总结 (接上一期知识，咱们继续讲解。) 一、盒子模型 1. 盒子模型：外边距+边框+内边距+内容 2. padding：内边距：内容与父元素边框四周的距离 3. margin：外边距：内容与浏览器边框的距离 练习一 <!DOCTYPE html> <html> <head> <meta charset="...
CSS 之 display 属性详解 【全网最全】
李赛赛的专栏
12-31 2692
CSS display 属性设置元素是否被视为块级或行级盒子以及用于子元素的布局，例如流式布局、网格布局或弹性布局。
【CSS】【12】CSS盒子的display属性
weixin_34007906的博客
07-31 126
前面依次说到盒子的float（浮动）、clear（消除盒子浮动对其他的影响）、position（定位）属性，本次了解一下display属性，这个是非常有用的一个属性。1、定义HTML部分内容，但不定义CSS代码：&lt;div&gt;Box-1&lt;/div&gt;&lt;div&gt;Box-2&lt;/div&gt;&lt;div&gt;Box-3&lt;/div&gt;&lt;span&g
盒模型的属性丶display显示丶浮动
a86123969的博客
09-19 175
一丶盒模型的属性(重要) 　　1.padding 　　　　padding是标准文档流,父子之间调整位置 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>padding</title> ...
CSS盒模型和display属性
m0_67081826的博客
07-06 614
CSS中盒模型常用解释与display属性常用属性
浮动和display
weixin_56319791的博客
01-08 489
浮动 作用 浮动的作用就是使元素并排显示 特点 第一个盒子会紧贴父盒子边，第二个浮动的盒子会贴第一个浮动的盒子… 依次类推 特性 脱离标准文档流 收缩的效果 字维 设置浮动，任意的标签 都可以设置宽高 要浮动一起浮动，有浮动，清除浮动 浮动带来的影响：浮动使元素脱离了标准文档流，元素不占文档的位置，撑不起父盒子的高度，影响页面布局 清除浮动的方式 给父盒子设置固定高度 内墙法，在浮动元素的后面加一个空的块级标签，并设置类clearfix设置clear:both,清除浮动 给父元素设置overflow:hi
【网页设计与开发】CSS布局技巧详解：浮动属性与盒子模型在页面构建中的应用及常见问题解决
最新发布
04-16
内容概要：本文主要介绍了CSS布局中的盒子模型、浮动属性（float）及其相关问题，以及清除浮动（clear）和显示属性（display）。首先讲解了CSS盒子模型的基本概念，包括内容、填充、边框和外边距四个部分，并解释了...
CSS3盒子模型详解
09-25
CSS3盒子模型是Web开发中用于布局的基础概念之一，它定义了元素框处理元素内容（content）、内边距（padding）、边框（border）和外边距（margin）的方式。盒子模型在CSS3中的应用较CSS2.1有了很多扩展和改进，这...
CSS3定位和浮动详解
09-24
CSS3作为CSS的最新标准，引入了许多新的特性，其中包括定位和浮动方面的增强。定位是CSS中控制元素位置的机制，它允许开发者精确定义元素在页面上的位置。浮动则是另一种布局手段，它能够使元素脱离标准文档流，按照...
CSS学习：display和浮动
qq_63898506的博客
07-23 298
display和浮动
盒子的display属性
weixin_30685029的博客
07-30 132
<body><div style="display:inline">Box-1</div><div style="display:inline">Box-2</div><div style="display:inline">Box-3</div><span style="display:block"&...
CSS——display和浮动，
m0_67737085的博客
10-08 260
1.块级元素：独占一行2.行内元素：不独占一行，可以被包含在块级元素内，反之不可以。
CSS学习14之display和浮动
ZXS1002的博客
02-17 688
Display和浮动 display 属性 display 属性是用于控制布局的最重要的 CSS 属性。 display 属性规定是否/如何显示元素。 每个 HTML 元素都有一个默认的 display 值，具体取决于它的元素类型。大多数元素的默认 display 值为 block 或 inline。 浮动和清除浮动 CSS 布局 - 浮动和清除 CSS float 属性规定元素如何浮动。 CSS clear 属性规定哪些元素可以在清除的元素旁边以及在哪一侧浮动。 示例 代码 <!DOCTYPE
浮动模型css,CSS浮动模型
weixin_39808893的博客
08-04 155
通过属性float:left/right可以让元素站队，左浮动或者右浮动；浮动模型的本质是：浮动元素产生了浮动流；但是包裹浮动元素，会有一个外层包裹不了浮动元素的现象，如：包裹浮动元素.wraper{border: 1px solid rgb(3, 54, 3);}.left{height: 100px;width: 100px;background-color: rgb(178, 127, 22...
CSS之浮动模型
lxd_113的博客
11-18 228
什么是float（浮动） CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。 Float（浮动），往往是用于图像，但它在布局时一样非常有用。 一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 浮动流 为了说明什么是浮动流，我们先用代码看一下效果 &lt;div class="demo1"&gt;&lt;/div&gt; &lt;d...
CSS 浮动模型
小葵坤_易安的博客
11-16 280
浮动模型 1.描述：浮动的框可以左右移动，直到它外边缘碰到包含框或另一个浮动框的边缘。因为浮动框不在文档的普通流中，所以文档流中的块框表现的像浮动框不存在一样。 2.可选参数的设置 （1）left：移至父元素左侧 （2）right：移至父元素右侧 （3）none：默认，显示于它在文档中出现的位置 3.浮动的几种形式 以下为HTML代码结构： &amp;lt;div class=&quot;box&quot;&amp;gt; ...
CSS显示模式与浮动
Ospaceman的博客
02-26 258
概念
CSS-清除浮动
weixin_46254175的博客
03-10 171
父元素因为子级元素浮动而引起的内部高度为0。 我们没有给父元素设置高度 <div class="par"> <div class="child1">浮动一</div> <div class="child2">浮动二</div> </div> <div class="btm"...
CSS基石：标准流、盒子模型、浮动与定位详解
CSS作为网页设计的重要组成部分，其核心内容主要包括标准流、盒子模型、浮动和定位。掌握这些概念对于创建出符合预期布局的网页至关重要。 1. **标准流（Normal Flow）**： 标准流是HTML元素在默认情况下按照文档...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值