学习笔记

2019独角兽企业重金招聘Python工程师标准>>>

1、 当浏览器缩小的时候，head部分和重复的背景部分没有填满父容器 .head{min-width:1028px} .repeat{background: url(../images/bb.png) repeat-x;min-width:1028px;height:38px;z-index: 100;position: relative;top:734px}

这里面的1028是所切图的中间的宽度，这样缩小的时候就不会出现错位问题

2、 2.1学习css3 因为在PC端为了兼容IE，比如阴影会采用切图的方式（因为IE8等不支持box-shadow）， 但是touch端不会有这种问题，所以很多时候还是要用css3去写，而不是整块的切图

2.2

PC端：<ul><li> <span></span><span></span></li></ul>里面的span高度不一样的时候，

不使用浮动的时候能实现底部在一条线上的左对齐；

使用浮动，并且添加一样height和line-height能实现垂直居中。

但是touch端，在添加了公共样式以后，如果使用了浮动，li就无法被撑开

比如：引入了公共样式<link rel="stylesheet" href="http://css.40017.cn/cn/min/??/cn/f/touch/Style/public/base.wxcard.1.0.css?v=20141210164002" /> 那么如果<ul><li> <span></span><span></span></li></ul>里面的span使用了浮动，li就没有了高度 所以不适合用这种结构，touch端的垂直居中，建议使用单行表格；

2.3、内部元素超过了父元素，可以使用相对定位，设置top为负值，而不要使用负的margin；

2.4、层定位： .title{position:relative;width: 1010px;height: 55px;background: #914820;margin: 0 auto;padding:6px 0 0 10px;color: #fff} .title .arrow-left{background:url(../images/arrow.png) no-repeat 0 0;width: 10px;height: 10px;position: absolute;bottom: -9px;left:0px;z-index: 100} .title .arrow-right{background:url(../images/arrow.png) no-repeat -37px 0px;width: 10px;height: 10px;position: absolute;bottom: -9px;right:0px;z-index: 100}：

将角作为子元素并设置负的bottom值，而不是添加一个大的父容器，将角和title作为同级元素相对于父容器定位。

2.5 touch端，背景图片被切散的时候： topic>img { width: 100%; height: auto; margin: 0; padding: 0; vertical-align: top; //能够去掉img之前的缝隙

转载于:https://my.oschina.net/u/933915/blog/375824