最近写网页，写到了图文混排的部分，想了想自己也不是很熟悉，快遗忘的差不多了，就想写篇博客，写代码的同时，敲下注意点，供自己日后，也让大家参考。
CSS样式
display
display-flex
是一个弹性盒子，在容器上的属性有六个
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-item
- align-content
因为我使用的是align-item这个属性，就稍微说一下自己的理解
align-item属性：定义在盒子的对齐方式（或者说在盒子里面的位置）
.box{
display:flex;
align-item:flex-star|flex-end|center|baseline|stretch;
}
- flex-star:起点对齐
- flex-end:终点对齐
- center：中间对齐
- baseline:项目第一行文字的基线对齐
- stretch(默认值):如果图片未设置高度或者设置成auto，将自动占满整个容器的高度
display:inline-block
常见的属性值有三个，inline ，block ，inline-block
- inline:
1. 让元素变成行内元素，拥有行内元素的特性，可以跟其他行内元素共占一行；
2. 不能更改元素的height，width的值，内容由大小撑开；
3. 可以使用padding ，margin产生的left和right产生边距效果，但是top和bottom不能产生上下边距效果。 - block：
1. 使元素变成块级元素，独占一行。在默认情况下，会继承父级元素的宽度；
2. 可以改变height和width的值；
3. 可以设置padding和margin的各个属性值，四个都能产生边距效果。 - inline-block
1. 结合了inline和block的一些特点，即上述inline的第一个特点和block的第2、3个特点；
2. 就是不占一行的块级元素；
但是display：inline-block跟浮动有不同之处；使用float会使元素脱离文本流，而inline-block不会；而且使用inline-block会比较整齐。
水平排列使用inline-block，而需要文字环绕的时候，float就比较好。
text-transform
text-tranform : none | capitalize | uppercase | lowercase | full-width
默认值是none ，就是不添加样式
适用于所有元素，有继承性。
- none : 无转换
- capitalize ：将每个单词的第一个字母转换成大写
- uppercase ：将每个单词转换成大写
- lowercase ：将每个单词转换成小写
- full-width：将所有字符转换成fullwidth形式。如果字符没有相应的fullwidth形式，将保留原样。
最后说一下光标，图文混排鼠标点击的时候，会根据需求，选择小手指，十字线等等光标。就记一下常遇到的几个
cursor属性
cursor : url | default | auto | crosshair | pointer | text | wait
- url : 使用自定义光标的URL。注释：请在末尾始终定义一个普通光标，以防没有URL定义的可用光标
- default ：默认光标（通常是一个箭头）
- auto ：默认（浏览器设置的光标）
- crosshair ：光标呈十字线
- pointer ：光标呈指示链接的指针（一只小手）
- text ：指示文本
- wait ：表示程序正忙（通常是一个沙漏或秒表）
目前我所注意到的注意点就这些，以后还会有补充，希望对大家有所帮助
