css3的样式属性；display: flexjustify-content: space-between两端对齐。低版本浏览器不支持。

可以用左右浮动实现（float:left&right）。

传统的布局方案是基于盒模型，依赖于display:block和float+position，但是对于一些特殊的布局来说就不是很方便，如在盒模型中垂直居中。

2009年W3C提出一种新的布局方案，flex弹性盒布局，目前兼容的浏览器有chrome opera IE Firefox Sifari 

flex兼容浏览器版本

但是在未来flex布局将会成为布局的首选方案。

flex是flexinle BOX的缩写。意思是弹性布局，用来为盒模型提供最大的灵活性。    任何一个容器（标签）都可以指定为flex布局。用display:flex；

如果给容器设置flex的时候当前容器内子元素的float,clear,vericla-align都将会失效

flex的基本概念

容器默认存在两根轴：水平的主轴（main axis）和垂直交叉轴（cross axis）.主轴的开始位置（与边框的交叉点）叫做main start, 结束位置叫做main end 交叉轴的开始位置叫做cross start ,结束位置叫做cross end.项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴叫做cross size.

如果给一个元素设置为flex后，这个元素就会作为子元素的flex容器。通过给容器设置属性来改变里面子元素的位置。

二

首先要给父元素添加display:flex；将父元素转化为弹性盒

2.用flex-direction来改变盒子里元素的位置

row 默认在一行内排列（从左向右）

row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。）

column ：纵向排列。

column-reverse：反转纵向排列，从下往上排，最后一项排在最上面

3.内容对齐（justify-content）属性应用在 弹性容器 上，把弹性项沿着弹性容器的主轴线（main axis）对齐

justify-content：flex-start 默认，左对齐（图1）

justify-content:flex-end 右对齐（图2）

justify-content:center 居中对齐（图3）

justify-content:space-between 两端对齐，中间自动分配

justify-content:space-around 自动分配距离

主轴对齐方式

4.align-items（交叉轴对齐方式）

flex-start：顶端对齐

flex-end：底对齐

center：垂直居中对齐

baseline：项目内文本的底线对齐

stretch  默认值    项目的高度自适应容器（注：子元素不能设置高）

交叉轴对齐方式

5.flex-wrap

该属性控制flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。

  nowrap：flex容器为单行。该情况下flex子项可能会溢出容器

  wrap：flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行

  wrap-reverse：反转 wrap 排列。

图1（nowrap）注意如果父元素盒设置宽度会自动缩子元素容器宽度

图2（wrap）

图3（warp-reverse）

容器单行或者多行方式

 6、align-content（行与行之间对齐方式）

当伸缩容器的侧轴还有多余空间时，本属性可以用来调整「伸缩行」在伸缩容器里的对齐方式，这与调整伸缩项目在主轴上对齐方式的 <‘ justify-content’>属性类似。 注：本属性在只有一行的伸缩容器上没有效果。

flex-start没有行间距

flex-end底对齐没有行间距

center居中没有行间距

space-between两端对齐，中间自动分配

space-around自动分配距离

最常见的字体调整

当我们需要对我们的字体类型修改时，需要指定字库。

按照给定的字库顺序依次寻找，直到找到存在的某一个字库，并且应用。如果给定的字库都在计算机的字体库中查询不到，则会使用默认字库，通常是Time New Roman，中文是宋体。

字库名称有空格时需要用引号引用，以示完整。

当我们需要的字体很大几率在客户机中不存在，则可以使用提供的网络字库，使得网页可以按照期望的样式展示。

例如

字体的兼容写法

但是常规只需要 eot 和 woff 这两种就可以了

字体颜色是最常见的修饰方式，不同的字体颜色产生不同的视觉效果

色值可以从 颜色名对照表 中查找浏览器设定好的默认值，也可以用任意的色值方案 -- 十六进制 ， rgb ， hsl 提供色值或者带有 alpha 通道的 rgba ， hsla 设置半透明字体色彩。

可以使用像素单位( px )的字体字号，也可以使用磅值（pt），但是不会使用相对尺寸，em rem，因为在换算成像素时，小数部分将会使字体模糊

通常浏览器都有最小字体，在chrome中最小字号为 12px 以保证文本内容清晰显示

区间为 100 - 900 （100的整数倍）九档，常用的，默认值 normal =400 ，bold =800

我不知道为什么style叫斜体，但是它就是这么定义的，可能是风格吧倾斜风格。

在这个属性中有两种倾斜方式

该属性是一个复合属性，包括：

虽然我们可以同时设定上划线，下划线，贯穿线，但是却没办法 单独设置他们的样式颜色 ，尽管css3标准组织已经提出了 相关解决方案，遗憾的是大多数浏览器都是不支持的。

当我们想为文字外侧再套一层颜色时，就需要使用到文字描边。

