CSS块级盒子和内联盒子

最新推荐文章于 2023-04-03 16:17:56 发布

流泪海盗狗

最新推荐文章于 2023-04-03 16:17:56 发布

阅读量972

点赞数

分类专栏：前端文章标签： css html

本文链接：https://blog.csdn.net/fire_Oreo_999/article/details/105799007

版权

本文详细介绍了CSS中的块级盒子和内联盒子的区别。块级盒子会在新的一行开始，支持宽高设置及外边距推挤其他元素；而内联盒子则不换行，宽度和高度无效，其外边距和内边距不会影响其他元素的位置。通过调整display属性，可以切换元素的显示类型。

摘要由CSDN通过智能技术生成

CSS块级盒子和内联盒子

块级盒子（Block box）

块级盒子：

每个盒子都会换行。
宽（width）和高（height）属性可以发挥作用，未设置宽的情况下可以扩展并占据父容器的横向空间。
外边距（margin）、边框（border）和内边距（padding）会将其他元素从当前盒子周围推开。

HTML代码：

<DOCTYPE html>
    <html>
            <head> 
                       <title>块级盒子</title>            
                       <link rel="stylesheet" href="styles/块级盒子.css"> 
             </head>       
             <body>
                         <div class="div">
                         <p class="box">块级盒子</p>
          		</div>        
            </body>
     </html>

CSS代码：

