在做登录框的时候,需要一个select 元素作为账号输入,一个input作为密码输入框。在css 文件中,将这两个元素的position 设置为relative ,并且width 设置为100%。刷新页面后发现,两个元素的长度居然不是一样的。最终在stackoverflow 中找到了答案。原来,实际宽度 = width + padding + border,实际高度 = height + padding + border 。要想自己设定的width 或者height 就是实际的宽度或者高度,可以设置box-sizing: border-box;

Select input 两个元素的宽度高度跟设定值不一致的问题的更多相关文章

  1. jquery outerHeight方法 outerWidth方法 获取元素实际宽度高度

    曾经写代码中,每当须要获取元素的实际"宽度"(这里的宽度是指元素宽度加上其边距)时,都须要用元素宽度加上margin值才行,今天发现一个叫outerWidth(options)的方 ...

  2. jq 获取各个元素的宽度高度的方法

    JS获取各种宽度.高度的简单介绍: scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获 ...

  3. 第一百六十六节,jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度、偏移、滚动条

    jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度.偏移.滚动条 学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 ...

  4. js 元素的各种宽度高度

    一.属性 1.只读属性 所谓的只读属性指的是DOM节点的固有属性,该属性只能通过js去获取而不能通过js去设置,而且获取的值是只有数字并不带单位的(px,em等),如下: 1)clientWidth和 ...

  5. 实现span设置宽度(行内元素本来不支持调宽度高度这些样式)(变成行内块元素:display:inline-block;)

    实现span设置宽度(行内元素本来不支持调宽度高度这些样式)(变成行内块元素:display:inline-block;) 一.总结 1.将span从行内元素变成行内快元素就可以调了: 设置样式的时候 ...

  6. box-sizing属性(指定针对元素的宽度与高度的计算方法)

    在css中,使用width属性与height属性来指定元素的宽度与高度.使用box-sizing属性,可以指定用width属性与height属性分别指定的宽度值与高度值是否包含元素的内部补白区域与边框 ...

  7. jQuery获取或设置元素的宽度和高度

    jQuery获取或设置元素的宽度和高度: 可使用以下3种方法: 1,jQuery width() 和 height() 方法: 2,innerWidth() 和 innerHeight() 方法: 3 ...

  8. 使用jQuery获取元素的宽度或高度的几种情况

    今天说说使用jQuery获取元素大小的遇到几种情况 使用jQuery获取元素的宽度或高度的有几种情况: 1.使用width(),它只能获取当前元素的内容的宽度: 2.使用innerWidth(),它只 ...

  9. 【提取元素的值 】【追加文本append】【删除文本remove】【class的操作】【读取元素的宽度,高度】

    1.取值 $("#test").text()                                    //取id=test里面的文字 $("#test&qu ...

随机推荐

  1. netty 粘包的解决策略

    粘包问题的解决策略      由于底层的 TCP 无法理解上层业务数据,所以在底层是无法保证数据包不被拆分和重组的 , 这个问题只能通过上层的应用协议栈设计来解决,根据业界主流的协议的解决方案, 可以 ...

  2. Deseq2 的可视化策略汇总

    1) MA图   对于MA图而言, 横坐标为该基因在所有样本中的均值,basemean = (basemean_A + basemean_B ) / 2, 纵坐标为 log2Fold change 其 ...

  3. Postman-REST-Client_v0.8.1之chrome插件下载

    一.前言 安装chrome浏览器postman-rest-client插件,实现基于资源RestFul的http协议的GET.POST.DELETE.PUT等方式请求调用,具体安装使用步骤如下所示 二 ...

  4. nodejs在windows下的安装配置(使用NVM的方式)

    NVM的安装 1.下载安装包,https://github.com/coreybutler/nvm-windows/releases 2.下载完成后点击nvm-setup,按步骤安装,注意路径中不能带 ...

  5. MySQL-[SIGNAL/RESIGNAL/GET DIAGNOSTICS]的使用

    最近在做 SQL Server 到 MySQL 的迁移(migration),相较于对表和数据的迁移,最令人犯难的还是在功能性存储过程脚本的改写转换(convert),虽说 MySQL 如今是蓬勃发展 ...

  6. 必问的Java集合框架面试题

    Arraylist 与 LinkedList 异同 是否保证线程安全: ArrayList 和 LinkedList 都是不同步的,也就是不保证线程安全: 底层数据结构: Arraylist 底层使用 ...

  7. Windows 环境Oracle客户端下载安装

    Windows 环境Oracle客户端下载安装 1.官方网站下载Oracle客户端 64位下载地址 http://www.oracle.com/technetwork/database/enterpr ...

  8. java中jdbc源码解读

    在jdbc中一个重要的接口类就是java.sql.Driver,其中有一个重要的方法:Connection connect(String url, java.util.Propeties info); ...

  9. 微信小程序开发笔记04

    今天将小程序的页面进行优化 消除昨天遇到的bug问题. 完成了微信小程序的开发.

  10. allegro画电路板

    出图: 选择save all checked导出film_setup.txt: 选择replace导入film_setup.txt: 丝印层选择silkscreen,但是silkscreen和asse ...