bootstrap、CSS等
文章平均质量分 92
linybo2008
这个作者很懒,什么都没留下…
展开
-
inline-block 前世今生
曾几何时,display:inline-block 已经深入「大街小巷」,随处可见 「display:inline-block; *display:inline; *zoom:1; 」这样的代码。如今现代浏览器已经全面支持这个属性值了,上面的代码是为了兼容 IE6、7而已。那么你真的了解 inline-block 了吗?本文将带你深入剖析该属性值的前世今生,让你更好的理解和运用 inline-bl转载 2014-06-25 13:59:14 · 521 阅读 · 0 评论 -
style、currentStyle、getComputedStyle区别介绍
样式表有三种方式 内嵌样式(inline Style) :是写在Tag里面的,内嵌样式只对所有的Tag有效。 内部样式(internal Style Sheet):是写在HTML的里面的,内部样式只对所在的网页有效。 外部样式表(External Style Sheet):如果很多网页需要用到同样的样式(Styles),将样式(Styles)写在一转载 2014-06-23 16:03:49 · 683 阅读 · 0 评论 -
CSS选择器笔记
Q1转载 2014-06-24 09:54:17 · 446 阅读 · 0 评论 -
CSS清除浮动
浮动(float),一个我们即爱又恨的属性。爱,因为通过浮动,我们能很方便地布局; 恨,浮动之后遗留下来太多的问题需要解决,特别是IE6-7(以下无特殊说明均指 windows 平台的 IE浏览器)。也许很多人都有这样的疑问,浮动从何而来?我们为何要清除浮动?清除浮动的原理是什么?本文将一步一步地深入剖析其中的奥秘,让浮动使用起来更加得心应手。一、清除浮动 还是 闭合浮动 (Enclosi转载 2014-06-25 13:56:18 · 635 阅读 · 0 评论 -
浏览器加载和渲染html的顺序-css渲染效率的探究
1.浏览器加载和渲染html的顺序1、IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的。2、在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都已经下载完)3、如果遇到语义解释性的标签嵌入文件(JS脚本,CSS样式),那么此时IE的下载过程会启用单独连接进行下载。4、并且在下载后进行解析,解析过程中,停止页面所有往下元素的下载转载 2014-06-24 10:19:52 · 626 阅读 · 0 评论 -
未知高度多行文本垂直居中
近日,微博上有朋友比较纠结未知高度的文本垂直居中问题。这个和「未知高度图片垂直居中」有些类似,但是有一些细节需要注意。这里有之前写的一个未知宽高对话框的垂直居中(拖动改变大小看是不是依然居中?),只不过对话框是相对于 viewport(视口)居中的,这里的文字需要的是相对于容器垂直居中。拿到这样的需求时,先不要想着如何兼容 IE6/7。先想想文字垂直居中靠什么属性?vertical转载 2014-06-25 14:02:35 · 659 阅读 · 0 评论 -
inline-block空隙--letter-spacing与字体大小/字体关系数据表
letter-spacing与字体大小/字体关系的数据表 Firefox 3.6.12Chrome 7.0Safari 4.0(win)Opera 10.51IE8IE6/7是否兼容16px/Arial-4px-4px-4px-3px留空1px/-4px空隙还原-4p转载 2014-06-25 14:12:48 · 804 阅读 · 0 评论 -
什么是外部样式?内联样式?内部样式表?
外部样式表当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在(文档的)头部: 浏览器会从文件 mystyle.css 中读到样式声明,并根据它来格式文档。外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个转载 2014-07-02 15:06:40 · 9656 阅读 · 0 评论 -
可用性更好的CSS隐藏文字技术(CSS图片替换文字)
对于CSS隐藏文字也许大家并不陌生,第一想到的或许就是 text-indent:-999em。但是作为一个重构者,精益求精一直是我们追求的目标,抛开text-indent的适用场景和bug不谈,大家有没有想过这种方法的弊端呢?显而易见,如果图片由于某些原因未加载的时候,设置了 text-indent:-999em导致文字移出了浏览器视口(可视区域),我们看到的会是一片空白。网页中最重要的是内容转载 2014-06-25 14:28:16 · 2816 阅读 · 0 评论 -
CSS执行顺序与优先权
CSS执行顺序与优先权的问题其实就是一个冲突解决的问题,当同一个元素(或内容)被CSS选择符选中时,就要按照优先权取舍不同的CSS规则,这其中涉及到的问题其实很多。 首先就是CSS规则的specificity(特殊性),CSS2.1有一套关于specificity的计算方式,用一个四位的数转载 2014-06-24 11:23:01 · 523 阅读 · 0 评论 -
通过cssText属性访问style中的CSS代码
通过cssText属性可以访问style特性中的CSS代码。在读取模式下,cssText返回浏览器对style特性中CSS代码的内部表示。在写入模式下,副歌cssText的值会重写整个style特性的值;也就是说,以前通过style特性指定的样式信息都将丢失。例如,如果通过style特性为元素设置了边框,然后再以不包含边框的规则重写cssText,那么就会抹去元素上的边框。下面是使用cssText转载 2014-06-23 16:07:59 · 636 阅读 · 0 评论 -
jquery的学习总结之元素选择、查找、过滤
主要总结一下jquery1.4的学习心得:实际工作中够用一、jquery操作符号:jquery(),简写为$();二、基本查找: 1、根据给定的ID匹配一个元素。如果选择器中包含特殊字符,可以用两个斜杠转义 例如:html码:hello world jquery码:转载 2015-04-02 15:19:36 · 717 阅读 · 0 评论 -
CSS: float属性和position属性的区别和应用(二)
详细分析css float 属性以及position:absolute 的区别相信很多人都有这样的问题,在页面布局中float和position:absolute哪个更好用呢?既然是布局,就用float好,这个我比较常用。这个浮动是可以清除的,一般不会影响整体布局。 而position,定位,是不受约束的,这个貌似都谈不上布局了,一般要是做什么特殊的定位或者浮动层的时候,可以考虑使用。正常页面转载 2014-06-30 10:12:12 · 763 阅读 · 1 评论 -
IE下调试CSS与JS
IE下调试CSS与JS启动调试工具:IE浏览器9.0 ,菜单〉〉F12开发人员工具……。1. 调试CSS1.1找到页面元素”HTML” TAB页,展开HTML元素,找到要高度的DOM元素HTML代码,选中元素DOM,IE中会为蓝色框表示选中。1.2 查看控件使用的样式在右边“样式”TAB中,可看到使用的样式,优先级从低到高,内联CSS在最下边“跟踪样转载 2014-04-22 22:05:09 · 498 阅读 · 0 评论 -
margin负值 – 一个秘密武器
CSS盒模型中,margin是我们老熟悉的一个属性了, 它的负值你用过吗? 你知道margin负值的秘密武器吗?我们一起看看吧!1、带竖线分隔的横向列表(例如:网站底部栏目)传统的分隔符是使用 “|” 来实现的,弊端显而易见,不利于表现与结构的分离,同时增加了后台输出时的判断工作。所以我们采用border-left 左边框来模拟分割线,然后通过margin-left:-1p转载 2014-06-25 14:09:57 · 526 阅读 · 0 评论 -
inline-block 未来
不过在「娓娓」之前,我们回顾一下「前世今生」中主要讲了几个问题:IE6 是不是真的不支持 inline-block;到底什么是 inline-block;display:inline-block 后的元素为什么会产生水平空隙,这是不是 Bug?如何更好的去掉 inline-block 产生的空隙。虽然前文中连 inline-block 他爸都写出来了,但无论是 YUI 的解决方案,转载 2014-06-25 14:00:33 · 525 阅读 · 0 评论 -
CSS: float属性和position属性的区别和应用(一)
在使用div+css进行网页制作时,我们经常需要对某些元素进行一些必要的定位,使其能按照我们预想的效果呈现在页面合适的位置上,而float和position便是实现这一效果的两种方法。一、浮动(float)float属性经常被运用于制作Horizontal Menu(横向菜单)和实现多列式网页布局。根据它提供的left 和right 两个值,我们可以很容易的把特定的元素从文档流中抽转载 2014-06-30 09:58:44 · 852 阅读 · 0 评论 -
HTML + CSS短标题(二,三,四文字长度)两端对齐的方式
在做前台界面的时候,比如一些文字的列表或者一些表单的标题,经常是2个字,3个字,4个字的类型。一般对齐就是在中间打空格或者用 来空开,但是效果并不好,兼容性有问题,造成不美观。经过一番折腾,找到了比较好的办法解决。利用letter-spacing来解决:letter-spacing 属性增加或减少字符间的空白(字符间距)。该属性定义了在文本字符框之间插入多转载 2015-06-29 15:47:58 · 1462 阅读 · 0 评论