有关行内元素属性的设置（宽高）和块元素自适应大小的问题

最新推荐文章于 2024-08-28 10:00:00 发布
最新推荐文章于 2024-08-28 10:00:00 发布
阅读量4.5k 收藏
点赞数 1
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/adammaokkk/article/details/103159560
版权
本文探讨了行内元素如<span>、<a>无法设置宽高的问题，以及如何通过绝对定位实现宽高设置，同时讨论了块元素自适应大小的原理。在设置行内元素宽高时，绝对定位会使其脱离文档流，可能导致内容溢出。了解这些技巧对于理解和调整元素布局至关重要。
摘要由CSDN通过智能技术生成

今天看书看到< sqan >突然想起来以前做题时行内元素无法设置宽高的问题
就一并把相关的几个属性的应用也查了一下

以下内容均为亲身测试：

我做了个盒子（浅灰），里面添了一个行内元素（灰色）来测试
。
。
。

1.行内元素（< sqan >,< a> 等）无法设置宽高

可以这么理解，行内元素默认样式为固定的一行
所以此时这一行的宽高均随行内的字体大小而变化
（先无视盒子只看行内元素）

首先设置宽高属性在这里插入图片描述
但我们发现，行内元素的宽高并没有随之改变
在这里插入图片描述
此时
字体大小（font-size）：10px

当改变
字体大小（font-size）：50px在这里插入图片描述

