CSS盒子阴影 伪类

box-shadow:水平阴影，垂直阴影，模糊距离，阴影尺寸，阴影颜色，内外阴影

注意：内阴影inset 外阴影默认值

after before 伪类

这两个伪类功能：在目标盒子追加新盒子

after 子集结尾处追加盒子

before 子集开头处追加盒子

注意：

1.伪类追加的盒子显示模式都是行内，一般配合定位去使用

2.after和before伪类需要书写 content：“” ;即便没有任何内容添加也要引号留空

例子：

.row1 a:after{width:40px;height: 33px;background: url("../images/pic.png") 0 -130px;position: absolute; content:"";background-size:104px 326px;
    left:50%;bottom: 10px;margin-left: -20px}

清除浮动就是为了解决父亲盒子高度为0的问题
清除浮动两种方式：
1.clear来清除
  额外标签法：在最后一个浮动的盒子后边加一个空的盒子，给这个盒子清除浮动
  给父盒子添加伪元素: .clearfix:after{content:"";display:block;height:0;visibility:hidden;clear:both}  .clearfix{zoom:1} //ie6
 
2创建父盒子的bfc

jsonp
 
 

 
 

  
  

   
   
json with padding
   
   
1.script标签
   
   
2.用script标签加载资源是没有跨域问题的
   
   
在资源加载进来之前定义好一个函数，这个函数接受一个参数（数据），函数里面做一些事情
   
   
用script标签加载对应远程文件资源，当加载进来后，执行之前定义好的函数，并把数据当做函数的参数传入进去。
  
  
 
 

 
 

  
  
CSS border实现各个方向等腰直角三角
  
  

  
  

   
   

    
    
CSS代码：
    
    

     
     

      
      
     
     
     
     
 1 .border_cort, .border_corr, .border_corb, .border_corl {
 2     display: inline-block;
 3     width: 0;
 4     height: 0;
 5     border-width: 6px;
 6     overflow: hidden;
 7 }
 8 .border_cort {
 9     border-color: #333 transparent transparent;
10     border-style: solid dotted dotted;
11 }
12 .border_corr {
13     border-color: transparent #333 transparent transparent;
14     border-style: dotted solid dotted dotted;
15 }
16 .border_corb {
17     border-color: transparent transparent #333;
18     border-style: dotted dotted solid;
19 }
20 .border_corl {
21     border-color: transparent transparent transparent #333;
22     border-style: dotted dotted dotted solid;
23 }
     
     

      
      
     
     
    
    
    
    
HTML代码：
    
    

     
     
1 <span class="border_cort"></span>   //下箭头
2 <span class="border_corb"></span>  //上箭头
3 <span class="border_corl"></span>  //右箭头
4 <span class="border_corr"></span>  //左箭头
    
    
   
   
  
  
  
  
文字后省略
  
  

  
  

   
   

    
    
white-space: nowrap;overflow: hidden;text-overflow: ellipsis;word-wrap:normal
   
   
  
  
  
  
position relative
  
  

  
  

   
   

    
    
position的默认值是static，（也就是说对于任意一个元素，如果没有定义它的position属性，那么它的position:static） 

如果你想让这个#demo里的一个div#sub相对于#demo定位在右上角的某个地方，应该给#demo相对定位，#sub绝对定位。 

absolute是相对于自己最近的父元素来定位的，如果你不给#demo相对定位，那么#sub的绝对定位就是相对于body来定位的。 

relative是相对于自己来定位的，例如：#demo{position:relative;top:-50px;},这时#demo会在相对于它原来的位置上移50px。 

另：relative 不脱离文档流，absolute 脱离文档流。也就是说：relative 的元素尽管表面上看到它偏离了原来的位置，但它实际上在文档流中还是没变。absolute的元素不仅位置改变了，同时也脱离了文档流。