css3
文章平均质量分 55
chanda_yang
这个作者很懒,什么都没留下…
展开
-
word-break/word-wrap
word-break让文本自动换行 normal 使用浏览器默认换行规则 对于西方文字来说,浏览器会在半角空格或连字符的地方自动换行,而不会在单词的当中突然换行。 对于中文来说,可以在任何一个中文字后面进行换行。 如果中文当中含有西方文字,浏览器也会在半角空格或连字符的地方进行换行,而不会在单词中间强制换行。原创 2016-08-22 08:57:24 · 312 阅读 · 0 评论 -
文字出现…
overflow:hidden text-overflow:ellipsis; white-space:nowrap;原创 2016-08-22 09:25:39 · 170 阅读 · 0 评论 -
box-sizing
content-box padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和,即 ( Element width = width + border + padding )此属性表现为标准模式下的盒模型 border-box padding和border被包含在定义的width和height之内。对原创 2016-08-22 09:27:43 · 147 阅读 · 0 评论 -
background
background-clip:border|padding|content 该属性指定了背景在哪些区域可以显示,但与背景开始绘制的位置无关,背景的绘制的位置可以出现在不显示背景的区域,这时就相当于背景图片被不显示背景的区域裁剪了一部分一样。 background-origin:padding|border|content 该属性指定了背景从哪个区域(边框、补白或内容)开始绘制,但也仅仅能控原创 2016-08-22 09:46:17 · 186 阅读 · 0 评论 -
css3动画
Tansitions支持从一个属性值平滑过渡到另一个属性值 transition:property duation timing-function transition-delay 缺点是:只能指定属性的开始值和终点值,然后在这两个属性之间实现平滑过渡,不能实现更为复杂的动画效果 Animations支持通过关键帧的指定来在页面上产生更复杂的动画效果 div {原创 2016-08-22 10:02:13 · 206 阅读 · 0 评论 -
多栏布局与盒布局
使用float和position属性的缺点:两个div是独立的,一旦某一个div添加一些内容,就会出现空白区域,两个元素的底部不能对齐 使用column-count进行多栏布局 div { -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari 和 Chrome */ column-count:3; } 与原创 2016-08-22 13:09:09 · 325 阅读 · 0 评论 -
媒体查询
@media screen and (min-width:639px) @media only screen and (max-width: 500px) { .gridmenu { width:100%; } .gridmain { width:100%; } .gridright {原创 2016-08-22 13:15:27 · 265 阅读 · 0 评论 -
GPU加速will-change
如果你注意到在webkit的浏览器上“flicker”一些CSS操作(尤其是变形和动画方面的)的表现,你很可能之前就注意过硬件加速了 CPU、GPU和硬件加速 硬件加速意味着Graphics Processing Unit(GPU)会通过代替Central Processing Unit (CPU)做一些负荷比较大的事情,来协助浏览器快速渲染页面,当CSS操作使用硬件加速的时候,通转载 2016-09-02 15:38:36 · 459 阅读 · 0 评论