CSS3 Flex布局(项目)

一、order属性

order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。

二、flex-grow属性

flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。

三、flex-shrink属性

flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。负值对该属性无效。

四、flex-basis属性

flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。

它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。

五、flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。

六、align-self属性

align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。该属性可能取6个值,除了auto,其他都与align-items属性完全一致。

Flex 布局教程:语法篇

CSS3 Flex布局(容器)

一、flex-direction属性

  • row(默认值):主轴为水平方向,起点在左端。
  • row-reverse:主轴为水平方向,起点在右端。
  • column:主轴为垂直方向,起点在上沿。
  • column-reverse:主轴为垂直方向,起点在下沿。
<style>
.box{
    background: #0074D9;
    display: flex;
    flex-direction: row-reverse;
}
.box>div[class^="item"]{
    color: #FFFFFF;
}
</style>

<div class="box">
    <div class="item1">item1</div>
    <div class="item2">item2</div>
    <div class="item3">item3</div>
    <div class="item4">item4</div>
    <div class="item5">item5</div>
</div>

二、flex-wrap属性

  • nowrap(默认):不换行。
  • wrap:换行,第一行在上方。
  • wrap-reverse:换行,第一行在下方。

三、flex-flow属性

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。

四、justify-content属性

justify-content属性定义了项目在主轴上的对齐方式。

  • flex-start(默认值):左对齐
  • flex-end:右对齐
  • center: 居中
  • space-between:两端对齐,项目之间的间隔都相等。
  • space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

五、align-items属性

align-items属性定义项目在交叉轴上如何对齐。

  • flex-start:交叉轴的起点对齐。
  • flex-end:交叉轴的终点对齐。
  • center:交叉轴的中点对齐。
  • baseline: 项目的第一行文字的基线对齐。
  • stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

垂直居中

<style>
.box{
    background: #0074D9;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 500px;
    height: 500px;
}
.box>div[class^="item"]{
    color: #FFFFFF;
}
</style>

<div class="box">
    <div class="item1">item1</div>
    <div class="item2">item2</div>
    <div class="item3">item3</div>
    <div class="item4">item4</div>
    <div class="item5">item5</div>
</div>

六、align-content属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

  • flex-start:与交叉轴的起点对齐。
  • flex-end:与交叉轴的终点对齐。
  • center:与交叉轴的中点对齐。
  • space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
  • space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
  • stretch(默认值):轴线占满整个交叉轴。

Flex 布局教程:语法篇

JavaScript正则中\1\2的作用

一、示例

1. 验证6个相同的数字

var reg = new RegExp(/^(\d)\1{5}/g);
var a = '333333';
if(reg.test(a)) {
    alert('right');
} else {
    alert('wrong');
}

2. 验证3个相同的数字+3个相同的字母

var reg = new RegExp(/^(\d)\1{2}([a-z])\2{2}/g);
var a = '333aa1';
if(reg.test(a)) {
    alert('right');
} else {
    alert('wrong');
}

二、解释:

\1必须与小括号配合使用。

正则表达式中的小括号”()”。是代表分组的意思。 如果再其后面出现\1则是代表与第一个小括号中要匹配的内容相同。Link

原生JavaScript写AJAX

前端JavaScript:

function ajaxGet(url, obj) {
    var request;
    if(window.XMLHttpRequest) {
        request = new XMLHttpRequest();
    } else {
        request = new ActiveXObject('Microsoft.XMLHTTP'); // 兼容IE
    }

    request.onreadystatechange = function() {
        if(request.readyState === 4) { // 4 请求完成
            if(request.status === 200) { // 200 页面成功加载
                console.log(request.responseText); // 成功 返回得到的文本
            } else {
                console.log(request.status); // 失败 返回状态码 如 404
            }
        } else {
            console.log('Requesting');
        }
    }
    /* 解析参数 */
    str = '?';
    for(key in obj) {
        str += (key + '=' + obj[key] + '&');
    }
    str = str.substr(0, str.length - 1);
    /* 发送 */
    request.open('GET', url + str);
    request.send();
}

ajaxGet('ajax.php', {
    'type': 'get',
    'data': 'test'
}); //get-test

后端PHP:

<!-- ajax.php -->
<?php
    echo $_GET['type'] . '-' . $_GET['data'];

Linux彻底删除mysql5.6

查看安装的mysql组件

rpm -qa | grep -i mysql

mysql57-community-release-el6-8.noarch
mysql-community-common-5.6.37-2.el6.x86_64
mysql-community-client-5.6.37-2.el6.x86_64
php70w-mysql-7.0.22-2.w6.x86_64
mysql-community-libs-5.6.37-2.el6.x86_64
mysql-community-libs-compat-5.6.37-2.el6.x86_64
mysql-community-server-5.6.37-2.el6.x86_64

