css一些小技巧收集(未完待续)


1、去除谷歌浏览器默认的自动完成的淡黄色背景
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}


2、在火狐浏览器下禁止用户选择文字

-moz-user-select:none;

3、outline: none;去除边框边缘外围突出的线

4、background-origin: border|paddding|content

   border: 从border区域开始显示背景

   padding: 从padding区域开始显示背景

   content: 从content区域开始显示背景

5、关于上下边距叠加

  5.1、对于块级元素,未浮动的垂直相邻元素的上边界和下边界会被压缩

  5.2、对于浮动元素,边界不压缩,且若浮动元素不声明宽度,则其宽度趋向于0

6、css简化,颜色缩写

  类似于 : #000000 可缩写为 #000

            #00ff00 可缩写为 #0f0
7、文字超出宽度显示省略号
  .overtext {
   width: 100px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
  }
8、解决ie下点击a链接出现虚框
 a:focus {
   outline: none;
  }
9、有时候,在同一行的文字,由于采用字体种类不一样,或修饰样式不一样,而导致其字体尺寸,即显示大小不一样
   整行文字看起来就显得杂乱。此时需要使用css3的属性标签font-size-adjust.
  font-size-adjust: number//为字体序列中的所有字体强迫指定同一尺寸
10、关于margin的设置
 10.1、行内元素的margin设置
    行内元素的margin是两个元素margin之和
 10.2、块级元素之间的margin设置
     设置块级元素之间的上下margin会出现叠加,左右margin不会。
     两个换行块级元素之间的距离不再是margin-bottom和margin-top的和,而是两者中的较大者。
 10.3、父子块之间的margin设置
    当一个div块包含在另一个div块中间时,二者便会形成一个典型的父子关系。其中子块的margin设置
    将会以父块的content为参考。


 
 
 
 


你可能感兴趣的:(css一些小技巧收集(未完待续))