day02 -- 复习

目录

 

http状态码

CSS布局

水平居中

垂直居中

垂直居中

JavaScript

new的过程

---

http状态码

• 1XX : 信息状态码
  • 100 Continue 继续，一般在发送post请求时，已发送了http header 之后服务端将返回此信息，表示确认，之后发送具体参数信息。
• 2XX ： 成功状态码
  • 200 OK 正常返回信息
  • 201 Created 请求成功并且服务器创建了新的资源
  • 202 Accepted 服务器已接收请求，但尚未处理
• 3XX ： 重定向
  • 301 Moved Permanently 请求的网页已永久移动到新位置
  • 302 Found 临时重定向
  • 303 See Other 临时重定向，且总是使用 GET 请求新的 URL
  • 304 Not Modified 自从上次请求后，请求的页面未修改过
•  4XX ： 客户端错误
  • 400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用的内容发起请求
  • 401 Unauthorized 请求未授权
  • 403 Forbidden 禁止访问
  • 404 Not Found 找不到如何与 URL 相匹配的资源
• 5XX ： 服务器错误
  • 500 Internal Server Error 最常见的服务器端错误
  • 503 Service Unavailable 服务器暂时无法处理请求（过载或是维护）

CSS布局

水平居中

文本/行内元素/行内块级元素，子元素宽度不能大于父元素

.parent{
    text-align : center
}

单个块级元素 ： 必须定宽，宽度小于父元素

<div class="parent">
    <div class="son"></div>
</div>


.son{
    width:200px;
    margin: 0 auto;
}

多个块元素：text-align只控制行内内容(文字、行内元素、行内块级元素)如何相对他的块父元素对齐

<div class="parent">
    <div class="son"></div>
    <div class="son"></div>
    <div class="son"></div>
</div>

.parent{
    text-align: center;
}

.son{
    display: inline-block; /*改为行内或者行内块级形式，text-align生效*/
}

绝对定位实现：父子定宽，子绝父相，top、left的值是相对于父元素的尺寸，margin或transform是相对于自身的尺寸，组合使用达到水平居中和垂直居中的水平。

<div class="parent">
    <div class="son"> </div>
</div>

.parent{
    height:400px; /*定高*/
    width:400px;
    position: relative; /*相对定位*/
    background-color: #f00;
}

.son{
    height: 200px;
    width: 200px; /*定宽*/
    background: #00ff00;
    position: absolute; /*子绝*/
    /*水平居中*/
    left: 50%;  /*父元素宽度的一半，这里相当于left:200px*/
    transform: translateX(-50%); /*自身宽度的一半，等同于margin-left:-100px*/
    /*垂直居中*/
    top: 50%; /*父元素高度的一半*/
    margin-top:-100px; /*自身高度的一半*/
}

任意元素：flex 设置当前主轴对齐方式为居中。

.parent{
    display: flex;
    justify-content: center;
}

垂直居中

单行文本/行内元素/行内块级元素

.parent{
    height: 100px;
    line-heigt: 100px;
}
/*定宽，设置行内高度，行内块元素占据的空间都是与文字内容公用水平中垂线*/

图片：放入div中有空白，具体参照：CSS深入理解vertical-align和line-height的基友关系

基本上让文字在水平线底部：vertical-align:bottom; 

文字在水平线中部：vertical-align: middle;

flex垂直居中

.parent{
    display: flex;
    align-items: center;
}


或

.parent{display: flex;}
.son{align-self: center}

垂直居中

行内/行内块级/图片

.parent{
    height:200px;
    line-height: 200px;
    text-align: center; /*控制行内元素相对于块父元素水平居中*/
    font-size:0; /*消除幽灵空白节点的bug*/
}
.son{
    /*dispaly: inline-block; */ /*如果是块级元素需改为行内或行内块级才生效*/
    vertical-align: middle; /*line-height和vertical-align使其垂直居中*/
}

table-cell

#parent{
    height: 400px;
    width: 200px;  
    display:table-cell; /*不感知margin*/
    vertical-align:middle;
    background-color: #f00;
}
.son{
    width: 50px;  /*设置百分比无效，除非给父元素设置display:table*/
    margin:0 auto;
    height: 100px;
    background-color: #00ff00;
}

flex

.parent{
    display: flex;
}
.son{
    margin: auto;
}

或

.parent{
    display: flex;
    justify-content: center;
    align-items: center;
}

或

.parent{
    display: flex;
    justify-content: center;
}
.son{
    align-self: center
}

flex布局的详解放这，万一以后忘了....

CSS3 Flexbox 布局完全指南

JavaScript

原型（js高程P147）

1. 每个JavaScript构造函数都有一个prototype（原型）属性，它是一个指针，指向一个对象，这个对象就是原型对象，原型对象包含可以由特定类型的所有实例共享的属性和方法。
2. 原型对象会自动获得一个constructor属性，包含了一个指针，指向prototype属性所在函数的指针，也就是1中的JavaScript对象
3. 调用构造函数创建新实例之后，实例内会包含一个指针（_proto_属性），指向构造函数的原型对象。

function Person(){
    //声明一个函数时，prototype属性被自动创建
    //这个属性的值是一个对象，prototype对象只有一个constructor属性
    //constructor 对应着构造函数，也就是Person
}

Person.prototype = {
    name: 'jason',
    age: '29',
    job: 'Software Engineer',
    sayName : function() {
        console.log(this.name);
    }
};

var friend = new Person(); //当我们使用 new 操作符时，生成的实例对象拥有了 _proto_属性
//在new的过程中，新对象实例被添加了 _proto_ 并且链接到构造函数的原型上
friend.sayName();

JavaScript Prototype(原型) 新手指南  

new的过程

1. 新生成一个对象
2. 链接到原型
3. 绑定this
4. 返回新对象