css
hayleyxia
这个作者很懒,什么都没留下…
展开
-
css之float的深入理解
1. 浮动 分栏和列表排列都可以用其他css属性替换,但文字环绕图片是没有办法的,而这里就是浮动应该出现的地方.浮动的意义就是让文字环绕图片而已. 2. 浮动的本质 包裹与破坏 浮动的包裹性(包裹是让标签占据的空间水平收缩) 包裹可以用inline-block来实现,一种按钮的实现方式,外层居左,里层居右,背景图片可以很长,这样只显示一部分.如下 .btn1{display:inl转载 2015-04-18 18:35:09 · 482 阅读 · 0 评论 -
span与a元素的键盘聚焦性以及键盘点击性研究
众所周知和不为所知的 我们平时涉及到点击交互事件的时候, 都是使用a元素或者button元素(注意a元素要有href链接), 原因是可以相应键盘focus效果以及回车和空格触发点击事件. 但是有些特殊情况比如span元素, 我们可以通过一定的设置让其支持键盘的可访问性. span元素的处理和测试 要让一个普通的span元素达到一个含button元素的键盘可访问性,我们需要如下处理: -首先绑定转载 2015-07-03 19:59:41 · 502 阅读 · 0 评论 -
解决等高列的方法
https://css-tricks.com/fluid-width-equal-height-columns/常用方法 1. css3属性 -webkit-linear-gradient 2. 伪类before after 3. table 4. display:table; table-cell 5. one true layout method<div id="one-true" c原创 2015-06-26 16:55:19 · 845 阅读 · 0 评论 -
CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
http://blog.csdn.net/freshlover/article/details/17143341 首先,Opacity属性用来设置一个元素的透明度,取值范围是0~1之间,不可为负值。opacity取值为1是完全不透明,取值为0是完全透明,视觉上看不见。关于浏览器对opacity属性的兼容性请继续往下看.转载 2015-06-26 14:52:58 · 2513 阅读 · 0 评论 -
编写高效的 CSS 选择器
1. css选择器 CSS选择器具有高效的继承性,引用Steve Souders的话, CSS选择器效率从高到低的排序如下: ID选择器 比如#header类选择器 比如.promo元素选择器 比如 div兄弟选择器 比如 h2 + p子选择器 比如 li > ul后代选择器 比如 ul a 7. 通用选择器 比如 *属性选择器 比如 type = “text”伪类/伪元素选择器转载 2015-04-20 17:06:36 · 373 阅读 · 0 评论 -
大小不固定的图片,多行文字水平垂直居中
http://www.zhangxinxu.com/wordpress/2009/08/%E5%A4%A7%E5%B0%8F%E4%B8%8D%E5%9B%BA%E5%AE%9A%E7%9A%84%E5%9B%BE%E7%89%87%E3%80%81%E5%A4%9A%E8%A1%8C%E6%96%87%E5%AD%97%E7%9A%84%E6%B0%B4%E5%B9%B3%E5%9E%82%E7转载 2015-04-20 15:33:05 · 657 阅读 · 0 评论 -
css架构
http://blog.jobbole.com/31147/ 1. 良好的css架构 可预测 可重用 可扩展 可维护 2. 一些不好的写法 某一元素大部分是一样的,只有一个页面不同,应该为此页面找出不同点,然后写一个新规则去处理 基于父组件来修改组件 1 2 3 4 5 6 7 8 9转载 2015-04-20 20:40:53 · 452 阅读 · 0 评论 -
css之line height的理解与应用
line-height是两条基线之间的距离,由lineheight撑开的,而不是文字,还有就是有一个居中的作用; height div的高度是由一个个line boxes的高度堆积而成的. 1. 单行文字的垂直 一般设置line-height就好了 2. 多行文字的垂直 这个比较复杂,应用场景,高度固定,里面单行或者多行,且大小不一,方法之一是借助line-height转载 2015-04-20 15:13:27 · 441 阅读 · 0 评论 -
margin的重叠与防治
1、水平边距永远不会重合。 2、在规范文档中,2个或以上的块级盒模型相邻的垂直margin会重叠。最终的margin值计算方法如下: a、全部都为正值,取最大者; b、不全是正值,则都取绝对值,然后用正值减去最大值; c、没有正值,则都取绝对值,然后用0减去最大值。 注意:相邻的盒模型可能由DOM元素动态产生并没有相邻或继承关系。 3、相邻的盒模型中,如果其中的一个是浮动的(float转载 2015-04-20 11:50:31 · 1508 阅读 · 0 评论 -
css之vertical-align的理解与认识
一. 简介 1. vertical-align 数值,比如 -2, 相比于基线向下便宜2px,一般用来修复单选框/复选框和12像素文字大小不对齐的问题. 2. 百分比 此标签继承的line-height,但ie6和ie7会出现问题 3. top middle baseline bottom 可以比对英语的4条线来理解 4. 只有一个元素属于inline或者inline-block,时才会起转载 2015-04-20 10:08:37 · 873 阅读 · 0 评论 -
css最佳实践
1. 样式分离 实际上,CSS有几十种不同的属性,撇开一些不定参数(例如宽度,高度,颜色值)的样式,CSS的基础构成也是非常有限的,例如下面截取的的一小段CSS库样式(命名仅供参考): 总结这一节的核心观点,其实不难理解,就是“构成的基本元素越是独立,越是最简,其组合的可能性,元素的利用率越是高!”,CSS样式越是分离,其样式的利用率和覆盖率就越高,CSS代码就越精简! 万物守恒,C转载 2015-04-23 16:00:36 · 896 阅读 · 0 评论 -
IE7兼容性问
1. 背景颜色 background: rgba(255,255,255,1); +background: #ffffff!important; 这样的hack没有起作用,为啥呢。。。原创 2015-04-10 11:41:10 · 317 阅读 · 0 评论 -
js中会用到的键盘码
Question: Are the keyCode values of keydown/keyup events standardized across browsers? Answer: No, unfortunately, not all key codes are standardized. For example, the minus key has different key code原创 2015-07-03 20:21:50 · 433 阅读 · 0 评论