图文混排的注意点

最近写网页，写到了图文混排的部分，想了想自己也不是很熟悉，快遗忘的差不多了，就想写篇博客，写代码的同时，敲下注意点，供自己日后，也让大家参考。

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 ：表示程序正忙（通常是一个沙漏或秒表）

目前我所注意到的注意点就这些，以后还会有补充，希望对大家有所帮助