HTML标签的宽高设置

最新推荐文章于 2024-05-21 18:11:13 发布
最新推荐文章于 2024-05-21 18:11:13 发布
阅读量2.2k 收藏
点赞数
文章标签： html 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/icbjhbcjkbda/article/details/127351852
版权

标签的高度：

如果不设置那么由元素撑开，设置高度则为设置的高度，设置百分比则为父标签的百分比高度

标签的宽度：

块级标签：（block）每个标签单独占据一行，可以设置宽高，如果不设置高度则由内部元素撑开，不设置宽度则宽度与父元素一致

行内标签：（inline）不可设置宽度，宽高全部依靠内部内容撑开，可以多个标签在同一行。常见的行内标签：a、span、em、strong、b、i、u、label、br

行内块级元素:(inline-block) 可以设置宽高且可以多个标签共处一行

可以通过display属性设置标签为块级，行内块级，和行内

高山流水剑气长
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
浅谈html标签的显示模式(块级标签,行内标签,行内块标签)
12-14
今天讲课的时候，讲到了html中的标签的显示模式，大致分为块级标签和行内标签。那么初学者在刚使用标签的时候会发现有些属性在一些标签上不起作用，比如宽、高、水平居中等，其实这个属性的使用只有在块级标签上使用才起作用。个人认为这个也是初学者非常容易忽略的地方，所以我就把它记下来！ 比如会有一种情况，给p标签水平居中有作用，但是给font加水平居中属性就没作用（如下）： XML/HTML Code复制内容到剪贴板 p{ color:red; text-align:center;}font{color:red; text-align:center;}     XML/HTML Code
canvas需要在标签里直接定义宽高
01-19
以前用canvas画图时，都是直接在canvas标签里直接写上宽高，没有问题，但也没有探究过为什么宽高要直接写在canvas标签里，因为各个资料的例子上都是这么写的。今天王sir提出了一个问题：如果把宽高写在<style>里，看看会有什么不同。自己试了以下，果然有问题。 先看一下代码： 复制代码代码如下:<!DOCTYPE html><html><head><meta charset=”utf-8″><title>canvas</title><meta name=”Keywords” content=””><meta name=”author” content=”@my_programmer”
HTML5&CSS3网页制作：CSS控制视频的宽高.pptx
05-31
CSS控制视频的宽高 video元素自身控制 01 通过元素自身属性控制 在HTML5中，经常会通过为video元素添加宽高的方式给视频预留一定的空间，这样浏览器在加载页面时就会预先确定视频的尺寸，为其保留合适的空间，使页面的布局不产生变化。 通过元素自身属性控制 例：加载一个视频并设置视频尺寸宽为200、高为300。 注意：当不设置大小时，默认为视频的大小 通过元素自身属性控制 <video width=“200" height="300" src="video/pian.mp4" controls> 浏览器不支持video标签</video> 通过CSS改变视频宽高 02 通过CSS改变视频宽高 例：加载一个视频使用CSS设置视频的宽为400，高为300。 基本语法格式 <head> <style> video{ width:400px; height:300px; } </style> </head> <body> <video src="video/pian.mp4" controls> 浏览器不支持video标签</video> </body> 通过CSS改变视频宽高 总结
i标签添加背景图片背景大小问题
weixin_39612961的博客
05-21 5889
background: url(../assets/img/arrow-right.png) no-repeat center;background-size: cover;   /*background-size的cover特定值会保持图像本身的宽高比例，将图片缩放到正好完全覆盖定义背景的区域。*/display: inline-block;参考：https://blog.csdn.net/sw...
vue 改变i标签icon图标的大小
qq_57031340的博客
08-06 1万+
vue i标签中icon图标的设置，之前搞错了方向，一直以为是按照图片格式弄，其实是按照编辑文字格式的逻辑来的。
CSS五种居中方法
Start_t的博客
12-02 1534
CSS五种居中方法 1.方法一 通过写一个标签，i标签的高度为百分之百，让i标签的中点和要居中元素的中点处在同一位置 <!doctype html> <html> <head> <meta charset="utf-8"> <title>五大居中1</title> <style> *{margi...
常用html标签及其属性
热门推荐
weixin_53988377的博客
07-16 1万+
网页的基本结构文档类型声明标签文档标记标签文档的头部标签文档的主体标签。
HTML标签讲解使用（超详细）
Python
11-17 107
这样的话，我们就可以在网页的顶部设置一些锚点，这样便可以方便浏览者点击相应的锚点，到达本页内相应的位置，而不必在一个很长的网页里自行寻找。表单主要是用来收集客户端提供的相关信息，提供了用户数据录入的方式，有多选、单选、单行文本、下拉列表等输入框，便于网站管理员收集用户的数据，是Web浏览器和Web服务器之间实现信息交流和数据传递的桥梁.2、网络链接指的是依靠网络来进行关联的地址，一般在地址前面是以 http://或者https://这样开头的，如果没有网络，则用户点击了超链接也无法访问对应的目标。
html中i标签控制图标大小,直接使用i标签 class加入 material-icons属性
weixin_35355431的博客
06-30 5668
或者自定义demo.css文件 写入如下内容：@font-face {font-family: 'Material Icons';font-style: normal;font-weight: 400;src: url(https://fonts.gstatic.com/s/materialicons/v43/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('...
html 表格单元格的宽度和高度的设置方法
12-11
详细地看了html中表格标签table的高度和宽度设置的细节，现总结如下：  1、table中的width和height设置及其作用：table中设置的height其实是设置个最小值，也就是当表格中的内容或者行高总值超过这个设置值时，会...
使用HTML开发商业网站-CSS控制单元格宽和高课件.pptx
07-10
除了表格标签自带的属性外，还可用CSS的边框、宽高、颜色等来控制表格样式。此外，CSS中还提供了表格专用属性，以便控制表格样式。 本节将从边框、边距和宽高三个方面，详细讲解CSS控制表格样式的具体方法。 CSS控制...
调整el-icon的大小
weixin_55020138的博客
08-26 8815
Element-UI 调整el-icon的大小，调整el-button中el-icon的大小
2021-03-01
LHJ0_0的博客
03-01 148
下拉列表且右拉框 首先我们先看看初始样式： 接着我们看一下最终的效果： 现在我们看HTML的布局： 首先一个大的a标签包裹着一句文本，后面接着p标签，p标签里面接着i标签，同时p标签包裹着一句文本； 这里放a标签是因为这是一个“按钮”，按钮肯定会有点击，所以我们就要用到a标签，然它在点击时有一个页面跳转；p标签在这里的意义就是一个包裹文本的标签； 现在，我们来看a标签的样式： 先是将这个元素变成行内块级元素，然后给一个相对定位，内边距：上下为0px 左右为20px，高100px，行高100px，字体颜
【CSS】标签显示模式 ④ ( 标签显示模式示例 | 设置行内元素宽高 | 设置鼠标经过样式 | 设置文字水平居中 | 设置文字垂直居中 | 文本行高与盒子高度关系 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
03-08 943
一、标签显示模式示例 1、基本结构 2、设置行内元素宽高 3、设置元素背景 4、设置文字水平居中 5、取消链接文字下划线装饰 6、设置鼠标经过样式 二、文字垂直居中 1、行高测量 2、垂直居中设置 3、文本行高与盒子高度关系 三、完整代码示例 代码示例 显示效果
标签分类及宽高整理
keruisiya的博客
05-23 820
标签的分类： 块级元素（独自站一行 可以设置宽高 对齐属性） 如：h1 p div ul ol li ​ 特点：默认的宽是100%； ​ 自动换行（一行只放一个 不管宽度多少） ​ ​ 可以容纳内联元素和其他块元素 行内元素 （内容撑开页面，不可以设置宽高） 如 a strong em b i del s span等 ​ 特点：不占独立的区域； 仅仅依靠自身的字体大小和图片支撑结构 ​ 不可以设置
CSS学习
HLXchamp的博客
02-06 488
css基础学习
前端Html5（23）
weixin_64909133的博客
01-14 376
1.超好用的结构性伪类 选中第一个li li:nth-of-type(1){ background: springgreen; } 或者 li:first-of-type{ background: red; } 选中最后一个 li:last-of-type{ background: yellow; } /* 还可以这样子表示 前提是你知道有多少个*/ li:nth-of-type(10){ background: violet; } /* 可以表示倒数第几个 *..
破解ReadOnly: 如何在HTML中灵活处理不可编辑字段
m0_57021623的博客
05-16 659
对于服务器端处理关键字段，如价格或折扣率，最佳实践是在服务器端重新计算这些值或从可信源（例如数据库）验证这些值，以确保数据的完整性和正确性。是HTML中用于表单输入字段的一个属性，它的目的是阻止用户修改输入字段的值，但允许用户提交表单时包含这些值。方法来修改页面元素的属性，提供了更多的灵活性和控制能力，特别是在处理那些通过HTML属性强制施加的限制时。，通常有其背后的理由，比如保护数据的完整性。对于一些关键字段，如价格、折扣率等，服务器端可以在每次处理前都重新计算或验证这些数据，而不是依赖前端提交的值。
前端基础入门三大核心之HTML篇 —— 深入解析从URL请求到页面加载的艺术
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-21 328
前端技术的博大精深，远不止于此。从HTML的简单解析到复杂的SPA应用，每一步都蕴含着开发者对极致体验的追求。本文旨在为你铺就一条坚实的基础之路，鼓励你不断深入学习，探索新技术，实践新理念。前端的世界日新月异，保持好奇心，勇于实践，你将在这条道路上走得更远。最后，我们期待你在评论区分享你的学习心得、实战经验或是对未来前端发展的独到见解，让我们一起推动Web技术的车轮滚滚向前。欢迎来到我的博客，很高兴能够在这里和您见面！
vue 动态设置 image标签 宽高
04-05
可以使用Vue的绑定语法（v-bind）来动态设置image标签的宽高。例如，可以使用以下代码： ```html <template> <div> <img :src="imageSrc" :width="imageWidth" :height="imageHeight" /> </div> </template> <script> export default { data() { return { imageSrc: 'https://example.com/image.jpg', imageWidth: 100, imageHeight: 100 } }, methods: { updateImageSize(width, height) { this.imageWidth = width this.imageHeight = height } } } </script> ``` 在上面的例子中，使用了三个绑定语法（v-bind）来动态设置image标签的src、width和height属性。imageSrc、imageWidth和imageHeight都是data中定义的响应式变量。在updateImageSize方法中，可以通过改变这些变量的值来动态改变image标签的宽高。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值