日常学习的记录

1.table里td强制不换行

 table td{
word-break: keep-all;
white-space: nowrap;
}

2.数字信息加逗号

方法一：

   <td>{.......|number:'1.0-2'}}</td>

方法二：

String(123456789).replace(/(\d)(?=(\d{3})+$)/g, "$1,");

方法三：

(123456789).toLocaleString('en-US');

3.利用边框的背景图片设置背景，可自适应屏幕

  border-image

  学习博客可参考  http://www.w3cplus.com/content/css3-border-image

4.background-image  可同时连接几个背景图片

<div style="background-image: url(img/02.png),
url(img/01.png),
url(img/03.png),
url(img/04.png);
width: 500px;
height: 500px;
border: 4px solid red;
background-position: 0px 0px, 0px 250px,250px 0px,250px 250px;<!--也可以用百分比／top right等-->
background-repeat: no-repeat, no-repeat, no-repeat,no-repeat;
padding: 15px;"

>
  <p>背景图片</p>
</div>

5.filter:alpha(opacity=0);

设置元素的透明级别，0到1. 0是完全透明，1是完全不透明

6.background-clip   属性指定背景绘制区域

       background-clip:padding-box :  剪切成衬距方框

       background-clip:centert-box   :剪切成内容方框

       background-clip:border-box   :剪切成边框方框

7.blackground-origin  属性指定background-position属性应该是相对位置----主要指背景图像

    background-origin:padding-box:背景图像填充框的相对位置

    background-origin:border-box:背景图像边界框的相对位置

    background-origin:center-box:背景图像相对位置的内容框

e.g.

div
{
background-image:url('smiley.gif');   //链接的背景图像//
background-repeat:no-repeat;
background-position:left;
background-origin:content-box;
}

8.

两个具有嵌套关系的盒子，当给里面的盒子设置margin-top属性的时候，外面的盒子也会受到影响被顶下来，解决方法有两个：1. 给外面盒子设置边框 ，2.给外面盒子添加overflow: hidden;属性。  推荐方法2.