css小知识

7.

span {
    display:inline-block;
    width:70px;
　　 /* 超出长度以...显示 */
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;  
    vertical-align: middle;
}

　　

 

1.table

和并列：colspan=“2”

合并行：rowspan="3"

border-collapse 属性设置是否将表格边框折叠为单一边框：

table
  {
  border-collapse:collapse;
  }

 border-spacing 属性设置相邻单元格的边框间的距离（仅用于“边框分离”模式）。

table
  {
  border-collapse:separate;
  border-spacing:10px 50px;
  }

 2.选择器

1）选择器

$(".pull-right.pagination").css("float","none").css("text-align","center");

2）后代选择器，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（combinator）。每个空格结合符可以解释为“... 在 ... 找到”、“... 作为 ... 的一部分”、“... 作为 ... 的后代”。

h1 em {color:red;}

$(".pull-right .pagination").css("float","none").css("text-align","center");

3）子选择器

某个元素的子元素

h1 > strong {color:red;}

4）兄弟选择器

选择紧接在另一个元素后的元素，而且二者有相同的父元素

h1 + p {margin-top:50px;}

 

3.属性声明

相关的属性声明应当归为一组，并按照下面的顺序排列：

1. Positioning

2. Box model

3. Typographic   //排版

4. Visual  //视觉

由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（box model）相关的样式，因此排在首位。盒模型排在第二位，因为它决定了组件的尺寸和位置。

4.z-index

根据规范，z-index是应用到定位元素的，也就是position属性不为relative的元素，否则，设置z-index是没有意义的；
z-index的作用有两点，一是设置在当前堆叠上下文(stacking context)中的层级；二是创建一个新的堆叠上下文；
z-index并不是设置的值越高，就会越靠近用户，还和堆叠上下文有关系；

在不同堆叠上下文中的元素，如果堆叠上下文一距离用户更近，那么它的所有子元素都在另一个堆叠上下文子元素的前面，也就是离用户更近，不同堆叠上下文中的子元素不可能发生交叉。

5.class命名

类名的第一个字符不能使用数字

6." "表示一个空格字符

innerHTML_+="<td><tr>"+row.name+"：&nbsp;"+"</tr>"+row.value+"</td><br>";