css中的img和input标签

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

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

a)可替换元素

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

b)不可替换元素

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

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

时间: 2024-10-05 09:15:28

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

关于<input>标签

<input>标签用于让用户输入信息今天主要讲<input type="text"/>,这种类型非常多见,各大网站的搜索栏中都会出现,比如在淘宝中用户通过它搜索想要的商品.那么怎么做出一个类似淘宝的搜索框? 代码实现: <input type="text" placeholder="家居摆设添欣喜"/> <button>搜索</button> css中设置样式:input{ /*让输入框

CSS中,html中的标签元素

在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <div>.<p>.<h1>...<h6>.<ol>.<ul>.<dl>.<table>.<address>.<blockquote> .<form> 常用的内联元素有: <a>.<span>.<br>.<

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

在HTML5中,表单新增了一些属性,input标签也有了更多的type类型,有些实现了js才能实现的特效,但目前有些浏览器不能全部支持.下面是一些h5在表单和input标签上的一些改动. <!DOCTYPE html><html> <head> <title>表单测试</title> <meta charset="utf-8" /> <!-- 在不支持h5的浏览器中,可以用CSS样式进行改写 --> &

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

(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-05-05) 飞鱼的声纳顶部的搜索框让我头疼了很长时间,原因是总不能获得跨浏览器的统一样式.主要的问题有这么两个:一是input标签的高度不能统一,Firefox和IE中的高度始终不能一致:二是在IE浏览器中属性为text的input标签中的输入文字不像标准浏览器中的那样垂直居中显示,而是靠输入框的左上角显示. 为了彻底解决搜索框的这些问题,我以GreenGaint主题搜索框的样式为准,重写了一遍代码并且以像素为单位测量了

使用css全面美化input标签

做网站时经常有这样那样的需要,要美化input ,于是CSS的美化必不可少.和程序人生的站长交流,他发给我这个. 下面是CSS样式 Js代码   input { border:1px solid #B3D6EF; background:#ffffff; } input { star : expression( onmouseover=function(){this.style.backgroundColor="#D5E9F6"}, onmouseout=function(){this.

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

在做网页时,我们经常可以碰到banner图的切换.对于那些JS薄弱的同学来说,这就很尴尬了.今天,我来告诉大家如何使用CSS做出banner图切换的效果. 这里,用到了lable标签与input的组合,首先先来了解下lable标签 <label> 标签为 input 元素定义标签(label). label 元素不会向用户呈现任何特殊的样式.不过,它为鼠标用户改善了可用性,因为如果用户点击 label 元素内的文本,则会切换到控件本身. <label> 标签的 for 属性应该等于

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

很多时候,我们想通过html+css的方式实现排列在后方的代码在选中状态下,能控制排列在前的代码的样式.那么要怎么实现呢?在这里我就要用1个小技巧来完成. 众所周知的,我们css中的选择器通常只能向下或者同级向下选中,而不能向上选中,这样就对于想控制前面样式的时候带来麻烦.input+label关联的方式即可实现,因为input和label是通过id值来进行关联的,而html中规定了,id值必须唯一,那么我将input放置在html的body下的任意位置,均可实现关联,所以为了实现后方代码控制前

CSS中去除input边框问题

一般我们在使用input标签时,都默认带有四个方向的边框,但为了好看我们有需要去掉边框的需求.可以设置如下样式: input{ border:0;? }? 不过如此设置的话在文本框获取焦点要输入时还是会有边框,解决方法是加上如下样式设置: input{ outline:medium; }? 即能实现. W3C中定义的outline属性: outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用.?

CSS中的行内标签变成块级标签

大家都知道,CSS中的行内标签(span,i,b等等),是不能设置宽高或者margin-top;margin-bottom;但是在设置了display为block或者inline-block的情况下是可以设置的,这就是常见的行内元素转化为块级元素: 今天给大家分享的是自己在案例中看到的小技巧.给行内标签添加position:absolute或者float中的设置,行内元素是会被默认转成块级元素!!!