1. z-index：

img{ position:absolute; left:0px; top:0px; z-index:-1;}

所有主流浏览器都支持 z-index 属性。

注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注释：元素可拥有负的 z-index 属性值。Z-index 仅能在定位元素上奏效（例如 position:absolute;）。

说明：该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。

可能的值：

值 描述
auto 默认。堆叠顺序与父元素相等。
number 设置元素的堆叠顺序。
inherit 规定应该从父元素继承 z-index 属性的值。

2.back-round:

background-color   规定要使用的背景颜色。
background-position background-position:center; 规定背景图像的位置。
background-size background-size:80px 60px; 规定背景图片的尺寸。
background-repeat   规定如何重复背景图像。
background-origin background-origin:content-box; 规定背景图片的定位区域。
background-clip background-clip:content-box; 规定背景的绘制区域。
background-attachment background-attachment:scroll/fixed/inherit; 规定背景图像是否固定或者随着页面的其余部分滚动。
background-image background-image: url(bgimage.gif); 规定要使用的背景图像。
inherit   规定应该从父元素继承 background 属性的设置。

背景图片居中：

BODY {background-image: URL(图片名称.gif);
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;}
3. IE中使用table时<tr>间有空白
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="LicenceOK" runat="server">

        <tr>

            <td>

                <img name="index_r1_c1" src="data:images/NewImages/Login/sc_header.jpg" width="100%"

                    height="212" border="0" id="index_r1_c1" alt="" style="display: block;" />

            </td>

        </tr>

        <tr>

            <td>

                <img name="index_r1_c1" src="data:images/NewImages/Login/sc_header.jpg" width="100%"

                    height="212" border="0" id="index_r1_c1" alt="" style="display: block;" />

            </td>

        </tr>

首先，必须用Table的话，加style="display: block;"即可解决；其次，可以换用div布局。

4. 完美解决对span的宽高或margin或padding设置，兼容个浏览器

CSS中添加：display:-moz-inline-box;  display:inline-block;

5. 去掉<ul><li>前的默认样式（小黑点）

CSS中添加：list-style:none;

6. 让<div>中的<table>居中

有时候在Div中加上 <div  style="text-align:center"></div>里面的Table是不会居中的我们可以在Table中加上 margin:auto：

7. 图片和文字对齐，及兼容模式下Img错乱（加float属性）

<div style=" width:320px; height:20px;">
       <img src="../images/Default/erji/jia.png" alt="" style=" float:left;"/>
       <span class="height:20px; color:Green; line-height:20px; display:inline-block; float:left; margin-left:5px;">基本信息</span>
</div>

8. 鼠标指上显示小手样式，使用cursor:pointer或者cursor:hand

<span onclick="onEdit(' rowdata.UserID ')" style="color:Green; cursor:pointer; line-height:20px;">修改密码</span>

9. html,body{margin:0; padding;0;} 网页顶端仍有空白

CSS中添加 * {margin:0px; padding:0px;}

10. 圆角设置（上右下左）（兼容个浏览器）

border: 2px solid #C0C0C0;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

border-radius: 10px;

position:relative;

z-index:2;

behavior: url(此处为ie-css3.htc文件的绝对路径);

Webkit内核的浏览器支持“-webkit-border-radius: 10px;” 属性，可以直接解析出圆角；

Firefox浏览器支持“-moz-border-radius:  10px;”属性，也可以直接解析出圆角；

IE系浏览器则需要加上“border-radius: 15px;”的属性。

注意：

1、behavior的url里一定要填写ie-css3.htc的绝对路径，因为 IE浏览器找该文件是相对当前页面路径来找的，所以对于Wordpress等动态程序生成的页面一定要填写绝对路径。（ie-css3.htc文件是IE内核支持Web行为后用来描述此类行为的脚本文件。它们定义了一套方法和属性，程序员几乎可以把这些方法和属性应用到HTML页面上的任何元素上去。Web 行为是非常伟大的因为它们允许程序员把自定义的功能“连接”到现有的元素和控件，而不是必须让用户下载二进制文件（例如ActiveX 控件）来完成这个功能。）

2、一定要有定位属性：position:relative;

3、因为在IE浏览器下这些CSS3效果的实现是要借助于VML，由VML绘制圆角或是投影效果，所以还需要一个z-index属性。z-index属性最好设置得比较大，如2。

4、如果在IE浏览器下某些模块无法用此渲染，可以试着绝对定位相应的层，即加上“ width: 400px;  height:400px;”属性。

5、radius属性的10px是圆角半径，还可以给两个值如“border-radius: 10px  5px;”，为“上  右  下  左”。

