块元素与行内元素（布局设置常用）

已于 2022-07-30 21:51:16 修改
阅读量658 收藏 1
点赞数
分类专栏： 前端css基础 文章标签： 前端 html css css3
于 2022-07-26 15:12:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/comegoing_xin_lv/article/details/125995209
版权
本文介绍了HTML中的块元素和行内元素的基本概念。块元素占据整行，可设置宽高，内容超出时自动换行；行内元素则并排显示，宽度受内容限制。常见问题包括块元素的盒子模型、行内元素不设宽高及超链接内嵌套块元素的影响。详细解释和常见例子可在链接中查看。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

目录

一、基本介绍

1、块元素

2、行内元素

二、常见问题

1、在盒子模型中，块元素可以设置宽和高，而行内元素不可以

2、在块元素内容超过盒子大小时，会换行到下一行

3、超链接内嵌套块元素，则会导致整行全部变为链接跳转地址

三、详细解释与常见行内元素块元素

一、基本介绍

1、块元素

在浏览器中占据整行，会挤占其它元素，当其它元素并排出现，会默认到移动到下一行，可以理解为强制换行元素

2、行内元素

在浏览器中以行为单位，多个行内元素并排，当超过浏览器行宽时，才会移动到下一行

二、常见问题

1、在盒子模型中，块元素可以设置宽和高，而行内元素不可以

2、在块元素内容超过盒子大小时，会换行到下一行

在本例中，“军事我”是h1元素的内容，但由于h1设置的width太小，导致内容换行呈现

3、超链接内嵌套块元素，则会导致整行全部变为链接跳转地址

三、详细解释与常见行内元素块元素

http://c.biancheng.net/view/7533.html

