日常开发中经常遇到布局问题，下面记录几种常用的css布局方案。

本文转自 [segmentfault](https://segmentfault.com/a/1190000010989110)，版权归原作者所有。




# 居中布局

> 以下居中布局均`以不定宽为前提`，定宽情况包含其中

## 1、水平居中

- **inline-block + text-align**

```css
.parent{
    text-align: center;
}
.child{
    display: inline-block;
}
```

> tips：此方案兼容性较好，可兼容至IE8，对于 IE567 并不支持 inline-block，需要使用css hack 进行兼容

- **table + margin**

```css
.child{
    display: table;
    margin: 0 auto;
}
```

> tips：此方案兼容至IE8，可以使用`<table/>`代替css写法，兼容性良好

- **absolute + transform**

```css
.parent{
    position: relative;
    height:1.5em;
}
.child{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
```

> tips：此方案兼容至IE9，因为 transform 兼容性限制，如果`.child`为定宽元素，可以使用以下写法，兼容性极佳

```css
.parent{
    position: relative;
    height:1.5em;
}
.child{
    position: absolute;
    width:100px;
    left: 50%;
    margin-left:-50px;
}
```

- **flex + justify-content**

```css
.parent{
    display: flex;
    justify-content: center;
}
.child{
    margin: 0 auto;
}
```

> tips：flex是一个强大的css，生而为布局，它可以轻松的满足各种居中、对其、平分的布局要求，但由于现浏览器兼容性问题，此方案很少被使用，但是值得期待浏览器兼容性良好但那一天！

## 2、垂直


- **table-cell + vertial-align**

```css
.parent{
    display: table-cell;
    vertical-align: middle;
}
```

> tips：可替换成`<table />`布局，兼容性良好

- **absolute + transform**

```css
.parent{
    position: relative;
}
.child{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
```

> tips：存在css3兼容问题，定宽兼容性良好

如果是定高（假如高100px），可以使用`margin-top： -50px；`。

- **flex + align-items**

```css
.parent{
    display: flex;
    align-items: center;
}
```

> tips：高版本浏览器兼容，低版本不适用

## 3、水平垂直


- **inline-block + table-cell + text-align + vertical-align**

```css
.parent{
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}
.child{
    display: inline-block;
}
```

> tips：兼容至IE8

- **absolute + transform**

```css
.parent{
    position: relative;
}
.child{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
```

> tips：兼容性稍差，兼容IE10以上

- **flex**

```css
.parent{
    display: flex;
    justify-content: center;
    align-items: center;
}
```

> tips：兼容差

# 多列布局

## 1、一列定宽，一列自适应


- **float + margin**

```css
.left{
    float: left;
    width: 100px;
}
.right{
    margin-left: 120px;
}
```

> tips：此方案对于定宽布局比较好，不定宽布局推荐下面这个方法

- **float + overflow**

```css
.left{
    float: left;
    width: 100px;
    margin-right: 20px;
}
.right{
    overflow: hidden;
}
```

> tips：个人常用写法，此方案不管是多列定宽或是不定宽，都可以完美实现，同时可以实现等高布局

- **table**

```css
.parent{
    display: table; width: 100%;
    table-layout: fixed;
}
.left,.right{
    display: table-cell;
}
.left{
    width: 100px;
    padding-right: 20px;
}
```

- **flex**

```css
.parent{
    display: flex;
}
.left{
    width: 100px;
    padding-right: 20px;
}
.right{
    flex: 1;
}
```

## 2、多列定宽，一列自适应


- **float + overflow**

```css
.left,.center{
    float: left;
    width: 100px;
    margin-right: 20px;
}
.right{
    overflow: hidden;
}
```

- **table**

```css
.parent{
    display: table; width: 100%;
    table-layout: fixed;
}
.left,.center,.right{
    display: table-cell;
}
.right{
    width: 100px;
    padding-right: 20px;
}
```

- **flex**

```css
.parent{
    display: flex;
}
.left,.center{
    width: 100px;
    padding-right: 20px;
}
.right{
    flex: 1;
}
```

## 3、一列不定宽，一列自适应


- **float + overflow**

```css
.left{
    float: left;
    margin-right: 20px;
}
.right{
    overflow: hidden;
}
.left p{width: 200px;}
```

- **table**

```css
.parent{
    display: table; width: 100%;
}
.left,.right{
    display: table-cell;
}
.left{
    width: 0.1%;
    padding-right: 20px;
}
.left p{width:200px;}
```

- **flex**

```css
.parent{
    display: flex;
}
.left{
    margin-right: 20px;
}
.right{
    flex: 1;
}
.left p{width: 200px;}
```

## 4、多列不定宽，一列自适应


- **float + overflow**

```css
.left,.center{
    float: left;
    margin-right: 20px;
}
.right{
    overflow: hidden;
}
.left p,.center p{
    width: 100px;
}
```

## 5、等分


- **float + margin**

```css
.parent{
    margin-left: -20px;
}
.column{
    float: left;
    width: 25%;
    padding-left: 20px;
    box-sizing: border-box;
}
```

- **table + margin**

```css
.parent-fix{
    margin-left: -20px;
}
.parent{
    display: table;
    width:100%;
    table-layout: fixed;
}
.column{
    display: table-cell;
    padding-left: 20px;
}
```

- **flex**

```css
.parent{
    display: flex;
}
.column{
    flex: 1;
}
.column+.column{
    margin-left:20px;
}
```

## 6、多列等高


- **float + overflow**

```css
.parent{
    overflow: hidden;
}
.left,.right{
    padding-bottom: 9999px;
    margin-bottom: -9999px;
}
.left{
    float: left;
    width: 100px;
}
.right{
    overflow: hidden;
}
```

- **table**

```css
.parent{
    display: table;
    width: 100%;
}
.left{
    display:table-cell;
    width: 100px;
    margin-right: 20px;
}
.right{
    display:table-cell;
}
```

- **flex**

```css
.parent{
    display:flex;
    width: 100%;
}
.left{
    width: 100px;
}
.right{
    flex:1;
}
```

# 并排等分，单排对齐靠左布局


## flex

```css
.main {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}
.item {
    display: inline-block;
}
.empty{
    height: 0;
    visibility: hidden;
}
```

具体详解请见下文
[https://segmentfault.com/a/1190000011007357](https://segmentfault.com/a/1190000011007357)

# 圣杯布局&双飞翼布局

> 此处仅为代码展示，差别讲解请移驾下文
> [【方案】圣杯布局&双飞翼布局](https://segmentfault.com/a/1190000011149400)

## 圣杯布局


```html
<div class="container">
  <div class="header">header</div>

  <div class="wrapper clearfix">
    <div class="main col">main</div>
    <div class="left col">left</div>
    <div class="right col">right</div>
  </div>

  <div class="footer">footer</div>
</div>
```

```css
.container {width: 500px; margin: 50px auto;}
.wrapper {padding: 0 100px 0 100px;}
.col {position: relative; float: left;}
.header,.footer {height: 50px;}
.main {width: 100%;height: 200px;}
.left {width: 100px; height: 200px; margin-left: -100%;left: -100px;}
.right {width: 100px; height: 200px; margin-left: -100px; right: -100px;}
.clearfix::after {content: ""; display: block; clear: both; visibility: hidden; height: 0; overflow: hidden;}
```

## 双飞翼布局

```html
<div class="container">
    <div class="header">header</div>

    <div class="wrapper clearfix">
        <div class="main col">
            <div class="main-wrap">main</div>
        </div>
        <div class="left col">left</div>
        <div class="right col">right</div>
    </div>

    <div class="footer">footer</div>
</div>
```

```css
.col {float: left;}
.header {height: 50px;}
.main {width: 100%;}
.main-wrap {margin: 0 100px 0 100px;height: 200px;}
.left {width: 100px; height: 200px; margin-left: -100%;}
.right {width: 100px; height: 200px; margin-left: -100px;}
.footer {height: 50px;}
.clearfix::after {content: ""; display: block; clear: both; visibility: hidden; height: 0; overflow: hidden;}
```

------

> 以下所有demo的源码
> github：[https://github.com/zwwill/css-layout/tree/master/demo-1](https://github.com/zwwill/css-layout/tree/master/demo-1)
> 链接: [http://pan.baidu.com/s/1cHBH3g ](http://pan.baidu.com/s/1cHBH3g)
> 密码:obkb

CSS 布局整理

`attributes` 属于 HTML。为了易于区别，我们译为`特性`。

`properties` 属于 DOM，译为`属性`，而在 JavaScript 中我们操作 HTML 时使用的就是 DOM。



### Attribute（特性）

-  attributes 由 HTML 来定义，像是id、title、class等等。

比如这样一段html代码，input 元素就有三个 attribute。

```
<input  type='text'  id='txt'  a=b />
```

HTML 元素映射到 DOM 是 HTMLElement 类型的节点对象，HTMLElement 类型的节点对象有一个 attributes 属性，这个属性本身也是一个对象，HTML 元素的所有 attribute 都包含在这个对象里面。

attributes 对象特点：

- 以动态集合的方式存在（NamedNodeMap）
- 只能是字符串
- 大小写不敏感

attributes 对象本身也有一些操作 HTML 的 attribute 的方法，但是实际上，这个对象极少使用。一般都是通过 HTMlElement 节点对象的几个方法来操作 HTML 的 attribute。

```javascript
elem.hasAttribute(name)  // 检查 attribute 是否存在
elem.getAttribute(name)  // 获得 attribute
elem.setAttribute(name, value)  // 设置 attribute 的值
elem.removeAttribute(name)  // 删除 attribute
```

### Property（属性）

在JS里面我们使用 DOM 来操作 HTML 元素，DOM 为了操作 HTML ，将 HTML 中的元素描绘成一个个的节点，HTML 元素的每一个公认的（非自定义的） `attribute` 映射为节点对象上一个个的 `property` 。

properties 特点：

- 可以是任何的数据类型，
- 对大小写敏感，
- js 中自定义的 property 不会出现在 html 代码中，只存在 js 中

例：
```
<div id="myDiv" class="bd" title="Body text"></div>
```

在 HTML 中，`div`是一个元素，`id、class、title`是它的`attributes`（特性）；
在 DOM 中，`div`元素为`HTMLElement`类型的节点对象，`id、className、title`是它的`properties`（属性）。

> 有些 HTML 特性是 JavaScript 的保留字，转为 property 时，必须改名。主要是以下两个。
> - for 属性改为 htmlFor
> - class 属性改为 className

### dataset 属性

上面我们讲了，HTML 元素的每一个 **公认的（非自定义的）** attribute 映射为节点对象上一个个的 property 。那么自定义的怎么办？

有时，需要在HTML元素上附加数据，供JavaScript脚本使用。一种解决方法是自定义特性。

```
<div id="mydiv" foo="bar">
```

上面代码为 div 元素自定义了 foo 特性，然后可以用`getAttribute()`和`setAttribute()`读写这个特性。这种方法虽然可以达到目的，但是会使得HTML元素的属性不符合标准，导致网页的HTML代码通不过校验。

更好的解决方法是，使用标准提供的`data-*`特性。

```
<div id="mydiv" data-foo="bar">
```

HTMLElement 节点对象有一个 `dataset` 属性，它本身也是一个对象，可以用来操作 HTML 元素的`data-*`特性。

```js
var n = document.getElementById('mydiv');
n.dataset.foo // bar
n.dataset.foo = 'baz'
```

> 注意，data-后面的属性名有限制，只能包含字母、数字、连词线（`-`）、点（`.`）、冒号（`:`）和下划线（`_`)。而且，属性名不应该使用 A 到 Z 的大写字母，比如不能有`data-helloWorld`这样的属性名，而要写成`data-hello-world`。

> 转成 dataset 的键名时，连词线后面如果跟着一个小写字母，那么连词线会被移除，该小写字母转为大写字母，其他字符不变。反过来，dataset 的键名转成属性名时，所有大写字母都会被转成连词线`+`该字母的小写形式，其他字符不变。比如，`dataset.helloWorld`会转成`data-hello-world`。

### 相通之处


-  公认的（非自定义的）attribute，如id、class、titile等，都会有对应的 property 映射。



-  公认的（非自定义的） property 或 attribute 的变化多数是联动的。
  attribute 更改时，相应的 property 将自动更新，反之亦然。

```js
// HTML
// <div id="test" class="button"></div>

var div = document.getElementById('test');
div.className = 'red-input';
div.getAttribute('class');   // "red-input"

div.setAttribute('class','green-input');
div.className;   // "green-input"
```

但是有例外，带有默认值的 attribute 不随 property 变化而变化。

```js
// HTML
// <input id="search" value="foo" />

var input = document.getElementById('search');
input.value = 'foo2';
input.getAttribute('value');   // "foo"
```

### 不同之处

有几类特殊的特性，它们虽然有对应的属性名，但属性的值与通过`getAttribute()`返回的值并不相同。如href，src，value，style，onclick等事件处理程序。

- `href`、`src`
  `getAttribute()` 获取的是 href 的实际值，而点号获取的是完整的 url，存在浏览器差异。

```html
<a href="#"></a>
<script>
    var a  = document.body.children[0]
    a.href = '/'
    alert( 'attribute:' + a.getAttribute('href') ) // '/'
    alert( 'property:' + a.href )  // IE: '/'; others: full URL
</script>
```

- `style`，用于通过CSS为元素指定样式。
  在通过`getAttribute()`访问时，返回的style特性值中包含的是CSS文本，而通过属性来访问它则会返回一个对象。由于`style`属性是用于以编程方式访问元素样式的，因此并没有直接映射到`style`特性。

- `onclick`这样的事件处理程序。
  当在元素上使用时，`onclick`特性中包含的是 JavaScript 代码，如果通过`getAttribute()`访问，则会返回相应代码的字符串。而在 DOM 中访问`onclick`属性时，则会返回一个 JavaScript函数（如果未在元素中指定相应特性，则返回null）。这是因为 onclick 及其他事件处理程序属性本身就应该被赋予函数值。

由于存在这些差别，在通过 JavaScript 以编程方式操作 DOM 时，开发人员不经常使`getAttribute()`，而是只使用对象的属性。

------

参考：

- [MDN - Attr](https://developer.mozilla.org/zh-CN/docs/Web/API/Attr)
- [阮一峰 - DOM - 属性的操作](http://javascript.ruanyifeng.com/dom/attribute.html#toc8)
- [Attributes and properties](http://javascript.info/dom-attributes-and-properties)
- [property和attribute的区别](http://www.jianshu.com/p/rRssiL)

attribute 和 property 的区别

this指向问题

vue项目编译之后，dist文件夹内容上传到服务器出现空白页解决方法。



首先VUE 是一个javascript的前端框架，注定了它是运行在浏览器里的，对服务器本地没有任何要求，只要一个静态文件服务器能通过http访问到其资源文件就足矣！无论你是用apache ,ngnix 就算你要用node 自己实现一个静态文件服务器，也用不了多少行代码。

`npm run dev` 是用来在本地开发的时候做调试用的，**vue开发的是前端的东西，不是nodejs 服务端程序，按道理讲，生产环境里就不该存在npm，甚至nodejs也不需要（用nodejs来做web静态服务的除外）**，楼主通过ssh进入到服务器里，再运行`npm run dev` 来启动哪是开发机上做的事情。正确的做法很简单，通过**`npm run build` 把生成的dist文件夹（不要上传文件夹）里的内容上传到http服务器上**就可以通过 http来访问了，开发机上正常，上传以后 程序出现错误不能运行的原因99.99%的可能性是你**引用资源的路径**有问题。

一般如果vue框架的程序上传到网站服务器的根目录下是不 会有问题的，也不存在资源文件引用错误的情况，但如果你不是根目录，就会有问题，通过vue-cli 生成的开发目录，build以后默认引用资源文件的路径是

比如 app.js的引用方式

```
<script type="text/javascript" src="/static/js/app.js"></script>
```

所以，如果你的目录结构是 如下

```
www/
 +hot/
   +static/
   +index.html
```

当你通过 `http://www.xxx.com/hot/index.html` 来访问的时候 会出现找不到app.js

因为index.html里引用的app.js路径是

```
http://www.xxx.com/static/js/app.js
```

但是app.js的实际路径是

```
http://www.xxx.com/hot/static/js/app.js
// 所以出现了404
```

要解决的方法很简单把引用方式 改成如下两种方式 都可以

```
<script type="text/javascript" src="./static/js/app.js"></script>
或者
<script type="text/javascript" src="/hot/static/js/app.js"></script>
推荐这样的方式，可以保正在vue-router生成的url下也不出现问题
```

都可以，当然这也不需要手动去改，

在webpack的配置文件中修改

```
assetsPublicPath: './'
或者
assetsPublicPath: '/hot/',
```

这样，我们就基本解决了有服务器子目下运行的问题，

当然，如果你还用到了vue-router

要在router的配置中加上

```
export default new Router({
  mode: 'history',
  base: '/hot/', //加上这一行
```

用浏览器打开 `http://www.xxx.com/hot/`

一切运行正常，点击各种链接也能出来，但是由于我启用了history模式，我直接在浏览里访问  `http://www.xxx.com/hot/item/1`  这样的url是又404了，为什么 我可以在首页通过点击进入 `http://www.xxx.com/hot/item/1` 这个页面，但是直接访问又不行呢，

因为在history 模式下，只是动态的通过js 操作`window.history `来改变有浏览器地址栏里的路径，并没有发起http请求，但当你直接 在浏览器里输入这个地址的时候 就一定要先对服务器放起http请求，但是这个目标在服务器上又不存在所以就返回了404了，怎么解决呢，就是把所有的请求全部转发到 `http://www.xxx.com/hot/index.hmtl` 上就可以了

我用的是apache 做web服务器的虚拟空间，而且开启支`.htaccess`文件支持，

我成我的文件里加上如下，就一切正常了，

```
<IfModule mod_rewrite.c>
  Options +FollowSymlinks
  RewriteEngine On

  RewriteCond %{REQUEST_URI} ^/(hot|hot/.*)$
  RewriteRule ^/hot/index\.html$ - [L,NC]

  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteRule ^(hot|hot/.*)$ hot/index.html [L]
</IfModule>

```

这个配置的作用就是把所有服务器上不存在请求全部转发到`index.html`上去，这样就可以直接通过各种 url 来访问了

------------

作者：papersnake
链接：[https://www.zhihu.com/question/46630687/answer/157166318](https://www.zhihu.com/question/46630687/answer/157166318)

VUE 服务器部署路径问题

cmder，Win 下超好用的命令行操作工具。



Windows 自带的`cmd`有如下缺点：

1.  窗口size不能便捷缩放
2.  复制文本，不能直接用鼠标拷贝，还需要多一道菜单操作；而且，还只能块状拷贝，而不是按行字符，极其不便
3.  不支持多Tab页，多窗口管理不便
4.  界面丑陋，只有黑白界面，而且不支持文字颜色区分。

以上问题`cmder`都可以解决 ~

## 安裝

官网地址：[http://cmder.net/](http://cmder.net/)

下载的时候，有两个版本，分别是`mini`与`full`版；

*   ` mini`版功能简单，很小巧，只有4M多，主要是 `cmd` 和 `powershell`
*   `full`版自带了 msysgit, 压缩包 23M, 除了 git 本身这个命令之外, 里面可以使用大量的 linux 命令；比如 grep, curl(没有 wget)； 像vim, grep, tar, unzip, ssh, ls, bash, perl 对于爱折腾的Coder更是痛点需求。

下载完成后，将下载的压缩包解压到你想放置的目录。点击`Cmder.exe`即可运行。

## 界面介绍

<img src="https://picgo-1254029119.cos.ap-beijing.myqcloud.com/blog/images/cmder/cmder.png" style="max-height: 300px">

如上图示编号的部分说明如下：

1.  Cmder常用快捷键
    跟一般浏览器页签操作习惯一致：

    *   可以利用`Tab`，自动路径补全(爽,赞！)；

    *   可以利用 **Ctrl+T** 建立新页签；

    *   利用 **Ctrl+W** 关闭页签;

    *   还可以透过 **Ctrl+Tab** 切换页签;

    *   **Alt+F4**：关闭所有页签

    *   **Alt+Shift+1**：开启cmd.exe

    *   **Alt+Shift+2**：开启powershell.exe

    *   **Alt+Shift+3**：开启powershell.exe (系统管理员权限)

    *   **Ctrl+1**：快速切换到第1个页签

    *   **Ctrl+n**：快速切换到第n个页签( n值无上限)

    *   **Alt + enter**： 切换到全屏状态；

    *   **Ctr+r** 历史命令搜索;

    *   **End, Home, Ctrl** : Traversing text with as usual on Windows

2.  可在视窗内搜寻画面上出现过的任意关键字。

3.  新增页签按钮，可透过滑鼠新增页签。

4.  切换页签按钮，可透过滑鼠切换页签。

5.  锁定视窗，让视窗无法再输入。

6.  切换视窗是否提供卷轴功能，启动时可查询之前显示过的内容。

7.  按下滑鼠左键可开启系统选单，滑鼠右键可开启工具选项视窗。 Win+Alt+P ：开启工具选项视窗

## 常用配置

### 启动Cmder

1.  把 `cmder` 加到环境变量
    可以把`Cmder.exe`存放的目录添加到系统环境变量；加完之后,`Win+r`一下,输入`cmder`即可打开。

2.  添加 `cmder` 到右键菜单
    上一步的把 **cmder** 加到环境变量就是为此服务的

```
// 以系统管理员权限打开cmd窗口，输入以下代码，回车即可。
Cmder.exe /REGISTER ALL
```

### 中文乱码问题

依次打开`settings` --> `startup` --> `environment`，添加以下代码，以解决中文乱码问题。
```
set LANG=zh_CN.UTF8
```

### 设置打开时的默认目录

打开设置
选择`Startup-Task`，修改`{cmd::Cmder}`项，把:
```
*cmd /k "%ConEmuDir%\..\init.bat"  -new_console:d:%USERPROFILE%
```
修改成:
```
cmd /k "%ConEmuDir%\..\init.bat"  -new_console:d:E:\
```

重启 `cmder` 之后就可以看到直接已经进入了刚刚设置的 `E:\` 目录。

### 修改命令提示符号 λ

`Cmder`预设的命列列提示符号是`λ`;如果用着不习惯，可以将这个字元改成`Mac / Linux`环境下常见的`$`符号，具体操作如下：

编辑`Cmder`安装目录下的`vendor\init.bat`批处理文件(min版本15行)，把：

```
@prompt $E[1;32;40m$P$S{git}{hg}$S$_$E[1;30;40m {lamb} $S$E[0m
```
修改成以下即可：
```
@prompt $E[1;32;40m$P$S{git}{hg}$S$_$E[1;30;40m $$ $S$E[0m
```
这个亲测在`cmder.exe`可以，但在`PowerShell.exe`需要另行设置:

打开文件`config/cmder.lua`（prompt.lua也有版本是这个），将第二行中的`λ`修改为Linux下常用的`$`即可。