查看与mysql相关的文件

find / -name mysql

/home/mysql
/etc/logrotate.d/mysql
/usr/share/mysql
/usr/bin/mysql
/usr/lib64/mysql
/var/spool/mail/mysql
/var/lib/mysql
/var/lib/mysql/mysql

whereis mysql

mysql: /usr/bin/mysql /usr/lib64/mysql /usr/share/mysql /usr/share/man/man1/mysql.1.gz

卸载mysql组件

rpm -ev --nodeps mysql57-community-release-el6-8.noarch
rpm -ev --nodeps mysql-community-common-5.6.37-2.el6.x86_64
rpm -ev --nodeps mysql-community-client-5.6.37-2.el6.x86_64
rpm -ev --nodeps mysql-community-libs-5.6.37-2.el6.x86_64
rpm -ev --nodeps mysql-community-libs-compat-5.6.37-2.el6.x86_64
rpm -ev --nodeps mysql-community-server-5.6.37-2.el6.x86_64

删除mysql相关文件

rm -rf /home/mysql
rm -rf /etc/logrotate.d/mysql
rm -rf /usr/share/mysql
rm -rf /usr/bin/mysql
rm -rf /usr/lib64/mysql
rm -rf /var/spool/mail/mysql
rm -rf /var/lib/mysql
rm -rf /var/lib/mysql/mysql

Linux问题: SSH FTP登录不了

昨天准备新加一个FTP用户来管理/etc下面的文件。然后执行chmod 777 -R /etc后出现了一系列的崩溃,服务器登不上,有些文件变成了只读,FTP和PUTTY登录不上。

之后尝试了git传文件被拒绝。

搜索了问题后无果,想到自己是新加FTP出现的问题,会不会是权限的问题?于是搜索了更改/etc权限会出现的问题,果不其然,会影响SSH的登录。没有备份的情况下只能重装系统。

