css高级应用及问题记录（持续更新）

css 参考手册：

1、http://css.doyoe.com/

1、混合选择器样式定义：

.button.icon:before {
    content: "";
    position: relative;
    top: 1px;
    float:left;
    width: 12px;
    height: 12px;
    margin: 0 0.75em 0 -0.25em;
    background: url(gh-icons.png) 0 -288px no-repeat;
}

这个样式定义的意思：

含有“.button”和“.icon”class属性的元素前加入一个伪类 （.button.icon:before 可以这样理解：第一个class选出了含有“.button”的元素，第二个class又选出了且含有“.icon”的元素）

如：<button class="button icon"> 提交 </button>

效果：

以上纯是自己理解，没有找到相关参考资料，如有不妥处，请指正！

jquery的选择器附属说明：

id选择器，如果id包含“.”（如： id="button.displayarea"）直接使用id选择器(如：$("#button.displayarea") )是无法选中的，

因为该选择器已经被解释为：选择id为“button”且class为“displayarea”的元素；

正确写法：$("#button\.displayarea")，即“.”需要转移。

 2、css文件定义，样式覆盖问题:

在css文件中这样定义时，无法起到很好的覆盖作用：

/* 所有button通用样式*/

.app_operations button{
 border: 0px solid #dcdcdc;
 padding: 0px;
 background: url(img/button.gif) no-repeat;

}

/* button的个性化样式 */

.app_btn_more {
 width: 38px;
 height: 16px;
 margin-right: -15px;
 background: url(img/more.gif) no-repeat;
}

以下方式定义才能起到很好的覆盖作用：

.app_operations  button{

... ...

}

/* button的个性化样式 */

.app_operations  .app_btn_more {

... ...

}

3、span  a 等这些行级元素宽高设置：

这些行级元素（相反的是块级元素：div...），有时设置宽高无效；

处理方法：display：inline-block;（不设置为block，还是想保留行级元素效果），因为块级元素才有宽高设置（鄙人是这么理解的）

4、块级元素变内联元素问题

（主要场景：文字前加操作图标）

遇到div设置display：inline-block，ie8以下版本显示异常，仍换行显示；设置display：inline，ie8以上又不能显示，头大；

后来无奈改用内联元素设置display：inline-block。

5、css样式写在jsp（或php等）

如“import-csshead.jsp”中：

//**设置字体颜色

body{

color：<%=request.getAttribute("color")%>；
 }

如此可以从后台中来设置样式，亦可以扩展成配合界面来动态配置样式（或主题）

6、css中引用变量

 8、css定义的样式和style样式

我们都知道style样式是最高级别的，有时候一些顽疾可以通过style强行控制，但是在项目中突然遇到一个奇葩问题：页面嵌套，style样式有时候会失效（比如使用load方式--我用的是加载html片段方式，我的理解是：load和主页面有时间差，主页面已经加载完成了，load未必已经加载完成，导致load的部分未能渲染）；

但如果我们该用class方式时，样式有能回归正常（我猜想，莫非class是动态渲染？原理希望有大神能告知我）

实例：

// ****************************************************************************

<table>
 <tr>
  <td style="width: 150px;">标题</td>
  <td> <input value="12345678"/> </td>
 </tr>
</table>

这个代码片段被加载后样式不生效；

// ****************************************************************************

<table>
 <tr>
  <td class="td_left">标题</td>
  <td> <input value="12345678"/> </td>
 </tr>
</table>

<style>
 .td_left{
  width: 170px;
  min-width: 150px;
  text-align: right;
 }
</style>

这种方法的代码片段被加载后生效。

// ****************************************************************************

9、css之style中调皮的‘px’

（a）：<div style="width:200px;height:;">123</div>

这段代码在ie浏览器中，你将无法看到该元素，chrome和firefox等正常；

（b）：<div style="width:200px;height:423px;">123</div>

加上‘px’后，在ie浏览器中能正常显示；

总结： TNND，ie能不能愉快玩耍了。

10、table样式精简整理

1、粗简版

<style>
   .app_style {
    color: #666666;
    font-size: 12px;
    text-align: center;
    font-family: Microsoft YaHei,Verdana, Arial, Helvetica, sans-serif;
    border-collapse:collapse;
   }
   .app_style td {
    min-height: 30px;
    padding-left: 5px;
    vertical-align: middle;
    border: 0px dotted silver;
    border-bottom-width: 1px;
   }
   .app_style .table-td-left{
    width: 150px;
    max-width: 150px;
    padding-right: 10px;
    font-weight: 700;
    text-align: right;
   }
   .app_style .table-td-right{
    padding-left: 5px;
    text-align: left;
   }
  </style>
  <table class="app_style" style="width: 400px;">
    <tr>
     <td class="table-td-left">小标题：</td>
     <td class="table-td-right">二月春光初乍现</td>
    </tr>
    <tr>
     <td class="table-td-left">基本描述：</td>
     <td class="table-td-right">龙女八戒共缠绵</td>
    </tr>
    <tr>
     <td class="table-td-left">忧伤的感慨：</td>
     <td class="table-td-right">天理何在</td>
    </tr>
  </table>

2、js精炼版

<!-- Javascript goes in the document HEAD -->

<script type="text/javascript">

function altRows(id){

if(document.getElementsByTagName){

var table = document.getElementById(id);

var rows = table.getElementsByTagName("tr");

for(i = 0; i < rows.length; i++){

if(i % 2 == 0){

    rows[i].className = "evenrowcolor";

  }else{

    rows[i].className = "oddrowcolor";

   }

}

}

}

window.onload=function(){

altRows('alternatecolor');

}

</script>

<!-- CSS goes in the document HEAD or added to your external stylesheet -->

<style type="text/css">

table.altrowstable {

font-family: verdana,arial,sans-serif;

font-size:11px;

color:#333333;

border-width: 1px;

border-style: solid;

border-color: #a9c6c9;

border-collapse: collapse;

}

table.altrowstable th {

border-width: 1px;

padding: 8px;

border-style: dotted;

border-color: #a9c6c9;

}

table.altrowstable td {

border-width: 1px;

padding: 8px;

border-style: dotted;

border-color: #a9c6c9;

}

.oddrowcolor{

background-color:#d4e3e5;

}

.evenrowcolor{

background-color:#c3dde0;

}

</style>

<!-- Table goes in the document BODY -->

<table class="altrowstable" id="alternatecolor">

<tr>  <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th> </tr>

<tr>  <td>Text 1A</td><td>Text 1B</td><td>Text 1C</td> </tr>

<tr>  <td>Text 2A</td><td>Text 2B</td><td>Text 2C</td> </tr>

<tr>  <td>Text 3A</td><td>Text 3B</td><td>Text 3C</td> </tr>

<tr>  <td>Text 4A</td><td>Text 4B</td><td>Text 4C</td> </tr>

<tr>  <td>Text 5A</td><td>Text 5B</td><td>Text 5C</td> </tr>

</table>

<!--  The table code can be found here: http://www.textfixer/resources/css-tables.php#css-table03 -->

11、文字两端对齐

12、多个表格，列数相同时对齐

最理想的处理方式，宽度都设置成百分比，算法实现：