可以发现&#
最低0.47元/天 解锁文章
AdamMaoKkk
关注
专栏目录
css 行级元素在多浏览器下的宽度问题 与解决方法
09-25
2. **使用`display`属性**：通过改变元素的`display`属性，可以将其转换为块级元素（如`display:block`）或行内块元素（如`display:inline-block`）。`display:inline-block`允许元素具有宽度和高度，同时保持内联的...
块级元素、行内元素、行内块元素的区别以及转换----Web前端
qq_45593650的博客
10-21 342
1.块元素 在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。 块元素的特点: 1.一个块级元素独占一行。 2.元素的高度、宽度、行高以及顶和底边距都可设置。 ...
让行内元素转化为块元素的三种方法与特点详解
m0_64458746的博客
03-12 1000
1.添加display：block属性，不脱标，独占一行，默认高度与内容同高。 2.添加浮动，脱标则自动转化块元素。 3.添加固定定位或者绝对定位，依然脱离标准流，转化为块元素，定位元素在结构下面的覆盖上面的，并且定位>浮动>标准流 ...
前端面试：行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
最新发布
2401_86900447的博客
08-28 378
了解这些元素的分类对于创建语义清晰、结构合理的网页是非常重要的。空元素是指没有结束标签的元素，通常用于插入某些内容而不需要显式的关闭标签。行内元素的特性是它们不会在前后产生换行，并且通常只占据自己的内容宽度。块级元素的特性是它们会在前后产生换行，并且通常占据父元素的整个宽度。：将文本斜体显示，但不具有强调的语义。：将文本加粗，但不具有强调的语义。：和主要内容无关的内容，如边栏。：强调文本，通常显示为加粗。：强调文本，通常显示为斜体。：用于文本的样式化或分组。：水平线，表示主题的分隔。：表示代码或代码片段。
QT屏幕自适应自动布局，拖动窗口自动变大变小（一）
热门推荐
rjszcb的博客
07-27 2万+
qtQStringList用法，后面写，先记录一下。
【HTML5-小知识】块元素、行内元素和行内块元素
luckyboy!的博客
08-14 4681
HTML常用标签掌握之后，应当进一步了解元素的三种类型，块元素，行内元素，行内块元素，掌握这三种元素类型的特点。以上就是今天要讲的全部内容，本文仅仅介绍了HTML中标签元素的三种类型，块元素、行内元素、行内块元素的通途和特点。在使用标签对网页布局和对文本惊醒排版很重要。...
float可以改变行内元素的属性(案例检错）
ljyahaha的博客
02-05 195
首先看案例：这里想做出一个仿苏宁导航栏的案例，结构也非常简单，就是一个nav盒子里装10个图片，每个图片做成链接形式。 以下就是简要的html代码: 我本来想的是 a设置长和宽 里面的img也修改长宽，子代中的img 由于是inline元素，必须得转换成block块级元素，才能设置自由的高度和宽度，并设置margin值。可是却出现了这种效果：a占据了整行的宽度，可是我明明给a设置了较小的宽度，为什么会出现这种效果呢？ 后来知道了：每个div里面的子元素img转换成块级元素后，导致其所在的div..
DIV+CSS的布局元素.docx
11-26
例如，使用`div`元素结合`CSS`可以轻松创建多列布局、自适应设计和响应式网页。开发者可以根据需求灵活运用这些工具，实现各种视觉效果和交互体验。在实际项目中，结合`CSS`选择器、盒模型和其他特性，可以实现更...
HTML4.0元素默认样式整理
09-28
6. 行内元素：`<button>`、`<textarea>`、`<input>`和`<select>`的`display`属性为`inline-block`，使它们能够与其他行内元素并排显示。 7. 代码和预格式化文本：`<pre>`、`<tt>`、`<code>`、`<kbd>`和`<samp>`元素...
前端面试常见问题规整.pdf
04-13
- **弹性布局**：Flexbox 和 Grid 布局能够帮助元素在不同屏幕尺寸下自动调整位置和大小。 - **流式布局**：使用百分比单位和自适应容器来创建流式布局，使页面元素根据屏幕尺寸自动调整大小。 - **视口单位**：使用...
网页制作中的水平居中和垂直居中解决方法集合
09-25
当需要在块级元素内部对子元素进行水平居中时，可以在父元素上设置text-align:center属性，使所有内联内容包括内联块元素都居中显示。此外，如果子元素是一个块级元素，可以采用flex布局，并通过给父容器设置display...
css中如何在一行计算固定宽度和自适应宽度
NanChen的博客
09-19 436
可能会遇到这样一种问题： 图片大小是固定死的，其他在这一行的元素可以随着浏览器变化而等比例缩放 比如：我图片大小固定为72px，那么想让后面的宽度自适应屏幕大小。可以用此公式： width:-webkit-calc(100%-72px); width:-moz-calc(100%-72px); width:calc(100%-72px); 如果换成小屏下不会影响后面的宽度变化： ...
CSS进阶知识
qq_36392801的博客
07-10 380
CSS进阶知识 CSS 常用样式 页面修饰类：字体文本样式，背景样式。 布局类：盒模型，浮动，定位。 字体 粗细 font-weight 属性值有俩种：单词类型，数字类型。 单词类型 1 normal 默认值 标准字体 2 bold 粗体 3 bolder 更粗 4 lighter 更细 数字类型 在 100-900 之间的整百数字。数字越大，字体越粗。 字体风格 font-style 设置文字是否斜体显示 normal 正规字体 一般标签的默认值 italic 斜体文字 主要针对英文 obliq
display:inline inline-block block
zzzley的博客
11-24 960
display：block，inline，inline-block
vue中使用echarts图表自适应的解决方案
xybhua的博客
12-31 403
npm 导入eachart，并在main.js配置。把echarts挂载在 prototype上方便页面调用。为了实现自适应，所以在行内样式的width设置为100%。
前端Vue页面布局内容区域如何设置宽度content内区
m0_49714202的博客
07-04 909
前端Vue页面布局内容区域如何设置宽度content内区
页面布局的几种宽度设置方式—html
yunduanaoligei的博客
11-08 2771
今天分享下”页面布局的几种宽度设置方式—html“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。 本文介绍了详解左右宽度固定中间自适应html布局解决方案，分享给大家，具体如下： a.使用浮动布局 html结构如下 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 ​​<​​​​div​​ ​​class​​​​=​​​​"box"​​​​>​​ ​​<
宽高自适应
weixin_46079002的博客
08-26 143
行内元素都是跟随内容大小进行变化的,所有不在此进行讨论 宽度自适应 块级元素是默认进行占满全屏的所以,当我们的没有设置宽度或者把宽度设为100%,或者不设置的情况下会占满全屏 块级元素在没有设置宽度的时候,而且还被嵌套在父级容器里面的时候,会和父级容器等宽,也就是宽度在扩张的时候就如果遇到了父级会停止 注意:当块级元素脱离文档流的时候,宽度会随着自身的内容决定=>这个时候就需要宽高来约束 所以每一个盒子元素都要加宽高!!!!!! 高度自适应: 我们这里还是只是讨论块元素,不考虑行内元素
行内块元素为三张图片 如何在css调整图片大小
04-13
要调整行内块元素中的图片大小，可以使用CSS的width和height属性。具体实现方法如下： 1. 首先，选中图片所在的行内块元素，比如一个div或span标签，或者直接选中图片标签本身，比如img标签。 2. 在CSS中为选中的元素添加width和height属性，用像素或百分比表示需要的大小。例如： ``` div img { width: 100px; height: 100px; } ``` 这个CSS规则将会把一个包含图片的div元素中的所有图片缩放为100像素宽和100像素高。 如果要使用百分比表示大小，可以这样写： ``` div img { width: 50%; height: auto; } ``` 在这个例子中，图片宽度设置为父元素的50%，高度则根据宽高比自适应调整。 3. 最后，保存CSS文件，并将其引入到HTML页面中即可生效。 注意：以上方法只适用于行内块元素中的图片，如果图片是作为背景图设置的，或者位于其他类型的元素中，调整大小的方法可能会有所不同。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值