2018-09-24

CSS-position属性

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，”left:20” 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

浏览更多

2018-09-24

post及get请求区别

1.ajax-get请求

 1 <script type="text/javascript">
 2 function ajax(){
 3     var XHR=null;
 4
 5     //第一步：创建XMLHttpRequest对象
 6     if (window.XMLHttpRequest) {
 7         XHR = new XMLHttpRequest();  // 非IE内核:IE7+, Firefox, Chrome, Opera, Safari  
 8     } else if (window.ActiveXObject) {
 9         XHR = new ActiveXObject("Microsoft.XMLHTTP");   // IE内核:IE6, IE5
10     } else {
11         XHR = null;
12     }
13
14     //第二步：发送请求
15     if(XHR){
16         XHR.open("GET", "/test/ajax");  //"/test/ajax"test为项目名称、ajax为方法名称
17
18     //第三步：
19         XHR.onreadystatechange = function () {
20             // readyState值说明  
21             // 0,初始化,XHR对象已经创建,还未执行open  
22             // 1,载入,已经调用open方法,但是还没发送请求  
23             // 2,载入完成,请求已经发送完成  
24             // 3,交互,可以接收到部分数据,因为相应及http头不全，这时通过responseText获取部分数据会出现错误  
25             // 4,数据接收完成，此时可以通过responseText获取完整的数据
26
27             // status值说明  
28             // 200:成功  
29             // 404:没有发现文件、查询或URl  
30             // 500:服务器产生内部错误  
31             if (XHR.readyState == 4 && XHR.status == 200) {  //注①
32                 // 这里可以对返回的内容做处理  
33                 // 一般会返回JSON或XML数据格式  
34                 console.log("XHR.responseText–>"+XHR.responseText);
35                 // 主动释放,JS本身也会回收的  
36                 XHR = null;
37             }
38         };
39         XHR.send();
40     }
41 }
42 </script>

浏览更多

2018-09-23

CSS居中设置

方法一：
父级元素position: relative
子元素position: absolute;top:50%;left: 50%;margin-left: -(子元素width/2);margin-top: -(子元素height/2);

浏览更多

2018-09-23

CSS清除浮动

未清除浮动时：

代码

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6     <style type="text/css">
 7         .box{
 8             width: 600px;
 9             border: 2px solid red;
10         }
11         .d1{
12             width: 100px;
13             height:100px;
14             background-color: blue;
15             float: left;
16         }
17         .d2{
18             width: 100px;
19             height:100px;
20             background-color: green;
21             float: right;
22         }
23
24     </style>
25 </head>
26 <body>
27     <div class="box clearfix">
28         <div class="d1"></div>
29         <div class="d2"></div>
30     </div>
31 </body>
32 </html>