该属性也是复合属性分为 text-stroke-color 描边颜色 和 text-stroke-width 描边厚度 两部分。

目前IE 和FF (40 以下) 版本不支持，其余浏览器需要添加内核前缀。

决定文字内容(主要是西方字体) 大写（ uppercase ）还是小写（ lowercase ）还是首字母大写（ capitalize ）的方式呈现

当你的大写字母比小写字母高出很多时，使用小型大写字母，将小写的内容转为大写字母来替代原有的大写字母内容。【仅针对小写字母】

这个元素将以内容文本为蓝本，从当前文本的下方产生文字投影。

这个属性一共有四个属性值，分别是

投影其实就是灯光照射到物体上产生的阴影，当不同角度的灯光照射进来时，产生了不同程度的投影。因此投影也是可以有多个的

这个属性其作用目的是修改内联块的排列方向，仅针对内联块（ inline-block ），默认是 ltr ( LEFT-TO-RIGHT )、 rtl (RIGHT-TO-LEFT)

看下面的效果

很神奇的发现，内联块1，2的显示顺序调换了，这是因为该属性修改的是内联块的展示方向，会依次从右向左排列，但是另一部分，三个内联元素排列顺序没有变化，是对的，但是没搞懂，为什么最后一个文本内容末尾的符号会被提升到前面去，不应该跟随在文字后面么 这不知道是一个 “BUG” 还是别出心裁的设计。

但是我们想象一下民国时期，从右向左书写方式，这时候需要用到文本的写作方向来调整了

这个属性需要配合上面的direction一起使用才可以生效

在现代计算机应用中，最常用来处理双向文字的算法是Unicode 双向算法（Unicode Bidirectional Algorithm），简称为 bidi 算法。而unicode字符本身分为强字符、中性字符、弱字符

Web中控制文字方向的方式有三种：

具体关于 字符方向的， 这里有解答

但是还是不理解上述所说的，末尾符号问题。

当设置为垂直书写方式时，块元素的宽度将会以content的宽度为准，如果需要设置宽度则需要显示的给出。该属性可被继承

很多时候，我们需要保留文内空白符，通常比较傻的情况就是用 这个html语义字符替代，其实css本身就提供了我们对空白符的处理，何必傻兮兮的去替换。

pre 预先使用等宽字体显示格式化文本，不合并空白，文字超出边界时不换行

pre-wrap 不合并空白，和边界发生碰撞时折行

pre-line 保持文本换行，但是不保留空白，边界碰撞时换行

nowrap 不换行，不保留空白，直到文本结束或者遇到 <br/>

当我们开启了空白符时，这是可以设定tab-size的尺寸，在一般的编辑器中，一个tab等于4个space，默认也是如此，因此当我们调整tab与space互转时，就可以用到了。

对于英文等拉丁文，有时长单词会超出边界。这是因为单词被视为整体，不允许折行。这时候就会产生比较大的问题--布局撑破。尽管很少情况下会遇到，这时，我们使用 break-all 强制换行，即使单词是整体，也会被折行显示，满足布局需要。

对于中文，如果不想换行可以使用 keep-all ，就表现的和英文单词一致，是不会折行的。

IE下定入标准是word-wrap，被W3C组织收编之后修改为overflow-wrap，本质还是不变的。

设定超过边界时换行，以获得更好的展示效果。中英文混排时，会从中英文边界换行。

比较常用的文本对齐是 left right center，css3中新增justify两端对齐。但是justify不会处理最后一行和第一行。（单独一行是第一行也是最后一行）

新增的start和end 对齐方式依赖于direction设定的方向，即文档的开始方向。start表示向文档开始方向对齐，因此direction:rtl时，表现与left right表现相反。

而match-parent 匹配父级，当匹配父级的start或者end时，基于父级的direction计算得到结果，而inherit则没有限定。

justify-all，同时处理行和行尾的两端对齐，但是并未得到支持。因此还是使用下面的方式最为稳妥。

当设定了文本的两端对齐后，需要对两端对齐方式进行设定，然而目前并没有浏览器支持。所以先放弃

说白话就是一个空格有多宽。

就是字母跟字母间的间隔，当然中文也可以

设定段首缩进像素，然而这个属性只针对块元素和行内块。毕竟内联元素的自己也做不了主。

*## 行高 line-height

行高，即字体最底端与字体内部顶端之间的距离

垂直对齐就是基于行高和基准线的对齐方式。有baseline 基准线 sub 上标 super 下标

top 元素顶端与行内元素 最高 的 顶端 对齐

bottom 元素的顶端与行中 最低 的元素的 顶端 对齐

middle 把此元素放置在父元素的中部

text-top 把元素的顶端与父元素字体的顶端对齐

text-bottom 把元素的底端与父元素字体的底端对齐