是块元素的例子
display:inline 就是将元素显示为行内元素,元素的特点是:和其他元素都在一行上;高,行高及顶和底边距不可改变;宽度就是它的文字或图片的宽度,不可改变。,,, , , 和 是 inline 元素的例子
2.鼠标手指状显示
全部用标准的写法 cursor: pointer;
10、背景、图片类
1. background显示问题
全部注意补齐 width,height 属性
2.背景透明问题
IE: filter: progid: DXImageTransform.Microsoft.Alpha(style=0,opacity=60);
IE: filter: alpha(opacity=10);
FF: opacity:0.6;
FF: -moz-opacity:0.10;
最好两个都写,并将opacity属性放在下面
11、min-height最小高度的实现(兼容IE6、IE7、FF)
作用是:当容器的内容较少时,能保持一个最小的高度,以免破坏了布局或UI设计效果。而当容器内的内容增加的时候,容器能够自动的伸展以适应内容的变化。
07
height
:
auto
!important
;
12、著名的 Meyer Reset(重置)
01
html, body, div, span, applet, object, iframe,h
1
, h
2
, h
3
, h
4
, h
5
, h
6
,p, blockquote,
pre
,a, abbr,
02
acronym, address, big, cite,
code
,del, dfn, em, font, img, ins, kbd, q, s, samp,
small
, strike,
03
strong,
sub
, sup, tt, var,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table,
caption
, tbody, tfoot, thead, tr, th, td
23
vertical-align
:
baseline
;
51
border-collapse
:
separate
;
65
blockquote:before, blockquote:after,
13、跨浏览器的CSS透明度
05
-ms-filter:
"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"
;
07
filter: alpha(opacity=
70
);
14、文字阴影(CSS3)
1
.text {
text-shadow
:
1px
1px
1px
#666
; filter: Shadow(Color=
#666666
, Direction=
135
, Strength=
5
); }
15、Box阴影(CSS3)
1
.box { box-shadow:
5px
5px
5px
#666
; -moz-box-shadow:
5px
5px
5px
#666
; -webkit-box-shadow:
5px
5px
5px
#666
; }
16、Sticky Footer (让页脚永远停靠在页面底部,而不是根据绝对位置)
03
"main"
class=
"clearfix"
>
11
* {
margin
:
0
;
padding
:
0
; }
13
html, body, #wrap {
height
:
100%
; }
15
body > #wrap {
height
:
auto
;
min-height
:
100%
;}
17
#main {
padding-bottom
:
150px
; }
29
.clearfix:after {
content
:
"."
;
39
.clearfix {
display
: inline-
block
;}
41
* html .clearfix {
height
:
1%
;}
43
.clearfix {
display
:
block
;}
17、iframe元素內嵌頁面如何去掉继承的html及body背景色/背景图片
iframe元素的功能是在一个文档里内嵌一个文档,创建一个浮动的帧。内嵌文档时一个完整的页面,有HTML,BODY等属性。这样遇到了一个问题,如果样式表中对BODY定义过背景色/背景图片,那么内嵌文档将全部继承过来。所以如何去掉背景色和背景图片:
【1】去掉背景色:filter:Chroma(Color=white);
举例:
【2】去掉背景图片:
举例:
注意:内嵌页面同时也要增加BODY属性:
18、为什么web标准中无法设置IE浏览器滚动条颜色了?
原来样式设置:
2
scrollbar-face-
color
:
#f6f6f6
;
3
scrollbar-highlight-
color
:
#fff
;
4
scrollbar-shadow-
color
:
#eeeeee
;
5
scrollbar
-3
dlight-
color
:
#eeeeee
;
6
scrollbar-arrow-
color
:
#000
;
7
scrollbar-track-
color
:
#fff
;
8
scrollbar-darkshadow-
color
:
#fff
; }
解决办法是将body换成html。
19、为什么中火狐浏览器下文本无法撑开容器的高度?
标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢?办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义:
1
div
{ height:auto!important; height:200px; min-height:200px; }
20、如何定义1px左右高度的容器?
IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px
21、怎么样才能让层显示在FLASH之上呢?
解决的办法是给FLASH设置透明:
:
22、怎样使一个div层居中于浏览器中?
09
margin
:
-100px
0
0
-100px
;
23、怎样使div背景透明?
首先,需要这两个层都是兄弟关系,其次,这两个层都需要绝对定位。举个例子:
03
font
:
normal
12px
/
30px
Verdana
; }
53
border
:
1px
solid
#a00
;
55
filter:alpha(opacity=
40
);
这里很多的文字,这里很多的文字,这里很多的文字,这里很多的文字,
24、怎样去掉选中时的虚线框?
利用οnfοcus="this.blur();"例如:测试
25、ie6下png背景显示问题?
针对ie6下png背景显示问题,CSS中可以这样解决:
1
_background
:
none
;_filter:progid
2
:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=
crop
, src=’http://www.
0351
zhuangxiu.com/uploads/images/bj.jpg’);
26、文字与表单对齐方法?
设置表单元素第一字体为Tahoma(Verdana系列也可),并设置vertical-align:middle.建设大家把这个约定写入CSS RESET中,能减小很多麻烦:
1
body,button,input,select,textarea{
font
:
12px
/
1.5
tahoma
,
arial
,
sans-serif
;
vertical-align
:
middle
}
27、optgroup标签的用法?
optgroup标签,鲜为人知,它对提升选择表单用户体验很有帮助。就是可以在有很多选项时,对这些选项分组:例子:
one select
two select
three select
four select
28、文字与图片垂直居中对齐方法?
为图片与文字的共同父元素所有的后代元素定义*{vertical-align:middle};例如:
我要的坚强
只需定义p*{vertical-align:middle}即可使文字与图片同行垂直居中.
29、文章标题列表中日期居右显示的两种方法?
方法A相对方法B省资源,但比方法B要多写两句代码,使用时请视情况而定:
方法A:
这是文章标题2010-10-10
然后定义p和span的样式:
p{ position:relative}
p span{ position:absolute; right:0}
方法B:
2010-10-10 这是文章标题
然后定义span右浮动:
p span{float:right}
30、ie6下max/min-width/height实现?
ie6下max/min-width/height实现,_width: expression_r(this.width >600 ? “600px” : true);,height同理.
31、空白外边距互相叠加的问题?
一般通过添加透明边框或者1px的内边距避免;
其一,为外围元素定义透明边框.具体到本例,即在样式div中加入border:1px solid transparent;
其二,为外围元素定义内边距填充..具体到本例,即在样式div中加入padding:1px;
例如:
空白边距叠加demo@Mr.Think
body{width:300px; font-family:'微软雅黑'; font-size:1em; text-indent:10px; line-height:1.25}
div{background:#a40000;margin:10px}
div p{background:#eee;margin:15px}
32、网页设计中的默认字体
font: 12px/1.5 Tahoma, Helvetica, Arial, sans-serif;
说明:line-height采用1.5, 也就是18px. 这是淘宝视觉规范中定义的行高,对于12px字体,这个行高看起来很舒服。font-family默认采用Tahoma. Tahoma是英文Windows操作系统的默认字体,这个字体比较均衡,显示中英文混排很不错,是经久耐看的一款字体。
33、浏览器兼容——常用的css hack
查看源码打印代码帮助
11
*
height
:
200px
!important
;
16
.title{
height
:
200px
; }
18
*html.title{
height
:
200px
;}
20
*+html.title{
height
:
200px
;}