Display 属性

每个元素都有一个默认的 display 值, 这个与元素的类型有关.

大部分元素他们的 display 默认为 blcok 或 inline .

一个 blcok 元素通常称为 块级元素 , 一个 inline 元素通常称为 行内元素 .

Block

一个 Block 元素会从新开始一行并盛满容器的宽度, 默认为 blcok 的元素有 p, form, header, footer, section等.

Inline

一个 inline元素可以位于段落中, 包裹一些文字而不会打乱段落的布局.

None

一些特殊元素的默认 display 是他, 例如 script. 用于不删除元素的情况下隐藏某些元素.

和 visibility 不同, display: none不会在文档流中占据空间, 但是 visibility: hidden 则会在文档流中占据空间.

inline-blcok

inline 元素是可以位于段落内不导致换行的, 但是不可控制 height, width 属性

block 元素独立成段, 但是可以控制 height, width 属性

inline-block 元素可以位于段落中, 且独立控制 height, width 属性

注意事项:

  • vertical-align属性会影响到inline-block元素, 你可能会把他的值设置为 top
  • 需要设置每一个 inline-block 的宽度
  • 在 HTML 代码中如果两个inline-block代码中有空格, 则实际排版中会出现空隙

Margin: auto

设置 Block 元素的 width 属性可以组织他水平方向占据容器, 同时设置 margin: 0 auto; 可以令其居中显示.

Box-sizing

box-sizing: border-box; 设置该元素的盒子尺寸为 border 的外尺寸

.simple{
  width:500px;
  margin: 20px auto;
  padding: 20px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
// simple 的  width 为 border+padding+content 的尺寸, 即元素的 border 整体宽度为 width
`</pre>

## Position

### static

`position`默认为 `static` , 一个 `static`元素不会被"positioned", 一个`position` 被设置为其他值的元素表示他会被"positioned".

### relative

对`position:relativ`的元素设置 `top, bottom, left, right`属性可以使其偏离原有位置, 但是在文档流中占据原来的位置, 即偏离前的空间在文档流中作为其他元素的位置参考.

### fixed

一个`fixed` 元素会相对 window 定位, 即使页面滚动, 他在的浏览器中的位置也不会变化. `fixed` 元素不占据文档流.

### absolute

`absolute` 和 `fixed` 表现类似, 只是参考系变为最近的"positioned" 父级元素, 如果不存在这样的父级元素, 则以 body 元素为参考.

### float

### clear

用于控制悬浮.

<pre>`&lt;div class='box'&gt;...&lt;/div&gt;
&lt;section class='after-box'&gt;...&lt;/section&gt;

.box{
  float:left;
  width: 200px;
  height: 100px;
  margin: 1em;
}
.after-box{
  clear: left // 控制该元素左侧无浮动元素
}
`</pre>

## 控制浮动

使用浮动经常会遇到一些古怪的排版

<pre>`&lt;div class='clearfix'&gt;
文字描述
&lt;img src='http://zh.learnlayout.com/images/ilta.png'&gt;
&lt;/div&gt;

.img{
  float:right;
}
.clearfix{
  overflow: auto; // 扩大 div 阻止 img 溢出
}
`</pre>

## 媒体查询

<pre>`@media screen and (min-width:600px){
  nav{
    float:left;
    width:25%;
  }
  section{
    margin-left:25%;
  }
}
@media screen and (max-width:599px){
  nav li{
    display: inline;
  }
}
`</pre>

## Column

<pre>`.three-column{
  padding:1em;
  -moz-column-count: 3;
  -moz-column-gap: 1em;
  -webkit-column-count: 3;
  -webkit-column-gap: 1em;
  column-count: 3;
  column-gap: 1em;
}
`</pre>

实现 div 中三列布局

## Flexbox

<pre>`.container{
  display:-webkit-flex;
  display:flex;
}
nav{
  width:200px;
}
.flex-column{
  -webkit-flex:1;//剩余宽度的100%
          flex:1;
}
`</pre>

### 使用  flex box 实现(vertical-container 内元素)垂直居中

<pre>`.vertical-container{
  height:300px;
  display:-webkit-flex;
  display:flex;
  -webkit-align-items: center;
         -align-items: center;
  -webkti-justify-content: center;
         -justify-content: center;
}