文档章节

margin使用小技巧

nao
 nao
发布于 2015/02/02 19:20
字数 661
阅读 55
收藏 0

你是不是经常遇到所下所示相似的设计,而你是如何怎么实现的输入框中嵌入小图标的呢?欢迎讨论……

下面是我自己逐步思考的一个过程:

一个简单的HTML代码如下:

<html>
<head>
	<link href="margin.css" rel="stylesheet"/>
</head>
<body>
	<div>
		<input type="text" value="搜索" />
		<span class="searchDomainIcon"></span>
		<span class="insert"></span>
	</div>
</body>
</html>

下面进行CSS样式的控制:

input[type="text"]
{
	outline:none;
	border:none;
	font-size: 11px;
	color: #616060;
	border-bottom: 1px solid #949799;
	cursor:pointer;
	padding: 0  0 1px 1px;
}
.searchDomainIcon
{
	display: inline-block;
	position: absolute;
	width: 20px;
	height: 20px;
	background: url(search.png) 0 0;
	cursor: pointer;
} 

/***********起初是这么写的*************/
/*
.searchDomainIcon
{
	top: 5px;
	left: 136px;
}

后来发现这样写不行:

添加如下样式后,也就是父级元素的位置发生改变了:

div{margin:50px;}

小图表的位置就出现问题了。

后来把div,即父级元素设置成了相对定位,这个问题就解决了,代码如下:

div
{
	position: relative;
	margin:50px;
}
.searchDomainIcon
{
	top: 5px;
	left: 130px;
}

但是这样问题又来了,哪一天若在input前面加入了其他的元素,小图标位置又出现了问题,问题出在了left上,对上述代码又一次进行了改写,如今写法如下:

.searchDomainIcon
{
	top: 5px;
	margin-left:-20px;
}

这样终于不受input前面插入其他元素和父级元素样式改变的影响了。终于可以开心的玩耍了……

但是,后来又发现了还不是那么的完美,若插入的一个元素,或改变元素的margin等属性 把此行的行框高度变大,top属性的值就出现问题了,

于是当要写这种设计的样式的时候,就去避免改变行框高度的因素去规避这些问题。

注意:当使用js代码去控制元素的显示或者不显示时,

$("#btnToData").show();$("#btnToData").hide();函数,

当隐藏和显示切换时,会出现小图标不见了的现象,经调试发现调用show后元素的display属性变成了block,所以就显示不了了。

故在用到上述切换的js代码时,需要在show()函数后面用调用CSS去控制display属性。如下:

上述问题引深出来一些对CSS中,position:absolute相关问题的思考,

思考1:若元素设置了position:absolute属性,但是不设置top,left等定位属性,元素是否脱离了文档流?

有待思考验证与总结。





© 著作权归作者所有

上一篇: ranch学习
下一篇: 正则表达式
nao

nao

粉丝 28
博文 155
码字总数 108154
作品 0
成都
后端工程师
私信 提问
居中的方法 二十余种 有点吃鲸

1、Line-height适用情景:单行文字垂直居中技巧这个方式应该是最多人知道的了,常见于单行文字的应用,像是按钮这一类对象,或者是下拉框、导航此类元素最常见到的方式了。此方式的原理是在于...

ochmd
2018/08/27
0
0
CSS兼容性技巧整理--从IE6-IE9 火狐谷歌浏览器兼容

CSS兼容性技巧整理--从IE6-IE9 火狐谷歌浏览器兼容

qycms_cn
2012/09/07
0
30
CSS兼容性技巧整理--从IE6-IE9 火狐谷歌浏览器兼容

CSS兼容性技巧整理--从IE6-IE9 火狐谷歌浏览器兼容

风一样
2013/03/10
0
0
CSS垂直居中技巧,我只会23个,你会几个?

转载https://mp.weixin.qq.com/s/JL-9juZgbpzCnp6FnLVAQ 自古以来(是有多?~),网页CSS的垂直居中需求始终没有停过,而其困难度也始终没有让人轻松过,经过了每位开发先烈的研究后,据说CSS的...

大灰狼的小绵羊哥哥
2018/08/27
0
0
lldb简单断点调试

开胃小菜--简单的断点调试 在xcode中打开一个app,在想要break的行号上单击,即可生成一个深色的箭头标识--断点。如下图,在viewDidLoad:中设置了断点。 运行app,等待。。。就可以看到xcode...

理性编程
2016/06/15
9
0

没有更多内容

加载失败,请刷新页面

加载更多

C 语言 二级指针的使用

#include <stdio.h>#include <stdlib.h>typedef struct node Node;struct node {int data;struct node* next;struct node* prev;};Node head;Node* insert(Node......

小张525
16分钟前
2
0
【大数据技术】——Hadoop(1)

什么是大数据 基本概念 《数据处理》 在互联网技术发展到现今阶段,大量日常、工作等事务产生的数据都已经信息化,人类产生的数据量相比以前有了爆炸式的增长,以前的传统的数据处理技术已经...

须臾之余
30分钟前
6
0
比特币从地址逆向计算私钥

区块链 区块链简介 说到比特币,就不得不提区块链。那什么是区块链呢? 区块链本质是一个数据集,只不过数据的组织采用了比较特殊的方式,就是把数据拆分为一块一块的小数据集。 为什么要进行...

trayvon
45分钟前
1
0
TypeScript……真香

写前端或者用 node 写命令行小工具一直采用的 es6 的语法,对于 TypeScript 则是秉持敬而远之的态度,毕竟团队中多推广一门语言所需要花费的精力都是让人望而却步的。所以对于 JavaScript 的...

郁也风
50分钟前
3
0
shell基本案例

1、自定义rm linux系统的rm命令太危险,一不小心就会删除掉系统文件。 写一个shell脚本来替换系统的rm命令,要求当删除一个文件或者目录时,都要做一个备份,然后再删除。下面分两种情况,做...

寰宇01
57分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部