11.当在一个容器里设置" font:10pt 微软雅黑; "样式时，对这个容器设置的line-height数值会失效。
解决方法两种：(1)增加父元素，在父元素设置font样式，内容元素（子元素）设置line-height；(2)增加子元素包含设置line-height的内容，父元素设置font样式；

12.iframe背景色为父DIV的背景色

　　只要在子页面的<body>设置样式如下：

<body style="background:transparent;">

CSS 杂记的更多相关文章

  1. 【CSS 杂记】

    1.CSS达到截取效果 地方卡机了会计师的立法及  =>  地方卡机了... max-width: 400px; overflow: hidden; white-space: nowrap; t ...

  2. html、css杂记

    1:浮动 <div style="float: left"> 2:清除浮动,把父div撑起来 <div style="clear:both"& ...

  3. css杂记

    1,font-variant: 设置文本是否为小型的大写字母,值可以为normal,small-caps; 2,a:link: 未访问过的 a:visited: 访问过的 a:active: 活动的链 ...

  4. html+css杂记

    overflow可设置超出后隐藏 子元素撑开父级元素:①父级元素宽度不固定,②父级元素设置为inline-block或者添加float: html中的中文在浏览器打开为乱码(已经写了<meta ...

  5. 前端css杂记

    1em等于16px,页面默认是16px,一个字宽高都等于16px; 当行内元素display:inline的元素设置float:left浮动后,display值也被设置成block;总结:无论行内元素 ...

  6. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  7. css+js杂记

    css的盒子模型分:ie盒子模型和标准盒子模型 区别: 2.选择器 .id选择器(# myid) .类选择器(.myclassname) .标签选择器(div, h1, p) .相邻选择器(h1 + ...

  8. css学习杂记

    1.css中的&语法 &是sass的语法,代表上一级选择器. 例如: .el-row { margin-bottom: 20px; &:last-child { margin- ...

  9. Java Web开发——HTML CSS JavaScript 杂记

    HTML是一种在互联网上常见的网页制作标注性语言,并不能算作一种程序设计语言.因为它相对程序设计语言来说缺少了其应所有的特征.对于网站设计人员来说,只使用HTML是不够的,需要在页面中引入CSS样式. ...

随机推荐

  1. bzoj 3668 数位DP

    收获: 1.如果有很多位操作,并且不包含+-×/等高级运算,那么可以一位一位考虑,如果求一个最优解,可以尝试逐位确定,这道题因为原始攻击值有范围,那么就需要数位DP. /*************** ...

  2. Python编码规则

    1. 命名规则 1.1 变量名.包名.模块名 变量名通常有字母.数字和下划线组成,且首字母必须是字母或下划线,并且不能使用python的保留字:包名.模块名通常用小写字母 1.2 类名.对象名 类名首 ...

  3. python开发_tkinter_单选按钮

    这篇blog主要是描述python中tkinter的单选按钮操作 下面是我做的demo 运行效果: ====================================== 代码部分: ===== ...

  4. poj 3630 Phone List 贪心

    Phone List Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 23722   Accepted: 7289 Descr ...

  5. git服务器安装和配置

    http://www.cnblogs.com/dee0912/p/5815267.html

  6. PHP-输入变量

    在Web开发过程中,我们经常需要获取系统变量或者用户提交的数据,这些变量数据错综复杂,而且一不小心就容易引起安全隐患,但是如果利用好ThinkPHP提供的变量获取功能,就可以轻松的获取和驾驭变量了. ...

  7. ThinkPHP 数据库操作之数据表模型和基础模型 ( Model )

    一.定义数据表模型 1.模型映射 要测试数据库是否正常连接,最直接的办法就是在当前控制器中实例化数据表,然后使用 dump 函数输出,查看数据库的链接状态.代码: public function te ...

  8. MsDepSvc 启动失败

    MsDepSvc 使用80端口,用于 Microsoft Web Deploy 3.6 的远程代理服务. 如果80端口被占用,则启动失败.我的是被phpstudy软件占用,所以启动失败.

  9. jsp中简易版本的图片上传程序

    1.下载相应的组件的最新版本 Commons FileUpload 可以在http://jakarta.apache.org/commons/fileupload/下载 附加的Commons IO   ...

  10. iptables配置实践

    前言 在大企业中防火墙角色主要交给硬件来支持,效果自然没话说只是需要增加一点点成本,但对于大多数个人或者互联网公司来说选择系统自带的iptables或者第三方云防火墙似乎是更加合适的选择,通过一些合理 ...