input 的size=“”属性和style="width:" 的区别

最新推荐文章于 2023-08-11 14:00:23 发布
最新推荐文章于 2023-08-11 14:00:23 发布
阅读量8.3k 收藏 2
点赞数 1
分类专栏： 前端 HTML+CSS 文章标签： input text size style width
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39767955/article/details/82911355
版权

一般来说，这两个都可以用来设置input type=“text” 文本框的长度，但两者还是有区别：style="width:10px"的长度单位是px，size的长度单位是“字符”，看下图就知道：

当两者同时使用的时候，输入框的长度由style="width:100px" 决定（本人Chrome亲测）！！！

纳木错没有错
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
style=“width: ___“ VS width=“___“
liuhao9999的博客
07-27 291
尽管它似乎是其他元素的有效属性声明，但它不会产生任何影响。建议直接或通过JavaScript设置画布的。CSS样式属性的优先级高于HTML属性。和属性可用于所有HTML元素。元素，它们不会产生相同的结果。属性，以避免画布被拉伸的问题。属性仅适用于某些元素，例如。属性必须是没有单位的正数。和属性，则将使用默认值。属性默认为300，属性。...
input type=file 显示的浏览 改成英文
06-30
首先，我们需要理解`<input type="file">`的基本结构和属性。这个标签创建了一个可以点击的区域，用户可以通过点击打开本地文件选择对话框。默认情况下，这个标签的外观和行为由浏览器控制，但我们可以使用CSS和...
style="width: ___" 与 width="___"
lio-zero 的博客
12-03 484
有两种方法可以定义图片的尺寸： 使用 height 或 width 属性： <img height="100" /> 或者在 CSS 样式中使用 height 或 width 属性： <img style="height: 100px" /> 区别 CSS width 和 height 属性可用于所有 HTML 元素。但 HTML width 和 height 属性...
[html] input元素size属性和width 的区别是什么？
歌谣的博客
04-09 681
[html] input元素size属性和width 的区别是什么？ size:在MDN的定义： 控件的初始大小。以像素为单位。但当type 属性为text 或 password时, 它表示输入的字符的长度。从HTML5开始, 此属性仅适用于当 type 属性为 text, search, tel, url, email,或 password；否则会被忽略。 此外，它的值必须大于0。 如果未指定大小，则使用默认值20。 HTML5 概述 "用户代理应该确保至少大部分字符是可见的", 但是不同的字
:style=“`width: ${item.width}`“解释
sinat_36227086的博客
08-24 1547
:style="width: ${item.width}"中 ${item.width}是ES6中模板字符串（template string）中用占位符拼接字符串的方法。
<span style='width: ""> </span> width不起作用
u014467070的博客
02-28 1497
在style中加 display:inline-block;  原文地址：http://www.cnblogs.com/hnyei/archive/2012/03/12/2392026.html
input type=file 及时预览图片
01-06
<img id="preview" style="max-width: 100%; height: auto;"> ``` 然后在JavaScript中： ```javascript document.getElementById('preview').src = e.target.result; ``` 最后，提供的`cho.html`文件可能是一个...
使一个input文本框随其中内容而变化长度的方法
12-14
第一: 复制代码代码如下: <input type=”text” onkeydown=”this.onkeyup();” onkeyup=”this.size=(this.value.length>4?...第二: 如果你在style里定义了width属性,又要让它的width根据内
微信小程序input框中加入小图标的实现方法
08-27
<input style='width:80%;display:inline-block;height:100%;' placeholder-style='font-size:12px;' placeholder='用户名'></input> <view style='width:100%;height:38px;display:inline-block;background:#...
JS控制文本域只读或可写属性的方法
11-22
input id="username" name="userneme" type="text" style="width:50px" size=106> 密码:<input id="userpwd" type="text" name="userpwd" size=106 style="width:50px"> <input name="content" type=...
创建对话框时的长度单位
JamesXing的专栏
07-27 902
创建对话框的时候，在右下方会有一个长x宽的值，这个值的单位为：DLU1个横向DLU   =   对话框字体宽度/4   1个纵向DLU   =   对话框字体高度/8   与对话框字体有关，不是一绝对单位.
vue使用‘:style‘控制动态width样式!
最新发布
TangMonk的博客
08-11 969
【代码】vue使用‘:style‘控制动态width样式!
vue 动态style 拼接宽度
qq_30872253的博客
11-27 4813
大众用法： ：style=" { width:30px } " 拼接宽度以及其他
前端屏幕尺寸 适配 拿走即用附加详细注释
xiaoleiv9的博客
03-18 2483
前端做屏幕适配手段
【表单设计】input的size和maxlength属性
记录编程生活
06-16 2680
1、示例代码： p>用户名：input type="text" maxlength="8"placeholder="密码/邮箱">p> p>用户名：input type="text" size="8" placeholder="用户名/邮箱">p> 2、区别： maxlength="8"：input输入框中只能够输入8个字符，输入8个字符后再不能输入，即最大输入字符
input组件支持限制字符、汉字
weixin_38516688的博客
12-09 877
在平时开发的过程中，产品终会提一些另辟蹊径的建议，例如我们在做输入限制的时候，产品希望可以根据输入字符汉字不同去做不同限制；例如：限制输入10个字符或者5个汉字 开发时候踩到的坑 中文截断问题 这个问题应该很多人都碰到过，并且网上的解决方法也有很多，其实使用onkeydown/onkeypress/onkeyup事件来监听并不能解决复制问题，在苦（cha）思(zhao)冥(gu)想(ge)的情况...
Input的size与maxlength属性的区别
aa_moon的专栏
12-02 877
所以 应该用 maxlength=5 最近做项目用到input的size和maxlength属性，以前只顾用没有用心去看看这2个标签的区别，今天周末baidu了一下，有所理解。特记录于此！   Name:   Name2: maxlength="5",则input输入框中只能够输入5个字符 size="5"，表示input输入框只显示5个可见的字符，但你可以输入'无数'多字符内容
控制输入文本框的宽度属性size
weixin_34220834的博客
08-28 642
定义 input 字段的宽度 <inputsize="60px"type="text"/> <inputwidth="60px"type="text"/> width属性需要html5才支持 本文出自 “点滴积累” 博客，请务必保留此出处http://tianxingzhe.blog.51cto.com/339...
CSS布局
Mr_Odds的博客
03-24 138
css样式种类：0.css布局方法：a.行内样式&lt;div style="width:10px"&gt;&lt;/div&gt;b.内嵌样式&lt;style&gt; div{width:10px} &lt;/style&gt;c.外部样式&lt;link rel="stylesheet" href=""&gt;1.标签样式div,span,ul,li等都是
<div style="display: flex; margin-left: 0;text-align:center;vertical-align:middle;"> <input type ='submit' placeholder ="计算" value="计算" style="display: flex;width:120px;height: 44px;border-style:solid;border-color:#C23531;background-color:#C23531;font-size: 17px;letter-spacing:3px;"> </div>这样设置了，但还是无法居中，而且边框效果也不对
06-01
您可以尝试修改CSS样式代码，使其实现居中效果和边框效果，如下所示： HTML代码： ```html <div style="display: flex; justify-content: center; align-items: center; margin-left: 0;"> <input type="submit" placeholder="计算" value="计算" style="width: 120px; height: 44px; border: 1px solid #C23531; background-color: #C23531; font-size: 17px; letter-spacing: 3px; color: #fff; text-align: center;"> </div> ``` CSS代码： ```css div { display: flex; justify-content: center; align-items: center; margin-left: 0; } input[type="submit"] { width: 120px; height: 44px; border: 1px solid #C23531; background-color: #C23531; font-size: 17px; letter-spacing: 3px; color: #fff; text-align: center; } ``` 解释： - `justify-content: center;`和`align-items: center;`可以使得父元素和子元素都在水平和垂直方向上居中。 - `border: 1px solid #C23531;`可以设置边框的颜色和宽度。 - `color: #fff;`可以设置文字的颜色为白色。 这样设置后，应该能够实现您想要的居中和边框效果了。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值