css总结

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css总结相关的知识,希望对你有一定的参考价值。

1.如果利用<img>标签把图片放进表格单元里面,并注意到在图片下方有不需要的空间,那么设置它的display属性为block.

2.text-align可以被继承,vertical-align属性不会被继承

3.html提供<colgroup>和<col>标签相应地表示列组合和独立的列。

表格中的每个列都包括一个<col>标签,可以用类或ID来识别它们。只有两组属性对这些标签起作用:width和background属性。

<colgroup>
    <col id="brand"/>
    <col id="price"/>
    <col id="power"/>
</colgroup>

4.IE6.0兼容支持透明背景

* html .tit2 .ms{ zoom:1; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src="http://hszy00232.blog.163.com/blog/images/jia.png",sizingMethod="scale"); background:none;}

5.浏览器兼容处理半透明效果

dd{width:215px; height:20px;background:#000; filter:alpha(opacity=70); opacity:0.7; }

6.公共样式重置

body,form,img{padding:0px;margin:0px;border:0px;font-size:12px;font-family:"宋体",Arial;}
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:

<a href="http://hszy00232.blog.163.com/blog/###" hidefocus>link</a>

方法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  

这个hack的使用要注意页面是否使用了DTD或XML申明(<?xml version="1.0" encoding="utf-8"?>)
class{

* background-color:#00FF00;
_
}

@media all and(min-width:0){ 
.class{
 
} }

@media all and (min-width:0){ 
.class{
 
html* .class{
 
}
}}

16.处理文字隐藏
font-size:0 // for firefox & opera
color: transparent; // for webkit
line-height:0;
overflow:hidden; // for IE

17.雅黑字体设置

font-family:Microsoft YaHei,calibri,verdana

18.CSS之透明效果

filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5;

19.数字列表样式设置

li{
    list-style-type:decimal;
    list-style-position:inside;
  }
20.当子元素浮动且未知高度时,怎么使父容器适应子元素的高度?
这种情况可在父窗口加上 overflow:auto;zoom:1;这两个样式属性,overflow:auto;是让父容器来自适应内部容器的高度,zoom:1;是为了兼容IE6而使用的CSS HACK。































































以上是关于css总结的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段——CSS选择器

VSCode自定义代码片段——CSS动画

VSCode自定义代码片段7——CSS动画

VSCode自定义代码片段7——CSS动画

VSCode自定义代码片段6——CSS选择器

Emmet语法总结