Css+DIV总结2012-2.docVIP

#example {? width: 100px !important; /* IE7+FF */? width: 200px; /* IE6 */? }? 所有浏览器 通用 height: 100px;? IE6 专用 _height: 100px;? IE7 专用 *+height: 100px;? IE6、IE7 共用 *height: 100px;? IE7、FF 共用 height: 100px !important〈!--其他浏览器 --〉? 〈link rel=stylesheet type=text/css href=css.css /〉? 〈!--[if IE 7]〉? 〈!-- 适合于IE7 --〉? 〈link rel=stylesheet type=text/css href=ie7.css /〉? 〈![endif]--〉? 〈!--[if lte IE 6]〉? 〈!-- 适合于IE6及以下 --〉? 〈link rel=stylesheet type=text/css href=ie.css /〉? 〈![endif]--〉? 5, 浮动IE6产生的双倍距离? #box{ float:left;? width:100px;? margin:0 0 0 100px;? }? 这种情况之下IE6会产生200px的距离? 解决办法：加上display:inline，使浮动忽略? 这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,…不可控制(内嵌元素);? #box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果 4、overflow:auto（刚看到的，极力推荐）? 只要在父DIV的CSS中加上overflow:auto就搞定。? 举例：? .parent{width:100px;overflow:auto}? .son1{float:left;width:20px;}? .son2{float:left;width:80px;}? style type=text/css !-- @import url(1.css); -- /style 导入样式法 title全局声明/title style type=text/css !-- *{ /* 全局声明 */ color: purple; /* 文字颜色 */ font-size:15px; /* 字体大小 */ } h2.special, .special, #one{ /* 集体声明 */ text-decoration:underline; /* 下划线 */ } -- /style titleCSS选择器的嵌套声明/title style type=text/css !-- p b{ /* 嵌套声明 */ color:maroon; /* 颜色 */ text-decoration:underline; /* 下划线 */ } -- /style /head body p嵌套使b用CSS/b标记的方法/p 嵌套之外的b标记/b不生效 /body /html font-family:黑体, 幼圆; h2{ color:rgb(0%,0%,80%); } style !-- p.inch{ font-size: 0.5in; } p.cm{ font-size: 0.5cm; } p.mm{ font-size: 4mm; } p.pt{ font-size: 12pt; } p.pc{ font-size: 2pc; } -- /style /head body p class=inch文字大小，0.5in/p p class=cm文字大小，0.5cm/p p class=mm文字大小，4mm/p p class=pt文字大小，12pt/p p class=pc文字大小，2pc/p /body span.ten{ font-weight:bold; } 粗体 span.eleven{ font-weight:normal; } 常规字体 p.one{ text-decoration:underline; } /* 下划线 */ p.two{ text-decoration:overline; } /* 顶划线 */ p.three{ text-decoration:line-th