2019.5.5（移动端页面）

　　1、页面的整体框架大小min-width: 300px~max-width: 560px；

　　2、具体大小单位用px；

　　3、网页布局用div不是table，在特殊情况，如内容是表格形式的就用table，因为table加载慢，它是整体出现，而不能预加载。

　　4、页面内容在水平面上可以设定具体高度，以防页面在伸缩情况会出现上下布局错乱。

　　5、设置具体的图片时，可以设置具体width，而不同图片的height不一样，可以设定具体的高度，在为了统一页面布局情况下，添加overflow：hidden，超出自动剪裁。

　　 6、记得给各个容器设置最小宽度（min-width），以防在页面伸缩时出现布局错落情况。

2019.5.8（pc端）

1、图片的适应

　　图片是网页不可缺少的组成部分，而同一个位置的图片大小不一定总相等，要保证整体布局整齐可：将img放入一个div中，该div设定好width、height，而图片的width或height设定100%，height或width则auto。如果各图片水平位置上width一样，则width为100%，而height：auto。如果只是高度一样，则height：100%，而width：auto。

2、关于文字段落

　　文字的长度不一定是固定好的，应该给文字段落设定好一个width和height，当p的长度超过是则省略，

当行数属性可以是width:300px; height: 20px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden。

多行属性：设定p所在容器的width、height、line-height、overflow:hidden。

3、关于水平排列元素问题

　　因为各个浏览器会存在1~2px像素的误差，对于水平分布，使用float: left属性可以很好排列，不同浏览器出现错乱的情况少，对于最右边不能完全靠边，可以使最右元素float: right。

4、对于水平排列上，容器是内行元素，如a标签、

　　添加display: inline-block，使元素变成可行内块元素可解决而坍塌问题。

5、关于背景图像取值问题

　　在服务器中，图片加载可能没那么快，对于多个图标背景，可以放在同一张背景图中，而相应图标的选择则可以使用background-position定位。

2019.5.9（打印模板）

　　1、关于table标签边框过大问题，在table中添加属性border-collapse: collapse属性，起边框合并作用。

　　2、在使用特殊字符代码(也可以到Word中去找)时，发现放在行内元素的一些字符代码形状会发生变化，而在块级元素中就正常显示，如：∧->

∧

。

　　3、表格不用 margin:0 auto、display: inline-block 样式。可以用float。表格的边线使用：table tr td { border: 1px solid #000 }

　　4、当打印模板时，一直看不到效果，就F12是不是有什么字段错了，如果字段不是双引号扩起的，也会不能查看效果。----耽误别人时间了

　　5、打印模板的话建议使用谷歌浏览器以外的浏览器，因为不用浏览器打印效果不一致，避免更多修改问题，一开始就用火狐吧，图片的显先给定具体的width，以百分比显示并不能正常预览。img{overflow:hidden;display:inline-block;width:100px;height:auto;max-height:100px;}

　　6、添加打印模板字段时，如{{定制图片}}这个字段要是还没有不要使用{{no 定制图片}}代替，会报错的。

2019.5.15

　　3、对于页面中，水平宽度是100%的容器，虽然设置了padding、margin左右值0值，但是在页面缩小时，水平容器在最右边是不靠浏览器最右的，可通过设置该容器的水平长度min-width：1200px即可。

　　4、容器四边阴影: box-shadow: -2px(左边)  0 3px red，2px(右边) 0 3px red， 0 -2px(上) 3px red， 0 2px(下)  3px  red——> x方向、y方向、模糊半径、阴影颜色。

　　5、利用float、position设置元素水平居中。在容器中，存在两个元素，一个最右位置，一个容器中水平居中；使用float让一个元素靠边，剩下居中的元素如果是块级元素，则在该元素中添加margin： 0 auto即可，因为float是脱离文档流的，块级元素会占据它的位置，也就是居中的长度是相对于整个容器的宽度来居中；而如果居中的元素是行内元素，居中效果可以通过在父容器中添加text_align:cener即可，但是，float没有脱离文本流，故行内元素不会占据本来float元素的位置，那么，居中的宽度其实是由容器的宽度减去float元素的宽度再进行居中的，所以在页面宽度较短中，能明显看到居中效果并没有很好达到。使用position：absolute进行居中，会完全脱离文档流和文本流，则无论是居中的元素是块级（该元素中添加margin: 0 auto）或行内元素（父元素添加text-align:center），均可到达相对于整个父容器居中的效果，就是这样代码量有点多….