css基本样式

复合属性按复合顺序排列 all-direction表示所有方位（顺序为top、right、bottom、left） 如非必要，忽略inherit、initial、unset

• 盒子样式

笔记：

• 盒子属性中，border还有分开写的属性：

• box-sizing有两个属性值：border-box和content-box，分别表示border限定的盒子大小不变（自动改变元素内容盒子大小来适应）和表示元素内容盒子大小不变。
• 设置box-shadow，要明白默认阴影大小和元素大小一致；模糊半径和border-radius很像，把阴影圆角模糊；spread是在默认阴影下叠加阴影；inset是将阴影反转，改为内嵌。

• 文本样式

笔记：

• letter-spacing和word-spacing用于处理间距
• text-align有justify属性值，表示两端对齐，这时，可以用text-justify来设置两端对齐的处理方式
• text-shadow和box-shadow是相似的，区别仅仅在于text-shadow没有spread和inset属性值
• 一行显示不完文本，末尾添加省略号显示的方法：

.ellipsis{
    white-space: nowrap; /*不换行*/
    overflow: hidden; /*溢出隐藏*/
    text-overflow: ellipsis; /*溢出文本显示省略号*/
}

• 表格样式

笔记：

• 表格标题可以放置在上下两个位置
• border-collapse的属性值是collapse和separate，分别表示合并和分离

• 表单样式

笔记：

• appearance是用户外观样式，它可以选择让标签看起来像按钮、图标等，有兼容性问题，需要加前缀，而且一般用在移动端。
• outline一般指input输入框聚焦时显示的轮廓，设置和border类型，仅仅是复合顺序不同。

• 列表样式

笔记：

• 一般会使用list-style:none让list的标记消失。
• list-style-position有两个属性值，分别是inside和outside(默认),inside的话，列表会被填充更多的右padding-start，让其整体右移，像缩进去一样。

• 背景样式

笔记

• background的position和size都有二个值，水平值和垂直值。当第一个值（水平值确定）而垂直值不定时，垂直值为auto。
• background的size还可以设置单值，属性值为cover和contain。
• background的position有x和y是复合属性，而size不是。
• background的origin和clip的属性值都是content-box、padding-box和border-box
• background-attachment的属性值是scroll和fixed
• background可以设置多个背景图像及背景图片相关属性(ie8及以下不兼容)：

  .muti-bg-img{
    background-image: url(./bg1.jpg), url(./bg2.jpg); 
    background-position: left top, center center;
    background-repeat: repeat-x, no-repeat;
    background-attachment: fixed, scroll;
  }
  

  等价于:

  .muti-bg-img{
    background: url(./bg1.jpg) left top repeat-x fixed, url(./bg2.jpg) center center no-repeat scroll;
  }
  

• 布局样式

1.浮动

笔记：

• 浮动脱离文档流，不会撑开容器高度，不过可以使用清浮动解决。
• 清浮动样式：

/* 使用伪子类clear清浮动 */
.clearfix::after{
    content: "",
    display: block;
    clear: both;
}
/* 生成BFC清浮动 */
.overfw-bfc{
    overflow: hidden;
}

2.定位

笔记：

• relative相对自身定位，不脱离文档流，占据原来的空间
• absolute相对最近的非static定位的父元素定位，脱离文档流。与浮动不同的是，没有类似清浮动的方法可以使容器高度自适应。
• fixed相对浏览器可视窗口定位
• z-index表示层号，数值大的覆盖数值小的。

• 元素类型和显示

笔记：

• display:none和visibility:hidden的区别是前者脱离页面dom树，而后者没有，而且占据空间，影响布局。
• visibilty的hidden和collapse的区别是前者占据空间影响布局，后者会被中下一行元素覆盖，不影响布局

• 弹性盒子

容器：

项目：

笔记：

• 空间是否剩余和是否不足，由容器大小和项目的basis决定
• grow是剩余空间的划分比例，shrink是空间不足时项目的缩小比例
• 除了空间不足换行，align-seif导致项目与其它项目的交叉轴对齐方式不同，也会出现多行样式
• align-items和align-content的区别在于单行控制和多行控制 demo
• 参考http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html