css总结
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css总结相关的知识，希望对你有一定的参考价值。
1.如果利用<img>标签把图片放进表格单元里面，并注意到在图片下方有不需要的空间，那么设置它的display属性为block.
2.text-align可以被继承，vertical-align属性不会被继承
3.html提供<colgroup>和<col>标签相应地表示列组合和独立的列。
表格中的每个列都包括一个<col>标签，可以用类或ID来识别它们。只有两组属性对这些标签起作用：width和background属性。
<col id="brand"/>
<col id="price"/>
<col id="power"/>
</colgroup>
4.IE6.0兼容支持透明背景
5.浏览器兼容处理半透明效果
6.公共样式重置
body{background:#0071B5;}
dl,dd,dt,ul,ol,li,h1,h2,h3,h4,h5,h6{list-style-position:outside;list-style-type:none;margin:0px;padding:0px;border:0px;}
input[type=radio],input[type=checkbox] {cursor:pointer;}
.clear{clear:both;font-size:0px;visibility:hidden;width:0px;line-height:0px}
.jd,.jd dd,.jd dt,.jd li{overflow:hidden;white-space:nowrap;}
i,p{display:block; font-style:normal; font-weight:normal; text-decoration:none;margin:0;padding:0;}
li,dt,dd{white-space:normal;}
td,p,li,input,select,div,span {font-size:12px;page-break-after:auto;}
table,td,img,div,span,form,input{border: none;margin: 0 0 0 0;padding: 0 0 0 0;}
div{margin:0px auto;}
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {display: inline-table;}
* html .clearfix {height: 1%;} .clearfix {display: block;}
*+html .clearfix{height: 1%;} .clearfix {display: block;}
7.IE6.0图片下产生空隙
解决这个BUG的方法也有很多，可以是改变html的排版，或者定义img 为display:block
或者定义vertical-align属性值为vertical-align:top | bottom |middle |text-bottom
还可以设置父容器的字体大小为零，font-size:0;
8.<meta http-equiv="X-UA-Compatible" content="IE=7" />的意思
X-UA-Compatible是针对ie8新加的一个设置，对于ie8之外的浏览器是不识别的，这个区别与content="IE=7"在无论页面是否包含<!DOCTYPE>指令，都像是使用了 Windows Internet Explorer 7的标准模式。而content="IE=EmulateIE7"模式遵循<!DOCTYPE>指令。对于多数网站来说，它是首选的兼容性模式。目前IE8尚在测试版中，所以为了避免制作出的页面在IE8下面出现错误，建议直接将IE8使用IE7进行渲染。也就是直接在页面的header的meta标签中加入如下代码：
<meta http-equiv="X-UA-Compatible" content="IE=7" />
这样我们才能使得页面在IE8里面表现正常！
9.使用position:relative;
设置一个标签的position:relative;可以解决很多问题，特别是曾经有过看不见的经历或者奇怪布局的框架，当然你要小心，绝对位置放置的子元素是否都参照找到新位置。
10.为浮动元素使用display:inline;
浮动元素会有一个著名的IE6.0双边距。假如你设置了左边距5px但实际上是10px左边距，display:inline可以解决这个问题，尽管它不是必需的，但是css仍然有效。
11.修复重复字符的bug
复杂的布局会触发一个bug:浮动对象的最后字符会出现在已经清除浮动的元素后面。这里有几种解决方法:a.确保几种元素都使用display:inline;b.最后一个浮动元素使用margin-right:-3px;c.在浮动对象最后一个元素后使用一个条件注释，例如这里输入注释...<![endif]>;d.在容器内的最后使用一个div空标签（它也必须设置90%宽度甚至更小）
12.去掉网页链接上点击时的虚线
方法1：在<a>标签中加入onFocus="this.blur()"语句：
<a href="http://hszy00232.blog.163.com/blog/#" onFocus="this.blur()">try</a>
方法2：在<a>标签中加入hidefocus：
方法3：如果连接太多，可以用外部链接 .HTC 文件。
如，blur.htc 文件内容如下：
<public:attach event="onfocus" onevent="makeblur()"/>
<script language="javascript">
function makeblur(){
this.blur();
}
</script>
在 CSS 中加入如下代码：
A { behavior:url(blur.htc); }
方法4：使用CSS样式，可加入代码：
a {blr:expression_r(this.onFocus=this.blur())}
这样，站内所有的文章都实现了无虚线效果了。
13:zoom:1的作用
在兼容IE6、IE7、IE8浏览器，经常会遇到一些问题，可以使用zoom:1来解决，有如下作用：触发IE浏览器的haslayout;解决ie下的浮动，margin重叠等一些问题。
14:深入理解display:inline-block;
display:inline-block;将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。
支持的浏览器有：Opera、Safari,FF3.0+。
在IE中对内联元素使用 display:inline-block，IE 是不识别的，但使用 display:inline-block 在 IE 下会触发 layout,而它本就是行布局，所以触发后，块元素依然还是行布局，从而使内联元素拥有了display:inline-block 属性的表症,而不会如 Opera 中块元素呈递为内联对象。
IE下块元素如何实现 display:inline-block 的效果：
方法1：先使用 display:inline-block 属性触发块元素，然后再定义 display:inline，让块元素呈递为内联对象（两个display 要先后放在两个 CSS 声明中才有效果，这是 IE 的一个经典 bug ，如果先定义了 display:inline-block，然后再将 display 设回 inline 或 block，layout 不会消失）。
div {display:inline-block;...}
div {display:inline;}
方法2：直接让块元素设置为内联对象呈递（设置属性 display:inline），然后触发块元素的 layout（如：zoom:1 等）。
div {display:inline; zoom:1;...}
15.css浏览器兼容总结
CSS hack:区分IE6，IE7，IE8，IE9，firefox
class{
* background-color:#00FF00;
_
}
@media all and(min-width:0){
.class{
} }
@media all and (min-width:0){
.class{
html* .class{
}
}}
16.处理文字隐藏
color: transparent; // for webkit
line-height:0;
overflow:hidden; // for IE
17.雅黑字体设置
18.CSS之透明效果
19.数字列表样式设置
list-style-type:decimal;
list-style-position:inside;
}
以上是关于css总结的主要内容，如果未能解决你的问题，请参考以下文章