因为我的一系列Nginx重定向规则不能下载,只能重装后再手打了。:(

JavaScript方法splice()和slice()

1 splice()

1.1 说明

splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。该方法会改变原始数组Link

1.2 语法

arrayObject.splice(index,howmany,item1,.....,itemX)

参数

  • index: 必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。
  • howmany: 必需。要删除的项目数量。如果设置为 0,则不会删除项目。
  • item1, …, itemX: 可选。向数组添加的新项目。

返回值

  • Array: 包含被删除项目的新数组,如果有的话。

1.3 示例

//添加项目
(function(){
    var arr = [0, 1, 2, 3, 4];
    arr.splice(1, 0, 9, 10); //索引位置/ 删除数量/ 可选, 添加项目, 可多个
    console.log(arr); //[0, 9, 10, 1, 2, 3, 4]
}());
//删除项目
(function(){
    var arr = [0, 1, 2, 3, 4];
    arr.splice(1, 2);
    console.log(arr); //[0, 3, 4]
}());
//删除并添加项目
(function(){
    var arr = [0, 1, 2, 3, 4];
    arr.splice(1, 2, 9, 10, 11);
    console.log(arr); //[0, 9, 10, 11, 3, 4]
}());

2 slice()

2.1 说明

slice() 方法可从已有的数组中返回选定的元素。该方法并不会修改数组,而是返回一个子数组

2.2 语法

arrayObject.slice(start,end)

参数

  • start: 必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。
  • end: 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。

返回值

  • 返回一个新的数组,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素。

2.3 示例

//截取中间一段
(function(){
    var arr = [0, 1, 2, 3, 4];
    arrS = arr.slice(1, 3); //从索引1开始到索引3之前, 不包括索引3的项目
    console.log(arrS); //[1, 2]
}());
//截取中间到最后
(function(){
    var arr = [0, 1, 2, 3, 4];
    arrS = arr.slice(1); //end为空, 从索引1开始到结束
    console.log(arrS); //[1, 2, 3, 4]
}());
//获取最后一个项目
(function(){
    var arr = [0, 1, 2, 3, 4];
    arrS = arr.slice(-1); // -1个项目到最后, -1即最后一个, -2倒数第二个
    console.log(arrS); //[4]
}());
//排除最后一个项目
(function(){
    var arr = [0, 1, 2, 3, 4];
    arrS = arr.slice(0, -1); // 第一个到第-1个, 不包含第-1个(最后一个)
    console.log(arrS); //[0, 1, 2, 3]
}());

搭建LNMP环境

### 1.搭建 Nginx 静态服务器

– 安装 Nginx
– 使用 yum 安装 Nginx:

yum install nginx -y

– 修改 /etc/nginx/conf.d/default.conf,去除对 IPv6 地址的监听
– i进入修改 esc退出编辑 :x保存

vim /etc/nginx/conf.d/default.conf

– 代码示例
server {
listen 80 default_server;
# listen [::]:80 default_server;
server_name _;
root /usr/share/nginx/html;

# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;

location / {
}

error_page 404 /404.html;
location = /40x.html {
}

error_page 500 502 503 504 /50x.html;
location = /50x.html {
}

}

– 修改完成后,启动 Nginx:

nginx

– 此时,可访问实验机器外网 HTTP 服务(http://1.1.1.1)来确认是否已经安装成功。

– 将 Nginx 设置为开机自动启动:

chkconfig nginx on

### 2.安装 MySQL 数据库服务

– 安装 MySQL
– 使用 yum 安装 MySQL:

yum install mysql-server -y

– 安装完成后,启动 MySQL 服务:

service mysqld restart

– 设置 MySQL 账户 root 密码:

/usr/bin/mysqladmin -u root password 'vYyie1cQ'

– 将 MySQL 设置为开机自动启动:

chkconfig mysqld on

### 3.搭建 PHP 环境

– 安装 PHP
– 使用 yum 安装 PHP:

yum install php php-fpm php-mysql -y

– 安装之后,启动 PHP-FPM 进程:

service php-fpm start

– 启动之后,可以使用下面的命令查看 PHP-FPM 进程监听哪个端口

netstat -nlpt | grep php-fpm

– 把 PHP-FPM 也设置成开机自动启动:

chkconfig php-fpm on

### 4.配置 Nginx 并运行 PHP 程序

– 配置 Nginx

– 在 /etc/nginx/conf.d 目录中新建一个名为 php.conf 的文件,并配置 Nginx 端口 ,配置示例如下:
– 代码示例
server {
listen 8000;
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
location ~ .php$ {
root /usr/share/php;
fastcgi_pass 127.0.0.1:9000;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
include fastcgi_params;
}
}

cd /etc/nginx/conf.d

vim /etc/nginx/conf.d/php.conf

touch php.conf

vim /etc/nginx/conf.d/php.conf

– 修改配置完成后,重启 nginx 服务

service nginx restart

– 这时候,我们就可以在/usr/share/php 目录下新建一个 info.php 文件来检查 php 是否安装成功了,文件内容参考如下:

cd /usr/share/php

touch info.php

vim info.php

<?php phpinfo(); ?>

– 此时,访问 http://1.1.1.1:8000/info.php 可浏览到我们刚刚创建的 info.php 页面了

– 重启

service php-fpm restart
service nginx restart

– 默认网站目录

/usr/share/nginx/html

– 配置目录
vim /etc/nginx/conf.d/default.conf
vim /etc/nginx/conf.d/php.conf

[腾讯 – 开发者实验室 – 搭建 LNMP 环境](https://www.qcloud.com/developer/labs/lab/10029)

JavaScript函数setInterval()和setTimeout()正确的写法

一、常规写法

1.1 不传参数

function a (x, y) {
    var i = 0;
    var b = function(){
        console.log((x * y) + (i++));
    }
    return b;
}
var c = a(1, 2);
setInterval('c()', 1000);

1.2 传参数

function c (x, y) {
    console.log(x * y);
}
setInterval('c(1, 2)', 1000);

二、改进写法

2.1 不传参数

setInterval(c, 1000);

2.2 传参数

setInterval(function(){
    c(1, 2);
}, 1000);

2.3 改进原因

在幕后,JavaScript仍需要评估和执行你给程序传递的字符串。Link

JavaSctipt语句for循环的思考

一、语法

for (语句 1; 语句 2; 语句 3) {
    被执行的代码块;
}
  • 语句 1: 在循环(代码块)开始前执行, 可选.
  • 语句 2: 定义运行循环(代码块)的条件, 可选, 如果省略了语句 2, 那么必须在循环内提供 break, 否则循环就无法停下来.
  • 语句 3: 在循环(代码块)已被执行之后执行, 可选.

二、常规写法

var arr = [1, 2, 3, 4, 5];
(function(){
    for(var i = 0; i < arr.length; i++){
        console.log(arr[i]); //1 2 3 4 5
    }
})();

三、改进

3.1 将数组长度提前提取出来,避免每次循环提取一次

(function(){
    for(var i = 0, max = arr.length; i < max; i++){
        console.log(arr[i]); //1 2 3 4 5
    }
})();

3.2 i += 1i = i+1i++

(function(){
    for(var i = 0, max = arr.length; i < max; i += 1){
        console.log(arr[i]); //1 2 3 4 5
    }
})();

3.3 和0作比较更快

(function(){
    for(var i = arr.length; i--;){
        console.log(arr[i]); //5 4 3 2 1
    }
})();
(function(){
    var i = arr.length;
    while(i--){
        console.log(arr[i]); //5 4 3 2 1
    }
})();