前端学习-CSS行内元素-块元素-行内块元素
Corgi_gg的博客
01-10 289
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /* 行内元素的盒模型 行内元素不可以设置宽度并高度但不独占一行 块元素可以设置宽度与高度但是需要独占一行 行内块元素可以设置宽度与...
如何给行内元素设置宽高
韩旭不会敲代码吧的博客
07-27 4478
我们都知道行内元素直接设置宽高是无效的。当我们在面试中遇到这个问题的时候，很容易想到给它设置 display:block或者display:inline-block就可以了，但是面试官来了句“还有其他方法吗？” 1、常用的行内元素 <a> 标签可定义锚 <abbr> 表示一个缩写形式 <acronym>定义只取首字母缩写 <b> 字体加粗 <bdo> 可覆盖默认的文本方向 <big> 大号字体加粗 <br>
CSS块元素、行内元素、行内块元素详解
最新发布
m0_73941339的博客
03-16 1622
效果：两个元素分别独占一行，且的宽度为200px，默认宽度为父容器100%。宽度：默认占父容器的 100%（即父容器的宽度）。高度：默认由内容撑开（即内容的高度决定，不会自动占满父容器的高度）。HTML 结构 CSS 样式 运行结果：效果说明HTML 结构 CSS 样式 效果说明 效果：span和a在同一行显示，且无法设置宽高。行内块元素兼具块元素和行内元素的特点： 效果：图片和按钮水平排列，且可以设置宽高。元素嵌套规则：行内元素的空白间隙：display属性转换：为什么行内元
行内元素、块元素、行内块
weixin_47227886的博客
04-10 960
1. 行内元素 不可以设置宽高，可以设置margin、padding，它的宽高是由内容撑开的； 一行可以有多个行内块元素。 span a br em i label 2. 块元素 可以设置宽高，在没有设置宽的时候默认width为100%； 独占一行。 h1~h6 p div ul ol li form table 3. 行内块元素 可以设置宽高，不会独占一行。 img input select textarea button 4.区别 元素 .
关于行内元素能否设置宽高的问题
热门推荐
little_little0_0的博客
11-18 1万+
理论上来说，行内元素区别于块级元素的一点就是它不能设置宽高。例如：   &lt;div style="width: 100px; height: 100px; background-color: black"&gt; &lt;span style="width: 10px; height: 10px; background-color: white"&gt;&lt;/span&gt;...
块级元素，行内元素，行内块元素区别
a242424242424的博客
04-12 256
1.相邻的行内块元素之间会有空白的间隙，可以给盒子设置css样式font-size:0来解决。2.行内元素可设置水平方向内外边距，但无法设置垂直方向内外边距。1.所有行内元素只会在一行里面显示，只有排不下了才会换行显示。3.行内元素不能设置宽高，并且不可以包含块级元素。3.块级元素的高度，行高，内外边距都可以控制。行内块元素：display：inline-block。3.行内块元素无法转换成行内元素。4.行内元素可以包含块级元素。2.可以设置宽，高，内外边距。行内元素： display:inline。
行内元素能设置宽高吗
weixin_30257433的博客
04-14 1134
除了行内非替换元素，table-rows,and row groups 其他元素都能设置宽 除了行内非替换元素，table-colums,colum-groups 其他元素都能设置高 行内元素包含行内替换元素（img等）和行内非替换元素（a span等） 行内替换元素是可以设置宽高的，行内非替换元素是不能设置宽高的。 当给行内元素设置 float：left; float:right...
关于行内元素的宽高
weixin_30496751的博客
07-25 167
电话面试，被问到行内元素和块级元素的区别。 我回答说，块级元素独占一行，可设置宽高。行内元素不会独占一行，且不能设置宽高。 然后面试官问我，img和input是行内元素么，他们能设置宽高吗？ 我一想，是啊，这两个也是行内元素，不过却能设置宽高啊。于是当场被问住了，说不出所以然。。。 然后自己查阅资料，发现了这篇博文，为何img、input等内联元素可以设置宽、高 豁然开朗，原来img和i...
前端，行内元素如何控制大小
LeonNo11的博客
11-14 606
行内元素默认情况下不能设置宽度（width）和高度（height），因为它们是按照内容的大小自然地流式布局的。
CSS盒子模型（二）
林彬的专栏
05-25 796
content宽度和高度 使用宽度属性width和高度属性height可以对盒子的大小进行控制。 width和height的属性值可以为不同单位的数值或相对于父元素的百分比%，实际工作中最常用的是像素值。 大多数浏览器，如Firefox、IE6及以上版本都采用了W3C规范，符合CSS规范的盒子模型的总宽度和总高度的计算原则是： 盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边...
HTML a标签（超链接）设置宽高无效
泽申的博客
10-10 1144
a标签是行内元素，行内元素无法设置宽高，所以要想给a标签设置宽高时，需要转换显示模式，将行内模式转换为行内块模式，这样就可以设置宽高了。
行内宽高设置无效的解决
dbrp26282的博客
09-24 1376
先理解什么是块状元素和行内元素 。 块状元素不允许同一行内有其它元素出现,所以你用两个p标签的话,p是从上到下依次排列的. 块状元素是可以设置任意的高宽,margin,padding等属性的, 块元素(block element)　　◎ address - 地址◎ blockquote - 块引用◎ center - 举中对齐块◎ dir - 目录列表◎ div - 常用块级...
深入了解标准流以及脱标元素的特点
qq_52732369的博客
12-23 551
深入了解标准流以及脱标元素的特点
HTML+CSS常见问题总结
const_
04-13 819
文章目录CSS 布局技巧CSS 通用布局行内元素 高、宽 直接设置是无效的版心居中使单行文字垂直居中相邻块元素垂直外边距的合并嵌套块元素垂直外边距的塌陷通过 margin 或 padding 改变行内标签的位置，无法生效 CSS 布局技巧 从外到内、先宽高背景色、放内容、调节内容的位置、控制文字细节。 CSS 通用布局 默认问题： 网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致 盒子的宽高会加上内边距和边框 * { padding:0; /* 清除内边距 */ margin:0;
行内元素 块元素 自定义宽高及默认宽高
peng109的博客
05-31 2581
行内元素 块元素 自定义宽高及默认宽高 一、默认宽高 行内元素的默认宽高是由内容撑开。 块元素的默认宽度是父元素的宽度。高度默认由内容 撑开。 二、自定义宽高 设置宽高后，如内容大于设置的宽高，即有溢出。如后面 紧跟有元素，则元素可能盖住溢出部分。 效果图： 在这里插入图片描述 如想查看其它效果，可根据这份代码更改。 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8">
行内元素和块级元素的区别，为何img、input等行内元素可以设置宽高??（夯实基础）
zhouzuoluo的博客
07-16 9934
我们习惯将html中元素分类为行内元素和块级元素，如下：·常见块级元素有：html、body、div、header、footer、nav、section、aside、article、p、hr、h1~h6、ul、ol、dl、form、table、tbody、thead、tfoot、tr等；·常见行内元素有：span、a、img、textarea、button、input、br、label、selec...
css中内联元素无法设置宽高的原因分析和解决办法
weixin_30458043的博客
03-30 1676
CSS布局中遇到的问题 一、一些行内元素无法设置宽高的问题 （1）到底什么是块级元素，行内元素 块级元素会独占一整行，而行内元素会在一行中一次排列，这和他们的display属性有关 块级元素: dispaly:block; 内联元素: display:inline; （2）块级元素和内联元素的特性 块级元素可以显示的设置其宽高（width,height）,在文档流中，从上到下一...
行内元素的宽高不能设置,垂直外边距无用
chenzhawu3547的博客
05-26 1090
在标准文档流里面，块级元素具有以下特点： ①总是在新行上开始，占据一整行； ②高度，行高以及外边距和内边距都可控制； ③宽带始终是与浏览器宽度一样，与内容无关； ④它可以容纳内联元素和其他块元素。 行内元素的特点： ①和其他元素都在一行上； ②高，行高及外边距和内边距部分可改变； ③宽度...
css面试题之行内元素在什么情况下可以设置宽高
wangzhneg123的博客
02-14 791
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;行内设置宽高&lt;/title&gt; &lt;style&gt; span{ width:
块元素、行内元素、行内块元素的区别，如何转换
06-12
块元素、行内元素和行内块元素是 HTML 元素的三种基本类型，它们的区别在于它们在页面中的布局和显示方式不同。 1. 块元素（block）：独占一行的元素，可以设置宽度、高度、内外边距等样式属性，可以容纳其他块级元素和行内元素，如`<div>`、`<p>`、`<h1>` 等。 2. 行内元素（inline）：不会独占一行，只占据内容所在的空间，不能设置宽度、高度、内外边距等样式属性，可以容纳其他行内元素，如`<a>`、`<span>`、`<img>` 等。 3. 行内块元素（inline-block）：不会独占一行，可以设置宽度、高度、内外边距等样式属性，可以容纳其他行内元素和部分块级元素，如`<input>`、`<button>` 等。 元素之间的转换可以使用 CSS 中的 `display` 属性实现，常用的转换方式如下： 1. 块元素转换为行内元素：设置 `display: inline;`，如将`<div>`转换为`<span>`。 2. 行内元素转换为块元素：设置 `display: block;`，如将`<span>`转换为`<div>`。 3. 行内元素转换为行内块元素：设置 `display: inline-block;`，如将`<img>`转换为可设置大小的图片容器。 需要注意的是，转换后的元素可能会受到其他样式属性的影响，需要进行适当的调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值