总结篇-CSS部分（绝对干货，未完待续...）

1.自定义溢出显示...（省略号）

//情景一：单行显示省略号
div{
    width:100px;    //多宽就要显示省略号
    overflow:hidden;    //溢出隐藏
    text-overflow:ellipsis;    //文本溢出模式
    white-space:nowrap;    //单行书写不换行
}

//情景二：多行显示省略号

div{
    height:60px;    //必要的，否则不知多高显示
    overflow:hidden;
    display:box;
    display:-webkit-box;
    line-clamp:3;	//总计需要显示的行数，与height密切相关
    -webkit-line-clamp:3;
    box-orient:vertical;
    -webkit-box-orient:vertical;
}

 

2.瀑布流的实现

方式一：传统多列浮动：固定屏幕中展示的列数，每一列中间的数据作为一组单独计算，插入数据时分别插入不同列中；

方式二：css3中样式定义：

父级容器设定：
    column-count     //把div中的文本分为多少列
    column-width     //规定列宽
    column-gap       //规定列间隙

子级容器设定
    break-inside: avoid;     //避免元素内部断行并产生新列

示例如下：
    div.farther{
        column-count: 1;
        column- width: 20px;
        column-gap:20px;

	    -webkit-column-count: 1;
        -moz-column-count: 1; 
        -webkit-column- width: 20px;
        -moz-column- width: 20px; 
        -webkit-column-gap:20px; 
        -moz-column-gap:20px; 
    }
    div.children{
        break-inside: avoid;
	    -moz-page-break-inside: avoid; 
        -webkit-column-break-inside: avoid; 
    }

方式三：js脚本执行：动态计算元素的插入位置，利用绝对布局absolute进行定位，根据屏幕的不同可以动态调整；

3.table>tr>td垂直对其方式

//方式一：
    <td valign=’top’>…</td>
    //top(上对齐)/bottom(下对齐)/middle(默认)/baseline(基线对齐)

//方式二：
    <td style=’vertical-align:top’>…</td>
    //top(上对齐)/bottom(下对齐)/middle(默认)/baseline(基线对齐)

4.实现小三角的方式

span{
    width:0;
    height:0;
    overflow:hidden;
    font-size: 0;     
    line-height: 0;
    border-width:15px;
    
    //通过调整这俩来取上下左右的三角
    border-style:dashed dashed solid dashed;		
    border-color:transparent transparent #1D93E5 transparent;
}

5.修改浏览器滚动条样式(IE浏览器不适用)

//滚动条整体样式
::-webkit-scrollbar {
    width: 10px;     //高宽分别对应横竖滚动条的尺寸
    height: 1px;
}

//滚动条里面小方块
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: #535353;
}

//滚动条里面轨道
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 10px;
    background: #EDEDED;
}

6.input中search的默认外框和关闭去除

input[type="search"]{-webkit-appearance:none;}    //外框
input::-webkit-search-cancel-button {display: none;}    //清空小叉叉

7.外边距折叠标准

概念：
    毗邻的两个或多个 margin 会合并成一个margin，叫做外边距折叠。
规则：
    两个或多个毗邻的普通流中的块元素垂直方向上的margin会折叠
    浮动元素或inline-block元素或绝对定位元素的margin不会和垂直方向上的其他元素的margin折叠
    创建了块级格式化上下文的元素，不会和它的子元素发生margin折叠
    元素自身的margin-bottom和margin-top相邻时也会折

8.CSS3新增伪类有那些

p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
p:last-of-type  选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
p:only-of-type  选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
p:only-child        选择属于其父元素的唯一子元素的每个 <p> 元素。
p:nth-child(2)  选择属于其父元素的第二个子元素的每个 <p> 元素。

:after          在元素之前添加内容,也可以用来做清除浮动。
:before         在元素之后添加内容
:enabled        
:disabled       控制表单控件的禁用状态。
:checked        单选框或复选框被选中

9.CSS3有哪些新特性

新增各种CSS选择器 （: not(.input)：所有 class 不是“input”的节点）
圆角 （border-radius:8px）
多列布局 （multi-column layout）
阴影和反射 （ShadowReflect）
文字特效 （text-shadow、）
文字渲染 （Text-decoration）
线性渐变 （gradient）
旋转 （transform）
增加了旋转,缩放,定位,倾斜,动画，多背景
transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:

10.CSS3新增伪类有哪些

:root 选择文档的根元素，等同于 html 元素
:empty 选择没有子元素的元素
:target 选取当前活动的目标元素
:not(selector) 选择除 selector 元素意外的元素
:enabled 选择可用的表单元素
:disabled 选择禁用的表单元素
:checked 选择被选中的表单元素
:after 在元素内部最前添加内容
:before 在元素内部最后添加内容
:nth-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n
:nth-last-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n，从后向前数
:nth-child(odd)
:nth-child(even)
:nth-child(3n+1)
:first-child
:last-child
:only-child
:nth-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第n
:nth-last-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第n，从后向前数
:nth-of-type(odd)
:nth-of-type(even)
:nth-of-type(3n+1)
:first-of-type
:last-of-type
:only-of-type
::selection 选择被用户选取的元素部分
:first-line 选择元素中的第一行
:first-letter 选择元素中的第一个字符