HTML/CSS
文章平均质量分 66
C860
I'm an HCIer from SCAU
展开
-
HasLayout与BFC
网络上有很多关于hasLayout和BFC相关的文章,但是大部分都显得有些晦涩难懂。所以想用一些比较直观的例子来说明hasLayout和BFC给平时的布局带来的影响。基础知识在讲hasLayout和BFC之前,先简单地过一下元素布局的一些基本知识。元素本身的布局方式可以从display上表现出来block,对应块级元素inline,对应行内元素inline-bloc转载 2013-05-18 22:47:53 · 584 阅读 · 0 评论 -
弹性方框模型 (Flexible Box Model) 快速入门
简介我可以肯定,您对于页面上水平或垂直排列的样式元素已经了解得够多了。但是,CSS 还缺少适用于此任务的合适机制。了解 CSS3 弹性方框模型(简称 Flexbox)该草案将 Flexbox 描述如下:[...]针对接口设计而优化的 CSS 框模型。除了 CSS 中已有的布局系统之外,该模型还提供了一个额外的布局系统。[CSS21] 在这个新的框模型中,框的子代采用水平或垂转载 2014-01-13 14:32:05 · 953 阅读 · 0 评论 -
IE6中Div 遮罩层覆盖不住select控件的解决方法
又是一周干着测试员的工作,没有任何任务安排,只得自己找bug来填充每天的日子。 突然想到上次在演示的时候,看到在IE6下同事自己写的弹出提示框无法遮住select下拉选择框的问题。当时是去掉了那个下拉框来解决这个问题,但是页面还有很多地方用到这个提示框。 用IE6运行一下发现很多页面都存在这个问题。 后来同事说在每个页面跳用这个函数之前隐转载 2014-01-27 11:56:10 · 1444 阅读 · 0 评论 -
兼容全浏览器的返回顶部按钮
最近在复习前端的知识,无聊写了个返回顶部按钮。已兼容所有浏览器。PS:不要在意我用的是H5的规范写的页面,JS代码才是核心 body { height: 2000px; } #topbtn { position: absolute; ri原创 2014-02-24 22:43:32 · 1013 阅读 · 0 评论 -
CSS3中background-clip和background-origin的区别
相信除了我以外,还有不少童鞋在学习到background-clip和background-origin的时候都很疑惑,这俩哥们儿到底啥区别。想搞清楚它们的区别还不简单?且看下面的DEMO:.test { background-image: url(pic.jpg); background-clip: border-box; background-origin: bo原创 2014-02-14 16:08:12 · 1119 阅读 · 0 评论 -
media query相关表格
media query表:media query兼容性:转载 2014-02-14 22:02:26 · 786 阅读 · 0 评论 -
关于DIV布局中图片留白的个人见解
可能接触HTML多了的人都会遇到类似问题,当一个div(或者ul或者li)包含一张图片的时候,这张图片底部会有一部分的留白。很多人就感到很困惑。毕竟我们并没有设它的margin值或padding值呀!为什么它就会有这么一个留白呢?在网上搜了一下,国内的网友解释不多,对图片留白的解释也含糊不清,大致只提供了一些解决方案却不去跟人家解释具体的原因。这对于真正需要学习这门技术的人来说是没有好原创 2013-07-07 09:59:04 · 4235 阅读 · 0 评论 -
关于iframe节点初始化的问题
今天忽然想着复习一下富文本编辑器的制作原理。于是二话不说将手把手地做了起来。因为一年前写过一个简单的富文本编辑器,所以大概还是有点印象。可是当我把写出来的代码跑一下的时候,发现了问题:var ifr = document.createElement('iframe');ifr.width = 300;ifr.height = 300;var idoc = ifr.contentDocum原创 2014-02-27 16:01:16 · 2121 阅读 · 0 评论 -
META标签详解
META标签除了常用的关键字标签(keywords)和描述标签(description)外,还有其他许多标签,下面我们来详细介绍各种META标签的用法。 1、META标签的keywords 写法为: meat标签的Keywords的的信息参数,代表说明网站的关键词是什么。 2、META标签的Description meat标签的Description的信息参数,代转载 2014-02-18 20:54:45 · 829 阅读 · 0 评论 -
image-set在retina屏幕下图片自适应
-Webkit-image-set 实现Retina屏幕下图片显示.soso .logo .qqlogo { display: block; width: 134px; height: 44px; background-image: url(http://mat1.gtimg.com/www/images/qq2012/qqlogo_1x.png); bac转载 2014-02-18 21:39:31 · 1865 阅读 · 0 评论 -
网站性能优化之DNS Prefetch
也许前端工程师们很少注意DNS解析这么一个不起眼的过程,但是事实上DNS解析和内容载入是一个串行的过程,也就是说,如果能够优化DNS解析的时间,那么对于网站载入优化是成功的。可是真的有可能吗?正当你疑惑的时候,DNS Prefetch横空出世。顾名思义,DNS Prefetch就是DNS预解析,默认情况下浏览器会对页面中和当前域名(正在浏览网页的域名)不在同一个域的域名进行预获取,并且缓存原创 2014-02-18 20:25:32 · 1144 阅读 · 0 评论 -
HTML5 Canvas多层点击事件监听实例
最近写一个HTML5的游戏框架。今天写到一个多层点击事件的监听。觉得还是挺好玩的。于是把它从模块中抽化出来了。以下代码只是一些思想。具体实现肯定不是那么丑陋。如果想具体了解,这里是代码托管地址(无耻地卖了一下广告):https://github.com/c860/EasyGaming Document .box > canvas {原创 2014-03-21 15:58:53 · 4007 阅读 · 0 评论 -
CSS核心:包含块(Containing Block)
包含块(Containing Block)是视觉格式化模型的一个重要概念,它与框模型类似,也可以理解为一个矩形,而这个矩形的作用是为它里面包含的元素提供一个参考,元素的尺寸和位置的计算往往是由该元素所在的包含块决定的。在阅读本文前,请先理解一下:文档结构元素类型CSS的direction属性1视口(viewport)浏览器的窗口一般由3个部分组成,如图5所示转载 2014-04-09 12:06:14 · 2700 阅读 · 0 评论 -
剖析网页从浏览器输入地址到加载完毕的全过程——域名解析
作为一名WEB开发者,你了解页面的加载的全过程吗?至少我肯定原创 2014-04-14 10:45:35 · 2675 阅读 · 0 评论 -
HTML5表单及其验证
这几天JSP课老师让大家写表单验证,大家都找我,本来想装逼用H5的,但是我很郁闷,因为好多验证的类型都忘了,只记得email和number了呵呵。因为H5的表单验证我之前虽然试过,但是因为H5的验证还是不够严谨,所以一直都用自己的表单验证插件,所以这次装逼没有成功。结果是最后硬着头皮用JS写了个表单验证T^T。现在就来补补课,在网上搜到这篇文章,比较全面。文章地址:http://www.cnblo转载 2014-03-18 15:11:56 · 1540 阅读 · 0 评论 -
CSS的百分比,你知道多少?
响应式布局设计最近红得一塌糊涂。不原创 2014-04-18 20:22:16 · 2925 阅读 · 0 评论 -
CSS 的 z-index 属性
元素的 z-index 属性规定了它的的层叠级别(stack level),这些级别确定了元素之间互相覆盖时的层叠顺序。但是 z-index 似乎没那么简单,这里总结一下。首先是层叠内容(stack context)的概念。层叠内容由下列这些元素形成(其中定位元素指 position 不为默认值 static 的元素):根元素 HTMLz-index 不为默认值 auto 的定位元转载 2013-12-27 00:29:41 · 1263 阅读 · 0 评论 -
关于CSS3中transform属性对元素布局的影响。
今天了解transform属性时发现一个奇怪的现象,就是使用transform属性的时候,无论是translate,rotate,skew还是scale,对于伪元素:after和:before,都会产生影响。具体的这个影响体现在哪里呢?我们通过一个例子来看一看(以下代码均针对webkit内核浏览器,其它浏览器鄙人还未去尝试):先贴代码:原创 2013-12-26 23:44:54 · 5315 阅读 · 0 评论 -
【翻译】@font-face与性能
FOUT:Flash of Unstyled TextPaul 将Flash of Unstyled Text指为FOUT。这也是对于 David Hyatt 提出的FOUC( flash of unstyled content )的一种继承。FOUC会在样式表加载于页面底部的情况下发生。 Paul 指出了两种类型的FOUT: 重渲染的文字 —— 当 @font-f转载 2013-12-21 21:06:58 · 1282 阅读 · 0 评论 -
关于CSS HACK的那些事
首先,什么是CSS hack? 针对不同的浏览器写不同的CSS code的过程,就叫CSS hack! CSS hack由于不同的浏览器,比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器转载 2013-05-18 23:02:37 · 761 阅读 · 0 评论 -
Web前端开发规范文档(更新于2013-01-13)
规范目的为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改.基本准则符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器转载 2013-05-06 17:10:28 · 889 阅读 · 0 评论 -
元素基本框的生成过程
先判断一个元素是块级元素(Block-level element)还是行内元素(Inline-level element)1.1 假如元素是一个块级元素,先判断它是一个非替换元素(non-replaced element)还是替换元素(replaced element)1.1.1 假如元素是一个非替换元素,则依次对其进行水平和垂直格式化水平格式化:元素的左右外边距和转载 2013-05-20 21:00:17 · 773 阅读 · 0 评论 -
细说一些被人忽略的细节——CSS中的背景
这篇东西算是自己学习过程中的一个积累,如果哪里说得不对,希望大家指出,谢谢^_^CSS中有许多的属性,而在众多的属性中,背景属性是必不可少的。一个完整的页面,众多的CSS Style,没有背景属性肯定是不美观的。而就是这个用得最多的属性,你是否对它有较深的了解呢?今天在这里我只是对它其中的一个细节加以说明。这几天在看《CSS权威指南》,其中看到了对一个元素各个部分的介绍。一原创 2013-05-21 11:14:43 · 836 阅读 · 0 评论 -
编写高效的CSS选择器
CSS选择器:对我们大多数人来说,CSS选择器并不陌生。最基本的选择器是元素选择器(比如div),ID选择器(比如#header)还有类选择器(比如.tweet)。一些的不常见的选择器包括伪类选择器(:hover),很多复杂的CSS3和正则选择器,比如:first-child,class ^= “grid-”.CSS选择器具有高效的继承性,引用Steve Souders的话转载 2013-06-11 16:33:23 · 521 阅读 · 0 评论 -
前端经验分享——来自网易财经前端开发总结
作为门户网站的前端,有许多说不出的苦楚:有些代码虽然自己也看不下去,但还是不得不硬着头皮把页面给拼上去,比如跟其他频道公用的部分:因为是公用,js、css必须写在该部分,调用的js库(网易的很多频道头部都调用了两个大同小异的js库)等都身不由己。而且作为财经门户来说,页面分多屏是显然的、再者N多异步请求的数据(股票数据要及时更新)、画股票行情图等,对于前端的性能都是极大的考验。笔者用YSlow去测转载 2013-06-12 23:37:39 · 1073 阅读 · 0 评论 -
前端优化总结
前段时间简单的研究了下前端优化相关的知识,本文算是一个阶段性的总结,或者当做一个优化的参考List。前言 前端是庞大的,包括HTML、CSS、Javascript、Image、Flash等等各种各样的资源。前端优化是复杂的,针对方方面面的资源都有不同的方式。那么,前端优化的目的是什么? 1. 从用户角度而言,优化能够让页面加载得更快、对用户的操作转载 2013-07-19 19:22:54 · 809 阅读 · 0 评论 -
解读前端开发工程师必备技能
看到这个标题的大都是前端开发边缘的同学,有多少能直言不讳的说自己是前端工程师呢?不是打击谁谁谁,而是我们需要反思一个问题:什么才是真正意义上的前端开发呢?前端开发这个职业始于几年前,至今已发展的初步成熟了。如果你打算进入这个行业,你要做好的准备,因为要学的要懂得的实在不少;如果你已经在这个行业一两年了,也请你不要放弃对前端开发的继续追寻和研究;更老一点的,浩子也就不能说什么了,是你们让更好转载 2013-07-06 15:31:30 · 721 阅读 · 0 评论 -
前端 CSS 规范大全
在网上看到了一篇关于CSS规范的文章,但是细细一看发现还是有点瑕疵,但是大部分内容还是值得借鉴的。在此贴出。一、文件规范 1、文件均归档至约定的目录中(具体要求以豆瓣的CSS规范为例进行讲解): 所有的CSS分为两大类:通用类和业务类。通用的CSS文件,放在如下目录中: 基本样式库 /css/core通用UI元素样式库 /css/libJS组件相关样转载 2013-07-27 14:53:51 · 581 阅读 · 0 评论 -
关于提供CSS渲染速度的一些小技巧
最近硬盘坏了,学习的进度大大减慢,所以只能靠这些技术贴来汲取营养了。1、*{} #zishu *{} 尽量避开由于不同浏览器对HTML标签的解释有差异,所以最终的网页效果在不同的浏览器中可能是不一样的,为了消除这方面的风险,设计者通常会在CSS的一个始就把所有标签的默认属性全部去除,以达到所有签标属性值都统一的效果。所以就有了*通配符。*会遍历所有的标签;*转载 2013-08-03 00:42:12 · 640 阅读 · 0 评论 -
WebKit中CSS处理流程
1 概述本文主要以CSS加载,解析和匹配计算的完整流程为主线, 描述了Webkit内核中样式处理相关的各个处理模块. 主要包括: 1) CSS的解析流程; 2) 样式表的收集处理过程; 3) RenderStyle的样式匹配的计算流程; 4) 匹配样式的应用。1.1 类型mappedElement:一些可以影响CSS ComputedStyle的html元素。举转载 2013-08-25 11:32:28 · 1266 阅读 · 0 评论 -
谈谈CSS的边距合并
今天通过和一些师弟的交流,发现他们对外边距合并不是很理解。其实浅析CSS的外边距合并的话,是很容易明白是怎么一回事儿的。但是如果想要深入了解margin这个神奇的属性,那可得费一番功夫了。我是一个菜鸟,在这里当然不会解释得太复杂,在这里我只是想谈谈我对外边距合并的理解。其实要理解清楚什么是外边距合并,最简单的方法就是自己动手试试。我认为,理解外边距合并的关键就在于理解这句话:“原创 2013-09-22 17:05:34 · 756 阅读 · 0 评论 -
腾讯无障碍页面规范
如题,但是其实很多东西和W3C的规范有一致的地方,可以作为前端页面编写的参考腾讯网无障碍说明12-27-2012 更新频道、专题页快捷键列表(有相应提示则表示此页面已部署)12-27-2012 建立按alt+Q 访问网页大纲(通过网页大纲,您可以在各个内容区域间进行快速切换)新闻底层页快捷键列表(已部署频道:新闻、财经、娱乐、体育、公益、数码、科转载 2013-10-15 10:20:10 · 1340 阅读 · 0 评论 -
JS和CSS的多浏览器兼容总结
Javascript 多浏览器兼容一、document.formName.item(”itemName”) 问题 问题说明:IE下,可以使用 document.formName.item(”itemName”) 或 document.formName.elements["elementName"];Firefox下,只能使用document.formName.elements["eleme转载 2013-10-30 08:32:19 · 881 阅读 · 0 评论 -
关于CSS在IE6以下浏览器不支持:hover伪类的解决方式
今天在W3Cfuns看到这么一篇文章(http://www.w3cfuns.com/thread-347-1-1.html),自己也亲自去测试了一下,很霸气,特别是IE在CSS的实现方式上其实还是下了功夫,只是没有走对 路线而已,o(∩∩)o...哈哈。。。IE6对hover伪类只是部分支持,但是在我看来,一些常用的标签貌似都不能够支持hover。那么,其实对于IE6以下的浏览器来说,原创 2013-10-30 08:58:29 · 3313 阅读 · 0 评论 -
更加直观地了解hasLayout和BFC
基础知识在讲hasLayout和BFC之前,先简单地过一下元素布局的一些基本知识。元素本身的布局方式可以从display上表现出来block,对应块级元素inline,对应行内元素inline-blocknone当然,还有更多的一些属性,我们只提及主要部分。块级元素,在浏览器中通常是垂直布局,然后可以用margin来控制块级元素之间的间距,并列和嵌套的块级元转载 2013-11-10 09:29:31 · 633 阅读 · 0 评论 -
一张图解z-index
原创 2014-05-07 15:04:15 · 681 阅读 · 0 评论