前端的一些小点

一、精灵图

　　1、使用方法 

　　　　　　1）看是几倍图（X几倍），  在开发的时候就恢复成X1倍。

　　　　　　2） 等倍放大精灵图，

　　　　　　3）定位需要的元素图片的左上角.

　　2、CSS代码示例

　　　　　　(x,y为左上角坐标,第一点获取的地址)

　　　　　　background:url地址 no-repeat -x -y  

　　　　　　background-size: x auto

二、CSS3 的一些问题：

　　1、css3的行高是包括边框的，所以字行高需要减掉上下边框 ，才能行居中

　　2、经验之谈： 

　　　　　　1) 如果元素上边的是用绝对定位，那么他就不占空间大小，下面如果有元素会顶上去

　　　　　　　　为了避免这种情况，下边用的元素 需要设置padding-top = 上边元素所占的高度

　　　　　　2) list 样式不占一般需要去除样式：　　　　　　　　　　

　　　　　　　　　　ul {list-style: none}   去点

　　　　　　　　　　magin 0 padding 0　　去除缩进

　　　　　　3）列表class样式

　　　　　　　　当我们ul下有很多li 的时候，想对每个li 进行特殊设置。就很烦，每个li要设置一个class吗？

　　　　　　　　可以设置一样的前缀，后面带上特殊编号 例如：class="local-nav-iconx"　　　　(x 可以是1、2、3或其他)

　　　　　　　　然后我们在css 中就这么设置　　　　　　li [class^=local-nav-icon]{  设置全部li的样式 }

　　　　　　　　　　　　　　　　　　　　　　　　　　　li .local-nav-icon2 {设置第二个li 的样式}

　　　　　　　　　　　　　　　　　　　　　　　　　　或是 ul li:nth-child(x){也行}

　　　　　　4） nth-child的笔记

　　　　　　　　　　nth-child(-n+2)   代表选择前两个

　　　　　　　　　　nth-child(n+2)   代表选择前三个

　　　　　　　　　　nth-child(x)　　选择第x个

　　　　　　5）文字阴影　　　

　　　　　　　　　　text-shadow: 1px 1px yellowgreen;

　　　　　　6) 去除边框

　　　　　　　　　border :0　　　

　　　　　　7) 颜色渐变

　　　　　　　　　　前提知识：

　　　　　　　　　　　　-moz代表baifirefox浏览器私有属性，du-ms代表ie浏览器私有属性，-webkit代表safari、chrome私有属性。

　　　　　　　　　　　　可能有兼容问题 需要在前面加上 -webkit-

　　　　　　　　　　　　现在比较流行的一个概念就是：不太关键的样式，可以不考虑兼bai，比如圆角，并不影响duzhi的显示，如果客户浏览器太旧，就让他看到旧的方形效果就是，一定要看到新效果，只能建议客户升级浏览器。

　　　　　　　　　　　　background: -webkit-linear-gradient(left,red,blue)   左边开始，从左到右是红色渐变到蓝色

　　　　　　8）定位问题

　　　　　　　　　　子绝对定位，那么父亲就应该是相对定位 

　　　　　　　　　　　　　　因为默认以整个文档为父元素，这样做子元素不会直接飘到天边，限制住了~

　　　　　　9） 伪元素

　　　　　　　　　　::before 和::after  在某某标签前面或者后面加上 样式 

　　　　　　　　　　比如    >  就是这样来的

　　　　　　　　　　.xx:: after {　　　　　　　　

　　　　　　　　　　content: "";
　　　　　　　　　　　　position: absolute;
　　　　　　　　　　　　top: 7px;
　　　　　　　　　　　　right: 7px;
　　　　　　　　　　　　height: 15px;
　　　　　　　　　　　　 15px;
　　　　　　　　　　　　border-top:solid black 2px;
　　　　　　　　　　　　border-right:solid black 2px ;}
　　　　　　　　　　　　　　




　　　　　　10) 旋转
　　　　　　　　　　transform:rotate(45deg)   旋转角度

　　　　　　11）如何实现flex 上下布局 实现图片上 字体下
　　　　　　　　　　原本flex是默认主轴是x 那么样式就是 图片左  字体右
　　　　　　　　　　把 主轴设置为Y轴，那么图片上 字体下  但是格式不居中
　　　　　　　　　　因为其实这个算一行，所以用到 align-items: center;

　　　　　　12) 如何把标签影藏起来
　　　　　　　　　　
　　　　　　　　　　{display :none}