.box::before{
    content: "块级盒子";
    display: block

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

流泪海盗狗

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

内联盒模型基本概念

liuhao9999的博客

03-23

445

（1）内容区域（content area）。内容区域指一种围绕文字看不见的盒子，其大小仅受字符本身特性控制，本质上是一个字符盒子（character box）；但是有些元素，如图片这样的替换元素，其内容显然不是文字，不存在字符盒子之类的，因此，对于这些元素，内容区域可以看成元素自身。（2）内联盒子（inline box）。“内联盒子”不会让内容成块显示，而是排成一行，这里的“内联盒子”实际指的就是元素的“外在盒子”，用来决定元素是内联还是块级。该盒子又可以细分为“内联盒子”和“匿名内联盒子”两类。

css_盒子模型:块级盒子/内联盒子_显示类型/盒模型border可见性

xuchaoxin1375的博客

01-09

1583

文章目录块级盒子（Block box）和内联盒子（Inline box）内部和外部显示类型(display属性) 块级盒子（Block box）和内联盒子（Inline box）块级盒子（Block box）和内联盒子（Inline box）在 CSS 中我们广泛地使用两种“盒子” —— 块级****盒子 (block box) 和内联盒子 (inline box)。这两种盒子会在页面流（page flow）和元素之间的关系方面表现出不同的行为: block盒子会表现出以下行为:

参与评论您还未登录，请先登录后发表或查看评论

CSS盒子模型：深入理解块级盒子与内联盒子

最新发布

2302_77399030的博客

04-03

394

理解CSS中块级盒子和内联盒子的概念对于掌握布局技巧和调整页面元素的显示效果至关重要。简而言之，块级盒子通常用于布局和组织内容，而内联盒子则用于调整文本和内联元素的样式。通过设置display属性，我们可以轻松地在这两种盒子类型之间进行切换，以满足各种布局需求。

盒子模型、块级元素与行内元素与内联元素

coolpad9187的专栏

04-22

682

一、盒子模型二、块级元素与行内元素我们在做页面布局的时候,一般会将html元素分为两种，即块级元素和行内元素。块级元素：块状元素排斥其他元素与其位于同一行，可以设定元素的宽（width）和高（height），块级元素一般是其他元素的容器，可容纳块级元素和行内元素。常见的块级元素有div, p ,h1~h6等。块级元素列表

h5---------内联元素的盒子

学习是我快乐，吗

07-05

207

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> span{ background-color: #bfa; }

浅谈CSS块级元素与行内元素(内联元素)的区别和联系

12-13

在css盒子模型中，我们提到了html元素中的块元素（block element）和内联元素（inline element）。那么它们究竟是什么呢？其实，这两种元素都是html规范中的概念。块元素(block element)一般是其他元素的容器元素...

CSS3盒子模型详解

09-25

将一个盒子同时具有块级盒子和内联盒子的特点，它表现为内联元素但可以设置宽度和高度。 inline-block在很多浏览器中都得到了支持，除了IE8以下的版本。这种类型的盒子非常适合创建横向布局，例如多个block元素...

html 盒子模型添加图片,[HTML/CSS]盒子模型，块级元素和行内元素

weixin_39672443的博客

06-07

5855

目录概述在div+css中，了解块级元素和行内元素还是非常有必要的，比如：对行内元素使用width属性就会失效。虽然自己不是做前端的，但是，在项目中，曾经也弄过从前端布局，也吃过这方面的亏。今天，群里有朋友问起这个，就趁着学习一下，也算是查漏补缺吧，虽然，谈不上精通，但是了解，还是很有必要的。盒子模型css盒子模型分为两种，一种是遵循w3c标准的标准盒子模型，另外一种就是IE盒子模型。标准盒子模型...

css---内联元素的盒子模型

chen_zan_yu_的博客

05-01

423

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> span{ background-color: red; } .box1{ wi...

[CSS] 什么是CSS盒模型块级盒子和内联盒子的区别

一起来看烟花吧的博客

09-21

1578

文章目录什么是盒子模型盒子的四个组成部分内容区边框内边距注意：当元素的宽度的值被设置为auto时外边距⭐垂直外边距的重叠问题例1例2例3例4例5⭐解决父子元素的外边距重叠问题块级盒子和内联盒子的行为表现区别外部显示类型和内部显示类型内联元素变块元素display属性什么是CSS 盒模型盒模型的各个部分标准盒模型css还有一个替代盒模型(IE盒模型)。参考什么是盒子模型 CSS处理网页时,它认为每个元素都包含在个不可见的盒子里。为什么要想象成盒子呢?因为如果把所有的元素都想象成盒子,那么我们对网页的布局就相

html元素盒模型，块级元素和内联元素区别

Sparrowflying的博客

02-02

920

1、【盒模型】盒模型：html文档中的每个元素都被描绘成矩形盒子，这个模型称为盒模型。盒模型包括：margin（外边距），border（边框），padding（内边距），content（内容区域）。元素占据的空间：margin+border+padding+content。正常盒模型：属性width/height = content宽高。 IE盒模型（ IE 5 和 6 ）

内联盒子

weixin_30668887的博客

06-15

198

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <meta charset="utf-8"> <style type="text...

html块级元素的盒子模型

ciyudadi的博客

08-19

833

盒子模型概念图： CSS中的盒子模型属性：一、边框属性 1.上边框： border-top-style:样式值; border-top-width:宽度值; border-top-color:颜色值; border-top:宽度样式颜色; 2.右边框： border-right-style border-right-width border-right-color border-right 3.左边框 border-left-width border-left-style border-left-c

CSS的盒模型及元素分类（块级元素、内联元素、内联块状元素）

AlexYBB的专栏

09-12

2321

CSS的盒模型及元素分类（块级元素、内联元素、内联块状元素）

HTML/CSS]盒子模型，块级元素和行内元素

NotBad_的博客

07-21

2288

HTML/CSS]盒子模型，块级元素和行内元素在div+css中，了解块级元素和行内元素还是非常有必要的，比如：对行内元素使用width属性就会失效。虽然自己不是做前端的，但是，在项目中，曾经也弄过从前端布局，也吃过这方面的亏。今天，群里有朋友问起这个，就趁着学习一下，也算是查漏补缺吧，虽然，谈不上精通，但是了解，还是很有必要的。盒子模型 css盒子模型分为两种，一种

css有关内联元素的盒子总结

m0_51144154的博客

01-05

371

一、特点总结：内联元素不能设置width和height 内联元素可以设置水平内边距、垂直方向内边距(垂直方向内边距不会影响页面布局) 内联元素可以设置边框，但是只有垂直的的边框不影响页面的布局内联元素可以设置水平外边距，但是不支持垂直外边距二、内联元素与块元素转换 5. display样式可以修改元素类型; 可选值： inline : 可以将一个元素作为内联元素显示 block ：可以将一个元素设置块元素显示 inline-block : 将一个元素转换为行内块元素可以使一个元素既有悍内元素特点

CSS基础——块级元素、块级盒子以及BFC

weixin_34327223的博客

02-09

755

最近在补CSS的基础，看到盒子觉得理解起来比较混乱和困难，于是在网上查了好多资料，然后自己整理之后写了下来。这次写一下块级元素、块级盒子以及BFC，如果有错误，欢迎大家指正：）在页面中，每个元素被表示为一个矩形的方框，这就是盒子。元素在页面中会生成盒子。盒子是CSS布局中的基本单位，一张页面是由一个或多个盒子组成的。盒子从内到外由内容(Content)、内边距(Padding)、边框(...

CSS-盒子模型-边框、外边距、内边距

weixin_40922551的博客

10-12

4544

第01阶段.前端基础.盒子模型盒子模型（CSS重点） css学习三大重点： css 盒子模型、浮动、定位主题思路：目标：理解：能说出盒子模型有那四部分组成能说出内边距的作用以及对盒子的影响能说出padding设置不同数值个数分别代表的意思能说出块级盒子居中对齐需要的2个条件能说出外边距合并的解决方法应用：能利用边框复合写法给元素添加边框能计算盒子的实际大小能利用盒子模型布局模块案例 2. 盒子模型（Box Model）所谓盒子模型： .

HTML与CSS内联块状盒子详解：结构与样式

内联块状元素（如`<p>`标签）虽然类似块级元素，但它们会在行内显示，不单独占据一行，高度和宽度可以通过CSS设置，但margin-top和margin-bottom仍然有效。当使用XHTML (eXtensible HyperText Markup Language) ...