怪异盒模型、媒体查询、css3多列、解决iOS回弹

CSS怪异盒子模型

 

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素

 

content-box 

这是由 CSS2.1 规定的宽度高度行为。 宽度和高度分别应用到元素的内容框。 在宽度和高度之外绘制元素的内边距和边框。 

 

border-box 

为元素设定的宽度和高度决定了元素的边框盒。 就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

 

 

 

媒体查询

 

@media only screen and (min-width: 340px) {        
    body{    background: #ff0;    } 
} 
 
@media only screen and (min-width: 340px) and (max-width: 640px) {         
    body{    background: #f00;    } 
} 
 
@media only screen and (min-width: 640px) and (max-width: 740px) {         
    body{    background: #0f0;    } 
}

 

 

 

 

CSS3 多列

 

column-count

说明：     

属性规定元素应该被分隔的列数 

 

column-gap 

说明：     

属性规定列之间的间隔大小 

 

column-rule 

说明：     

设置或检索对象的列与列之间的边框。复合属性。 c

 

olumn-fill 

说明：     

设置或检索对象所有列的高度是否统一

 

column-span

说明：     

设置或检索对象元素是否横跨所有列。 

 

column-width 

说明：     

设置或检索对象每列的宽度 

 

columns 

说明：     

设置或检索对象的列数和每列的宽度。 

复合属性     <' column-width '> || <' column-count '> 

注释： Internet Explorer 10 和 Opera 支持多列属性。 Firefox 需要前缀 -moz-。 Chrome 和 Safari 需要前缀 -webkit-。

 

解决IOS滚动回弹

 

-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果.

 

auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。 

 

touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。