CSS怪异盒子模型
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素
content-box
这是由 CSS2.1 规定的宽度高度行为。 宽度和高度分别应用到元素的内容框。 在宽度和高度之外绘制元素的内边距和边框。
border-box
为元素设定的宽度和高度决定了元素的边框盒。 就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
![](file:///C:/Users/饶迈平/AppData/Local/Temp/enhtmlclip/Image(21).png)
![](file:///C:/Users/饶迈平/AppData/Local/Temp/enhtmlclip/Image(22).png)
媒体查询
@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; } }
![](file:///C:/Users/饶迈平/AppData/Local/Temp/enhtmlclip/Image(23).png)
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: 使用具有回弹效果的滚动, 当手指从触摸屏上移开,内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。