首页 > 代码库 > Css 小技巧总结

Css 小技巧总结

相对偏移 指定left top等属性就能够够完美控制一个元素的位置  

如:

position:relative; left:2px;

 

今天遇到一个很好玩的问题,当两个并排浮动框,当一个框的长度太大时就会把另一个框顶到下一行,这个时候就可以用margin-right:-2px;将右外距设置为负数来解决!

 

css写表达式控制图片大小,当图片大小大于某一数值时,强制设置其宽 高为指定大小。

 img { max-width: 163px; width:expression(this.width > 163 ? "163px":this.width); height:expression(this.width > 163 ? "163px":this.width); }

 

css <li> 横排显示,并指定宽度的方法。当直接用display:inline 的时候,<li>是横排了,但是指定不了<li>的宽度,这样在<li>有背景图片的时候不能够控制背景图片的偏离位置。这时候可以用display:block; float:left; 这样<li>依然是横排显示,而且还能够指定宽度,能够任意控制背景图片的位置了。

<li>的元素如何垂直对齐

 
 
首先设置li的高度 height:25px,如果你不设置line-height的话,他将top对齐,最好的办法是设置line-height的高度与li的高度一致,这样的话,文字在里的对齐方式就是垂直居中对齐的了。因为,文字在line-height的高度范围内是垂直对齐。
 
在切PSD图片的时候,虽然切迟来的是需要透明的,但是在切的过程中,适当将背景显示,能够清楚地看见图片的阴影,半透明的位置,切得才更加精准。
 
css选择器优先级排序
写在前面>写在后面>行内样式>ID选择器>class选择器>dom选择器
 

/* 交集选择器 只对P且class为pp1的元素有效 */
p.pp1{ color:White; }

/* 并集选择器 所有选择到的元素都有效 */
.p1, .span1{ background-color:black; color:White; }

/* 直接后代选择器,用空格分开 这种空格为分隔符只影响所有后代元素 */
p b{ font-weight:700; }
/* 大于号,只影响直接后代元素 */
p>b{ font-weight:700; background-color:Maroon; }

 

一个盒子实际所占有的宽度是由 内容+内边距+外边距+边框组成。   注意border也是要占用宽度的。

 

border none与hidden都不显示边框,二者效果相同,只是运用在表格中时,hidden可以解决冲突问题。

当一个盒子设置了背景图片,背景图片覆盖的范围是padding和内容组成的范围(IE是这样,Firefox是padding + content _ border),并以padding的左上角为基准点平铺图像。

 

块级元素(block)会占一行,不管内容满不满一行。如:<ul li> <div>

行内元素(inline)占用的元素仅仅为内容的长度,当多个元素的内容都不满一行时,会自动显示在同一行。如:<span><a>

 

行内元素之间的水平margin为左边距+右边距(左边元素的margin-left + 右边元素的margin-right)。

块级元素之间的竖直margin为两者的较大者(上面的margin-bottom与下面的margin-top的较大者).

嵌套盒子之间的距离为子元素的margin+父元素的padding

 

附:HTML 块级元素与行内元素 

块元素(block element) HTML标签分类明细 

    * address - 地址 
    * blockquote - 块引用 
    * center - 举中对齐块 
    * dir - 目录列表 
    * div - 常用块级容易,也是css layout的主要标签 
    * dl - 定义列表 
    * fieldset - form控制组 
    * form - 交互表单 (只能用来容纳其它块元素) 
    * h1 - 大标题 
    * h2 - 副标题 
    * h3 - 3级标题 
    * h4 - 4级标题 
    * h5 - 5级标题 
    * h6 - 6级标题 
    * hr - 水平分隔线 
    * isindex - input prompt 
    * menu - 菜单列表 
    * noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容 
    * noscript - 可选脚本内容(对于不支持script的浏览器显示此内容) 
    * ol - 排序表单 
    * p - 段落 
    * pre - 格式化文本 
    * table - 表格 
    * ul - 非排序列表

 

内联元素(inline element) HTML标签分类明细 

    * a - 锚点 
    * abbr - 缩写 
    * acronym - 首字 
    * b - 粗体(不推荐) 
    * bdo - bidi override 
    * big - 大字体 
    * br - 换行 
    * cite - 引用 
    * code - 计算机代码(在引用源码的时候需要) 
    * dfn - 定义字段 
    * em - 强调 
    * font - 字体设定(不推荐) 
    * i - 斜体 
    * img - 图片 
    * input - 输入框 
    * kbd - 定义键盘文本 
    * label - 表格标签 
    * q - 短引用 
    * s - 中划线(不推荐) 
    * samp - 定义范例计算机代码 
    * select - 项目选择 
    * small - 小字体文本 
    * span - 常用内联容器,定义文本内区块 
    * strike - 中划线 
    * strong - 粗体强调 
    * sub - 下标 
    * sup - 上标 
    * textarea - 多行文本输入框 
    * tt - 电传文本 
    * u - 下划线 
    * var - 定义变量

可变元素  HTML标签分类明细 

    * applet - java applet   
    * button - 按钮   
    * del - 删除文本   
    * iframe - inline frame   
    * ins - 插入的文本   
    * map - 图片区块(map)   
    * object - object对象   
    * script - 客户端脚本

 

float:inherit;从父元素中继承float属性;

clear:left/right;消除左/右浮动盒子对本盒子的影响。 clear:both;清除两侧浮动对本盒子的影响。

 

绝对定位position:absolute; 对其他盒子完全没影响,相当于从HTML代码中抽取了出来,会覆盖在其上面。其位置的设定是,当其有定位属性父元素(有position属性,且position属性不为static),以其父属性为定位基准,如果没有则以浏览器为定位基准。当两个块级元素设置为abosolute属性时,可以通过设置z-index属性的值来决定哪一个元素显示i在上面,值大的显示在上面。

 !important 提升优先级,使该条语句不会被后面的语句覆盖。

IE6能识别*,但不能识别 !important, 
IE7能识别*,也能识别!important; 
FF不能识别*,但能识别!important;
另外再补充一个,下划线"_", 
IE6支持下划线,IE7和firefox均不支持下划线。

1em表示其父元素中字母m标准宽度。1ex则表示字母x的标准高度。  注意是跟父元素比。

font-size:4em; line-height:1.5; float:left;   这样的设置,可以使第一个字母,占三行显示。

text-indent:2em;可以设置为首行速进2父元素的大小个字位置。 

verticla-align 垂直对齐方式,一般只是竖直方向上有效。如果文字放在DIV中不会有效果。如果文字只有一行,只要设置line-height与height一样就可以实现居中对齐。

技巧1 背景颜色设置得与渐变背景图片的最下面颜色一样,就可以实现整个页面无论多长都有和谐的效果。

 PNG图片的位越小,文件体积越小。但是8位与24位在IE6中并不支持透明。

通过设置a 的 display:block就可以实现鼠标移入块内就变手形,而不是移动到文字上才行。

为了防止鼠标指针经过时造成边框的跳动,可以再通常状态添加于背景色相同边框,在移动时才变色。