随笔分类 -  CSS

css编程规范
摘要:写CSS的同学们往往会体会到,随着项目规模的增加,项目中的CSS代码也会越来越多,如果没有及时对CSS代码进行维护,CSS代码不断会越来越多。CSS代码交错复杂,像一张庞大的蜘蛛网分布在网站的各个位置,你不知道修改这行代码会有什么影响,所以如果有修改或增加新功能时,开发人员往往不敢去删除旧的冗余的代 阅读全文

posted @ 2017-07-21 10:48 _chuck 阅读(724) 评论(0) 推荐(0)

CSS clip:rect矩形剪裁功能及一些应用介绍
摘要:CSS中有一个属性叫做clip,为修剪,剪裁之意。配合其属性关键字rect可以实现元素的矩形裁剪效果。此属性安安稳稳地存在于CSS2.1中,且使用上基本上没有类似于max-height/display:table-cell等浏览器的兼容性问题。但是,貌似大家很少使用此属性。我总结了三点原因:首先是理 阅读全文

posted @ 2017-07-05 18:07 _chuck 阅读(438) 评论(0) 推荐(0)

CSS加载动画框架Loaders.css
摘要:Loaders.css是一款非常出色的加载动画框架,Loaders.css利用纯CSS可以实现很多种样式的Loading加载动画,这些动画并不需要图片来辅助,而是仅仅需要CSS即可实现,因此运行效率比较不错。 Loaders.css的特点 基于纯CSS,不需JavaScript脚本,也不需要图片,很 阅读全文

posted @ 2017-07-05 17:58 _chuck 阅读(2911) 评论(0) 推荐(0)

CSS3 @font-face属性
摘要:属性定义及使用说明 @font-face规则,网页设计师再也不必使用的"web-safe"的字体之一。 字体的名称,font - face规则: font-family: myFirstFont; 字体文件包含在您的服务器上的某个地方,参考CSS: src: url('Sansation_Light 阅读全文

posted @ 2017-07-04 18:28 _chuck 阅读(496) 评论(0) 推荐(0)

CSS -webkit-overflow-scrolling 属性
摘要:概述 -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果. 值 auto 使用普通滚动, 当手指从触摸屏上移开,滚动会立即停止。 touch 使用具有回弹效果的滚动, 当手指从触摸屏上移开,内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和 阅读全文

posted @ 2017-06-28 11:37 _chuck 阅读(1520) 评论(0) 推荐(0)

css pointer-events 属性
摘要:语法: pointer-events:auto | none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all 默认值:auto 适用于:所有元素 继承性:有 动画性:否 阅读全文

posted @ 2017-05-27 15:59 _chuck 阅读(631) 评论(0) 推荐(0)

解决img标签间距问题
摘要:vertical-align:middle 解释原因.... 阅读全文

posted @ 2017-05-11 16:23 _chuck 阅读(571) 评论(0) 推荐(0)

移动端设置 body 几个重要的css属性
摘要:取值: auto:文本大小根据设备尺寸进行调整。none:文本大小不会根据设备尺寸进行调整。<percentage>:用百分比来指定文本大小在设备尺寸不同的情况下如何调整。 说明: 检索或设置移动端页面中对象文本的大小调整。 该属性只在移动设备上生效; 如果你的页面没有定义meta viewport 阅读全文

posted @ 2017-04-25 11:54 _chuck 阅读(886) 评论(0) 推荐(0)

页面内容不足以铺满屏幕高度时,footer居底显示
摘要:在项目中常常会遇到这样的问题:页面主要内容不足以铺满一个屏幕的高度,footer下面就会有白块剩余。 现在要实现的效果就是,在主要内容不足以铺满整个屏幕的情况下,footer居于屏幕低部显示,使得整个页面占满屏幕。而当主要内容高度大于整个屏幕高度的时候,footer跟随主要内容进行显示; 方法一: 阅读全文

posted @ 2017-04-17 11:22 _chuck 阅读(3060) 评论(1) 推荐(0)

CSS box-shadow 属性
摘要:div{ width:200px; height:200px; border:1px solid #000066; margin:100px; background-color:#ccc; /* *向框添加一个或多个阴影,设置阴影元素的值 *box-shadow: h-shadow v-shadow 阅读全文

posted @ 2017-04-14 12:17 _chuck 阅读(304) 评论(0) 推荐(0)

CSS box-sizing 属性
摘要:定义和用法 box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。 例如,假如您需要并排放置两个带边框的框,可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中。 语法 这是由 CSS2.1 规定的宽度 阅读全文

posted @ 2017-04-12 18:40 _chuck 阅读(163) 评论(0) 推荐(0)

css 实现播放按钮
摘要:<a href="javascript:" title="重新播放" class="carton_button" >▶</a> 阅读全文

posted @ 2017-04-10 12:03 _chuck 阅读(2718) 评论(0) 推荐(0)

去除inline-block元素间间距的N种方法
摘要:一、现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: <input /> <input type="submit" /> 间距就来了~~ 我们使用CSS更改非inline-block水平元素为inline-block水平,也会有该问 阅读全文

posted @ 2017-04-10 11:50 _chuck 阅读(140) 评论(0) 推荐(0)

css display属性介绍
摘要:none此元素不会被显示。 block此元素将显示为块级元素,此元素前后会带有换行符。 inline默认。此元素会被显示为内联元素,元素前后没有换行符。 inline-block行内块元素。(CSS2.1 新增的值)list-item此元素会作为列表显示。 run-in此元素会根据上下文作为块级元素 阅读全文

posted @ 2017-01-11 10:51 _chuck 阅读(167) 评论(0) 推荐(0)

导航