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

css小知识的更多相关文章

  1. 【前端词典】几个有益的 CSS 小知识

    今天偷个懒,不长篇大论,分享几个你可能不知道的 CSS 小知识. 样式的顺序 CSS 代码:   HTML 代码:   记得之前这是一道比较火的 CSS 考题,当时好像是有不少的人答错(30% 以上) ...

  2. 几个有益的 CSS 小知识

    样式的顺序 CSS 代码:   HTML 代码:   记得之前这是一道比较火的 CSS 考题,当时好像是有不少的人答错(30% 以上) 答案你们应该是知道的. 可以这样提升 CSS 性能 后代选择器 ...

  3. 12个你未必知道的CSS小知识

    虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过. 1.CSS的color属性并非只能用于文本显示 对于CSS ...

  4. 一些常被你忽略的CSS小知识

    1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员都使用过.如果你并不是一个特别有经 验的程序员,我相信你未必知道color属性除了能用在文本显示,还可 ...

  5. HTML、CSS小知识--兼容IE的下拉选择框select

    HTML <div class="s_h_ie"> <select id="Select1" disabled="disabled& ...

  6. 你未必知道的css小知识

    1:当按百分比设定一个元素的宽度时,它是相对于父容器的宽度计算的,但是,对于一些表示竖向距离的属性,例如padding-top,padding-bottom,margin-top,margin-bot ...

  7. css 小知识

    <!-- IE下消除点击图片文字后出现的虚线框代码 --> <style type="text/css">a {blr:expression(this.on ...

  8. css小知识 2

    效果为 为什么还出现出现不同的效果? 浏览器在解析第二个p的时候,因为第二个字母见没有空格,它会认为这是一个单词没有写完,所以不会换行 列表 1.无序列表ul 第二,内部必须有子代标签<li&g ...

  9. CSS小知识---table表格

    所用的仍是bootstrap的模板 <link rel="stylesheet" href="css/bootstrap.min.css"> < ...

随机推荐

  1. 第55节:Java当中的IO流-时间api(下)-上

    Java当中的IO流(下)-上 日期和时间 日期类:java.util.Date 系统时间: long time = System.currentTimeMillis(); public class ...

  2. Redis 指令 学习笔记

    Redis 什么是Redis redis是一种nosql数据库,他的数据是保存在内存中,同时redis可以定时把内存数据同步到磁盘,即可以将数据持久化,还提供了多个语言的API,操作比较方便 安装re ...

  3. 彻底填平Static坑(细节决定成败)

    static 学习的过程就是填坑的过程,可不要偷懒想着跳过去,你现在跳过去,就相当于给自己挖了一个坑,你迟早会掉进去的,为了避免不掉坑,所以,努力填坑吧! 一.如果没有static会怎样? 需求: 1 ...

  4. Anaconda / Conda 实践

    一.环境 CentOS 7.6 有预装 python 2.7 二.Anaconda 与 Conda 区别 1.Anaconda Anaconda 是Python的一种发行版.包含了: (1)conda ...

  5. 机器学习入门06 - 训练集和测试集 (Training and Test Sets)

    原文链接:https://developers.google.com/machine-learning/crash-course/training-and-test-sets 测试集是用于评估根据训练 ...

  6. 【shiro】(5)---基于Shiro的权限管理

    基于Shiro的权限管理项目搭建 前面写了四篇有关权限的文章,算是这篇文章的铺垫了.这篇文章采用 开发环境           JDK1.8          Eclipse          Mav ...

  7. MaskRCNN-Keypoints

    这个月先写一篇吧,后面要复习数学考试了,可能到时候就忘了.今天写一个比较有意思的东西,关于人体的分割与姿态估计.如下图所示: 图片选自mask rcnn的论文,这里由于时间的关系,就不多叙述技术细节了 ...

  8. Ajax 上传input type file 文件

    Html: <div class="attach-img"> <label><input type="file" id=" ...

  9. Hibernate学习(六)———— cascade(级联)和inverse关系详解

    序言 写这篇文章之前,自己也查了很多的资料来搞清楚这两者的关系和各自所做的事情,但是百度一搜,大多数博文感觉说的云里雾里,可能博主自己清楚是怎么一回事,但是给一个不懂的人或者一知半解的人看的话,别人也 ...

  10. [JavaScript] promise概述

    promise promise 是 es6 提出的一个异步解决方案,比传统回调事件的写法更加合理更加强大,主要还是优雅 promise 有 pending(等待中),fulfilled(已成功),re ...