在做登录框的时候，需要一个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. spring JdbcTemplate数据库

    DAO package DAO; import org.springframework.jdbc.core.JdbcTemplate; public class OrderDao { private ...

  2. 根据xlsx模板生成excel数据文件发送邮件代码

    package mail; import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundExcept ...

  3. 【QT】QT更改构建目录

    菜单“工具”-“选项”. Qt Creator怎样更改默认构建目录_百度经验 https://jingyan.baidu.com/article/6181c3e0b9d170152ef153af.ht ...

  4. undo与redo

    http://www.cnblogs.com/HondaHsu/p/3724815.html

  5. 写在开始前---ajax中的会话过期与重新登录

    一般情况下,点击<a>链接或浏览器输入url时,请求到后端,服务器判断会话是否过期.过期,重定向到登录页,或返回登录页的页面.在ajax中,返回重定向无效,这个时候就需要自己在ajax的逻 ...

  6. 微信小程序开发--富文本插件wxParse的使用

    昨天一位网友问我小程序怎么解析富文本.他尝试过把html转出小程序的组件,但是还是不成功,我说可以把内容剥离出来.但是这两种方法都是不行了.后来找到了wxParse-微信小程序富文本解析组件. 特性 ...

  7. Qt编写自定义控件5-柱状温度计

    前言 柱状温度计控件,可能是很多人练手控件之一,基本上都是垂直方向展示,底部一个水银柱,中间刻度尺,刻度尺可以在左侧右侧或者两侧都有,自适应分辨率改动,有时候为了美观效果,可能还会整个定时器来实现动画 ...

  8. centos 7 rpm方式安装mysql

    一.下载rpm 二.安装 1.用rz上传到centos上,目录为/home/upload 2.解压 tar -xvf mysql-5.7.25-1.el7.x86_64.rpm-bundle.tar ...

  9. 零拷贝sendfile解析

    传统方式read/write send/recv 在传统的文件传输里面(read/write方式),在实现上事实上是比較复杂的,须要经过多次上下文的切换.我们看一下例如以下两行代码: 1. read( ...

  10. Windows下使用VS2017搭建FLTK开发环境

    环境介绍 系统:win10 64位 IDE:VS 2017 Community FLTK版本:1.3.4-2 下载FLTK 截止到本文编写,FLTK的最新稳定版本是1.3.4-2.我们从官网(www. ...