CSS开发笔记（一）

一.OUTLOOK是按照word的方式解析的，很多样式，标签都不支持，不支持内部样式表，所以只能写内联，等等。
1.outlook支持传统的table 布局，不支持浮动，定位布局。所以要当做table进行布局，<table></table>作为布局容器。
2.调整table列宽，可能需要内联样式。并且列宽会受word-break影。
项目中某列数据有很长的数字和字符，导致列宽不生效。
原因：浏览器对于数字和字符，默认不换行，需要设置word-break属性。

二.word-break 属性【规定自动换行的处理方法】
normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。

三.white-space属性【保持表格内容，空格和换行等格式】
white-space 属性设置如何处理元素内的空白：
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap 保留空白符序列，但是正常地进行换行。
pre-line 合并空白符序列，但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。

 四.页面不能出现滚动条，考虑overflow属性是否设置为了hidden。

 五.element-table,height与max-height
   1.在表格高度方面，容器可以给一个height：100%，使用vh会变形，vh,vw可视化高度和宽度，100vh表示100%的可视化高度。
   2.element table中，height和max-height，接收的是字符串和数字类型，calc()等都不识别，calc()两个计算单位，之间需要有空格，才可以生效。
   3.在调整统一样式需要统一考虑padding、margin、top、height等。
   4.在对其图标等，可以使用相对定位，用top等调整。
   5.在调整元素时，对于元素的宽高需要选中查看是否挡住其他元素。
   6.使用Less语法，来写样式。

 

参考链接： outLook邮件样式问题：https://www.cnblogs.com/GoTing/p/7857175.html;