HTML5绝对定位图片合成,HTML5 绝对定位的问题

HTML5 布局之路 - 表单实例

.wrap {

width:300px;

height:100px;

padding:12px;

border:1px solid #933;

}

.user, .pass {

position:relative;

height:46px;

padding-left:48px;

border:1px solid #d9d9d9;

border-radius:3px;

}

.user {

margin-bottom:8px;

background:url('../images/user.png') 0 0 no-repeat;

}

.pass {

background:url('../images/pass.png') 0 0 no-repeat;

}

.wrap label, .wrap input {

position:absolute;

top:0;

left:48px;

}

.wrap label {

z-index:1;

width:250px;

height:100%;

line-height:46px;

color:#666;

cursor:text; /*文字光标*/

}

.wrap input {

width:250px;

height:100%;

border:none;

background:transparent;

line-height:46px;

outline:none; /*去掉高亮部分*/

}

请输入用户名

请输入密码

背景图片大小为48*48

三个问题。

form宽度设置为300px 子级div默认沾满form的宽度，且有1px的边框宽度但是这里子级div宽度是跟form持平为300px而不是302px，为什么没有溢出？

绝对定位的问题，这里子级div有48px的左内边距，说明div的内容区域并没有300px，为什么绝对定位会从最左边的边框处开始定位，而不是从内容区域开始定位？

background:url('../images/pass.png') 0 0 no-repeat;这里的图片定位水平0 垂直0要如何看，麻烦讲解下？

HTML5绝对定位图片合成,HTML5 绝对定位的问题相关推荐

HTML5隐藏图片代码,HTML5终极备忘大全（图片版+文字版）
一.前言兼图片备忘下图是我从testking网站上的Ultimate HTML5 Cheatsheat这篇文章中备忘图片(已大小优化,因为图片较高,故滚动显示). 但是,上面毕竟是图片格式(原图上兆 ...
html5中图片热点,HTML5 创建热点图
通过HTML5 canvas画布创建简单的热点图,当鼠标划过时产生热点,停留时间越长,热点亮度越高. 下面是HTML部分: #heatmap{background-image:url("ma ...
html5页面图片切换,HTML5单页面手势滑屏切换原理
H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理 ...
html5 jq图片效果,HTML5 jQuery可左右滑动拖拉的照片处理前后对比界面
CSS 语言: CSSSCSS 确定 /*CLEARFIX*/ body{margin: 0;} .clearfix:after { content: "."; display: ...
html5 canvas 图片变形,HTML5/Canvas 流动的变形圆形
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 /** * inspired by: * Rectangle World * http://rectangl ...
html5多图合成gif,gif动态图片制作多张图片合成gif动态图片
单一的静态图片太枯燥,GIF动态图片看起来才有意思有木有!网上各种经典爆笑GIF图片或者闪图,大多数的友友们只会看→复制→外发,难道就没有朋友想要自己制作GIF动态图片吗?如何制作gif动态图片?狸窝 ...
简单的字幕效果html,7种HTML5 Figure图片字幕标题特效
这是一款效果非常酷的HTML5 Figure图片字幕标题特效jQuery插件.该插件可以将任何图片元素转换为带标题的HTML figure元素.它内置了7种不同的图片标题效果.当标题文字高于图片时,还 ...
如何把HTML转换成动图,html5实现图片转圈的动画效果——让页面动起来
1.先瞧瞧效果: 2.代码是这样的: @mixin ani-btnRotate{ @keyframes btnRotate{ from{transform: rotateZ(0);} to{trans ...
html5内容切换特效,html5+jQuery图片和文字内容同时左右切换特效
html5+jQuery图片和文字内容同时左右切换特效,点击图片或者点击左右按钮进行切换,图片转动以及文字内容动画效果切换. 查看演示下载资源: 22 次下载资源下载积分: 20 积分 js代码 ...

HTML5绝对定位图片合成,HTML5 绝对定位的问题

HTML5绝对定位图片合成,HTML5 绝对定位的问题相关推荐

最新文章

热门文章