css小知识

时间:2022-08-27 15:49:08

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>";