一般情况下,行内元素设置宽高是无效的,常见的有a标签。img和input也属于行内元素,但他们却可以设置宽高!!!!

查阅了一些资料才明白,原来css的元素还有另外一种分类方法,可替换元素,不可替换元素。

a)可替换元素

浏览器根据标签的属性来决定元素的具体显示内容。如img标签,浏览器通过src属性读取图片信息(包括图片的宽高)来显示出来。input标签,通过它的type属性来决定它是文本域(type="text'),还是提交按钮(type="submit")等,对于表单元素,浏览器也有默认的样式,包括宽度和高度。所以替换元素一般存在width和height属性,可以设置或更改其宽高。

b)不可替换元素

大多数元素为不可替换元素,其内容直接表现给客户端(浏览器);

几乎大部分可替换元素都为行内元素,如img,input。所以这也就是为什么行内元素img,input可以设置宽高的原因了。

css中的img和input标签的更多相关文章

  1. input标签写CSS时需要注意的几点(先收藏)

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-05-05) 飞鱼的声纳顶部的搜索框让我头疼了很长时间,原因是总不能获得跨浏览器的统一样式.主要的问题有这么两个:一是inpu ...

  2. 使用CSS3中的input标签与lable标签组合实现banner图的切换

    在做网页时,我们经常可以碰到banner图的切换.对于那些JS薄弱的同学来说,这就很尴尬了.今天,我来告诉大家如何使用CSS做出banner图切换的效果. 这里,用到了lable标签与input的组合 ...

  3. html5中form表单新增属性以及改良的input标签元素的种类

    在HTML5中,表单新增了一些属性,input标签也有了更多的type类型,有些实现了js才能实现的特效,但目前有些浏览器不能全部支持.下面是一些h5在表单和input标签上的一些改动. <!D ...

  4. 纯html+css中实现静态选座位效果技巧(input+label使用小技巧)

    很多时候,我们想通过html+css的方式实现排列在后方的代码在选中状态下,能控制排列在前的代码的样式.那么要怎么实现呢?在这里我就要用1个小技巧来完成. 众所周知的,我们css中的选择器通常只能向下 ...

  5. CSS中html的标签元素分类

    在CSS中,html中的标签元素大体被分为三种不同的类型: 块状元素.内联元素(又叫行内元素)和内联块状元素.    常用的块状元素有:  <div>.<p>.<h1&g ...

  6. HTML中强大的input标签属性

    用了许久的html,<input>这个标签是最常用的标签之一. <input type="">标签中type属性是必不可少的,以往我最常用的有 type=& ...

  7. 控制input标签中只能输入数字以及小数点后两位

    js 代码如下: /* 控制input标签中只能输入数字 和小数点后两位 */ function checkNum(obj) { //检查是否是非数字值 if (isNaN(obj.value)) { ...

  8. CSS中zoom:1的作用 ,小标签大作用

    CSS中zoom:1的作用兼容IE6.IE7.IE8浏览器,经常会遇到一些问题,可以使用zoom:1来解决,有如下作用:触发IE浏览器的haslayout解决ie下的浮动,margin重叠等一些问题. ...

  9. Web前端开发如何利用css样式来控制Html中的h1/h2/h3标签不换行

      H1/H2/H3/H4标题标签常常使用在一个网页中唯一标题.重要栏目.重要标题等情形下. H1在一个网页中最好只使用一次,如对一个网页唯一标题使用.H2.H3.H4标签则可以在一个网页中多次出现, ...

随机推荐

  1. 【自动化测试】Selenium的智能等待

    dr.implicitly_wait(30) --- 智能等待 http://www.cnblogs.com/fnng/p/3214112.html =========== selenium 调用键盘 ...

  2. 虚拟机安装centos 6 报错Erro processing drive

    错误提示: Error processing drive: pci-0000:00:10-scsi-0:0:0:0 20480MB VMware,VMware Virtual S This devic ...

  3. WPF为提示信息文本增加闪烁效果

    程序通常需要显示某些提醒用户警示的信息,如:收件箱(40)其中数量闪烁就会起到警示效果.可以适用如下Storyboard实现: <ItemsControl.ItemTemplate> &l ...

  4. web开发利器 fiddler

    http://mccxj.github.io/blog/20130531_introduce-to-fiddler.html

  5. crontab的安装及crontab命令介绍

    前一天学习了 at 命令是针对仅运行一次的任务,循环运行的例行性计划任务,linux系统则是由 cron (crond) 这个系统服务来控制的.Linux 系统上面原本就有非常多的计划性工作,因此这个 ...

  6. 几种ESB(企业服务总线)介绍

    ESB(Enterprise Service Bus,即企业服务总线)是传统中间件技术与XML.Web服务等技术结合的产物.ESB提供了网络中最基本的连接中枢,是构筑企业神经系统的必要元素. 企业服务 ...

  7. 记录一次cefsharp1输入法在win7下异常解决定位

    最近几天都被基于cefSharp封装的浏览器控件搞疯了!对于cefSharp基本满足当前所做项目的需求,但是有一个问题一直困扰我,那就是系统中偶尔会出现输入法不能转换到中文.而且这个问题似乎没有什么规 ...

  8. 横版动作MOBA《超宇宙》首测试玩曝光 详解游戏特色(转)

    http://play.163.com/15/0911/11/B37RHHO100314J6L.html

  9. sendip简单使用

    sendip是linux下一个比较好用的发包软件,简单记录一下它的用法 下载源码,编译安装后,可通过  man sendip,查看具体选项介绍,其中说明sendip支持的协议包括:ipv4 ipv6 ...

  10. html5的一些表单属性

    IE8及以下不能很好支持这些属性 <pre>input属性: placeholder:输入框的默认值,向用户显示描述性说明文字或者提示信息 autocomplete:值为on和off..o ...