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

最新推荐文章于 2022-12-31 20:22:55 发布
最新推荐文章于 2022-12-31 20:22:55 发布
阅读量4.4k 收藏
点赞数 1
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AdamMaoKkk/article/details/103159560
版权

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

以下内容均为亲身测试：

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

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

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

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

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

可以发现&#
最低0.47元/天 解锁文章
AdamMaoKkk
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
css 行级元素在多浏览器下的宽度问题 与解决方法
09-25
2. **使用`display`属性**：通过改变元素的`display`属性，可以将其转换为块级元素（如`display:block`）或行内块元素（如`display:inline-block`）。`display:inline-block`允许元素具有宽度和高度，同时保持内联的...
让行内元素转化为块元素的三种方法与特点详解
m0_64458746的博客
03-12 978
1.添加display：block属性，不脱标，独占一行，默认高度与内容同高。 2.添加浮动，脱标则自动转化块元素。 3.添加固定定位或者绝对定位，依然脱离标准流，转化为块元素，定位元素在结构下面的覆盖上面的，并且定位>浮动>标准流 ...
块级元素、行内元素、行内块元素的区别以及转换----Web前端
qq_45593650的博客
10-21 329
1.块元素 在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。 块元素的特点: 1.一个块级元素独占一行。 2.元素的高度、宽度、行高以及顶和底边距都可设置。 ...
【HTML5-小知识】块元素、行内元素和行内块元素
luckyboy!的博客
08-14 4521
HTML常用标签掌握之后，应当进一步了解元素的三种类型，块元素，行内元素，行内块元素，掌握这三种元素类型的特点。以上就是今天要讲的全部内容，本文仅仅介绍了HTML中标签元素的三种类型，块元素、行内元素、行内块元素的通途和特点。在使用标签对网页布局和对文本惊醒排版很重要。...
QT屏幕自适应自动布局，拖动窗口自动变大变小（一）
热门推荐
rjszcb的博客
07-27 2万+
qtQStringList用法，后面写，先记录一下。
float可以改变行内元素的属性(案例检错）
ljyahaha的博客
02-05 185
首先看案例：这里想做出一个仿苏宁导航栏的案例，结构也非常简单，就是一个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>`元素...
CSS提示和技巧
02-15
3. **Grid布局**：CSS Grid提供了一个二维网格系统，允许你精确控制元素的位置和大小。使用`grid-template-columns`和`grid-template-rows`，可以快速创建复杂的网格布局。 4. **响应式设计**：通过媒体查询（`...
瀑布流布局的两种实现方式：传统多列浮动和绝对定位布局
09-25
通过设置元素的`position:absolute`，我们可以让每个数据块根据浏览器窗口的大小动态调整位置，从而实现自适应的瀑布流布局。这种方法的优点是窗口大小变化或新增数据块时，布局能够自动调整，不需要预先设定列数。...
css中如何在一行计算固定宽度和自适应宽度
NanChen的博客
09-19 422
可能会遇到这样一种问题： 图片大小是固定死的，其他在这一行的元素可以随着浏览器变化而等比例缩放 比如：我图片大小固定为72px，那么想让后面的宽度自适应屏幕大小。可以用此公式： width:-webkit-calc(100%-72px); width:-moz-calc(100%-72px); width:calc(100%-72px); 如果换成小屏下不会影响后面的宽度变化： ...
CSS进阶知识
qq_36392801的博客
07-10 354
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 928
display：block，inline，inline-block
vue中使用echarts图表自适应的解决方案
最新发布
xybhua的博客
12-31 384
npm 导入eachart，并在main.js配置。把echarts挂载在 prototype上方便页面调用。为了实现自适应，所以在行内样式的width设置为100%。
页面布局的几种宽度设置方式—html
yunduanaoligei的博客
11-08 2736
今天分享下”页面布局的几种宽度设置方式—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"​​​​>​​ ​​<
前端Vue页面布局内容区域如何设置宽度content内区
m0_49714202的博客
07-04 887
前端Vue页面布局内容区域如何设置宽度content内区
宽高自适应
weixin_46079002的博客
08-26 130
行内元素都是跟随内容大小进行变化的,所有不在此进行讨论 宽度自适应 块级元素是默认进行占满全屏的所以,当我们的没有设置宽度或者把宽度设为100%,或者不设置的情况下会占满全屏 块级元素在没有设置宽度的时候,而且还被嵌套在父级容器里面的时候,会和父级容器等宽,也就是宽度在扩张的时候就如果遇到了父级会停止 注意:当块级元素脱离文档流的时候,宽度会随着自身的内容决定=>这个时候就需要宽高来约束 所以每一个盒子元素都要加宽高!!!!!! 高度自适应: 我们这里还是只是讨论块元素,不考虑行内元素
行内元素设置宽高的3种方法
smile_xting的博客
11-12 2376
将行内元素设置为块级元素，就可以设置宽高 方式一： 使用display： display:block/inline-block <span class="one">test</span> .one{ display: block; //块元素 height: 100px; width: 100px; background-color: red; } 方式二： ...
div 根据内部元素自适应宽度
weixin_34310369的博客
11-12 2741
2019独角兽企业重金招聘Python工程师标准>>> ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值