自从1998年CSS2作为推荐以来,表格的使用渐渐退去,成为历史。正因为此,从那以后CSS布局成为了优雅代码的代名词。
对于所有设计师使用过的CSS概念,负边距作为最少讨论到的定位方式要记上一功。这就像是在线纹身-每个人都会做,但是没有人会谈论它。(It’s like an online taboo—everyone’s doing it, yet no one wants to talk about it.)
负边距的使用如下:
#content {margin-left:-100px;}
负边距通常在小范围使用。但是接下来你会看到,它能做的事情很多。下面是一些你应该知道的关于负边距的事情:
它是相当好的兼容性
负边距基本上被所有现代的浏览器支持(IE6的大部分情况也是)
负边距如果可以正确的使用的话它的功能是很强大的。有两种场景负边距是很重要的。
在static元素中使用负边距:
一个static元素是一个没有使用过float的元素。上面的图片展示了一个static的元素使用负边距之后的情况。
当一个static元素在top/left使用负边距时,它把元素向这个特定的方向拉,比如
/* Moves the element 10px upwards */ #mydiv1 {margin-top:-10px;}
但是当你将负边距设置为相对bottom/right时,它并不会把元素向下或右拉,相反,它会把后面的元素往里面拉,从而覆盖自己。
/* 所有在#mydiv1后面的元素都会向上 移动10px,而#mydiv1一点都不会移动 */ #mydiv1{margin-bottom:-10px;}
如果宽度没有设置,左右负边距会把元素向两个方向拉以增加宽度。在这里margin的作用相当于padding
在浮动中使用负边距:
负边距也是在流式布局中创建简单一列宽度固定,一列内容为宽度的100%的两列布局的好方法。
html代码:
<div id="content"> <p>Main content in here</p> </div> <div id="sidebar"> <p>I’m the Sidebar! </p> </div>
CSS:
#content {width:100%; float:left; margin-right:-200px;} #sidebar {width:200px; float:left;}
这样你就得到了一个简单的两列布局。它也能在IE6完美的渲染出来。现在为了让#sidebar不要被#content给掩盖,只要简单的加上:
/* Prevent text from being overlapped */ #content p {margin-right:210px;} /* It’s 200px + 10px, the 10px being an additional margin.*/
注:本内容来源于网络,如有侵权,请告知!
最新评论
Nignx主要是后台做负载用,没想到你也这么用心
这个评论虽然不能一针见血,但是喜欢这个文章,一直喜欢这个时间管理法。很好
优秀
你对加密的定义很严谨,在平时及网络各种文章中,通常将 base64 称之为“加密”,上面及文章中提到的“加密”同样是这个意思,并非严格意义的加密。严格讲 base64 是一种编码方式。感谢你的回复。
严格意义上来说 base64 不算是加密(Encryption),而是一种编码形式(Encoding)。对于 UTF-8 这种也可以叫它为 Encoding。 加密(Encryption)是指像 R
Base64: 可逆性。 可以将图片等二进制文件转换为文本文件。 可以把非ASCII字符的数据转换成ASCII字符,避免不可见字符。 MD5: 不可逆性。 任意长度的明文字符串,加密后得到的密文字符
第一个问题BASE64的加密方式和MD5的加密方式在这里 哪种 好用?
正则规则的原理可以多说一些