06 2017 档案
摘要:一个媒体查询由一个可选的媒体类型和零个或多个使用媒体功能限制样式表范围的表达式组成, 例如 宽度,高度和颜色。在CSS3中添加的媒体查询,允许内容的呈现针对一个特定范围的输出设备而定制,而不必改变内容本身。 语法 媒体查询包含一个可选的媒体类型和零个或多个满足CSS3规范的表达式. 这些表达式描述了
阅读全文
摘要:移动前端开发之viewport的深入理解 在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。 一、viewport的概念
阅读全文
摘要:我想大家在写CSS的时候应该都对清除浮动的用法深有体会,今天我们就还讨论下clearfix的进化史吧。 clearfix清除浮动 首先在很多很多年以前我们常用的清除浮动是这样的。 CSS 1 .clear{clear:both;line-height:0;} CSS CSS 1 .clear{cle
阅读全文
摘要:行内级元素垂直对齐方式 默认的对齐方式为baseline,一般使用最多的就是middle,偶尔你还会看到使用像素来偏移。注意 text-top 及text-bottom 的对齐方式有点特别,不过实战中几乎不用 baseline (默认对齐): 字母x的最底线 Xx 中文 Xx gf 中文 middl
阅读全文
摘要:原文出处: 大搜车前端团队博客 这是我10个月前写的一篇关于BFC的文章,因为接下来要写一篇关于FFC的文章了,然而很多人对BFC都还不了解,所以我先把这篇文章拿出来让大家先了解下BFC。 说到BFC,就会涉及到CSS布局的一些基本概念,然后,首先来讲一下关于块级盒的一些概念: 下面是来自w3.or
阅读全文
摘要:我们该如何提升网页的性能? 看到这个问题时,大多数开发者会想到图片优化、JavaScript优化、服务器配置升级、文件压缩甚至是CSS压缩这些方式。然而,网页的核心语言HTML却被忽视了。 如今,HTML的负担越来越重,在全球排名前100的网站中,平均每个页面的HTML代码大小有40k左右,其中Am
阅读全文
摘要:0. HTML5中最看重的理念“语义化”相比HTML有什么区别? 在之前翻译的《如何写出高效率的HTML》一文中提到了一些关于语义化标签的相关内容,这里搜集整理了一些语义化标签方面的问题和解答,以供大家参考。语义化这个概念应该说是伴着HTML5应运而生,那么什么是HTML5中所谓的语义化? 简单来说
阅读全文
摘要:Autoprefixer解析CSS文件并且添加浏览器前缀到CSS规则里,使用Can I Use的数据来决定哪些前缀是需要的。 所有你需要做的就是把它添加到你的资源构建工具(例如 Grunt)并且可以完全忘记有CSS前缀这东西。尽管按照最新的W3C规范来正常书写你的CSS而不需要浏览器前缀。像这样:
阅读全文
摘要:精简高效的CSS命名准则/方法 这篇文章发布于 2010年09月12日,星期日,01:11,归类于 css相关。 阅读 145588 次, 今日 154 次 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.
阅读全文
摘要:CSS属性值定义语法(CSS value definition syntax)是用来限定CSS属性合法取值的专门语法。在此基础之上,一个CSS属性的合法取值也由语义所限制,比如一些数字必须是正数。 CSS属性值定义语法描述了哪些值是可取的CSS属性,基本组成元素包括关键字、符号与带类型的参数。 基本
阅读全文
摘要:CSS 重置 现在我们已经知道了,某些元素即使我们不对它声明样式,浏览器也会有些默认的样式,如 h1、p。 那么问题来了,浏览器有那么多(Chrome,Firefox,IE 等),每个浏览器的默认样式是否一致呢? 很可惜,这个答案是否定的, 各个浏览器的默认样式可参考:浏览器默认样式参考指南。上面罗
阅读全文
摘要:浏览器兼容 首先浏览器有很多种,每种浏览器会存在一定的差异,其次每个浏览器都有不同的版本,版本之间也存在必然的差异,而我们做出来的页面则需要各个浏览器以及不同版本表现一致,所以必然存在兼容问题。 一般来说兼容问题我们可以分两步走:第一步是确定浏览器是否支持,第二步是如果表现不一致,怎么去修复。 浏览
阅读全文
摘要:值的计算 通过前面的学习,我们知道了一个元素的样式可能来自三个部分: 继承自父级元素的样式 元素的浏览器默认样式 元素自己声明的样式 而最终应用的样式就是这三个部分通过一套复杂的计算体系得到的。 应用值 我们把最终应用的样式称之为应用值(used value)。 如果元素本身声明了样式,那么我们的应
阅读全文
摘要:CSS 样式优先级 当创建的样式表越来越复杂时,一个标签的样式将会受到越来越多的影响,这种影响可能来自周围的标签,也可能来自其自身。下面我们从这两方面去看看 CSS 样式的优先级。 CSS 的继承性 CSS 的继承特性指的是应用在一个标签上的那些 CSS 属性被传到其子标签上。看下面的 HTML 结
阅读全文
摘要:优先级计算 我们在前面已经比较详细地介绍过 CSS 之间的优先级比较,得到的结论大概如下: !important > style > id选择器 > 类选择器(伪类,属性) > 元素选择器(伪元素) > * > 浏览器默认 > 继承 对于前面两个(!important 和 style)优先级太高,只
阅读全文
摘要:优先级 优先级 在本文章中 概念 优先级是如何计算的? 选择器类型 !important 规则例外 什么时候应该使用: :not 伪类例外 基于形式的优先级(Form-based specificity) 无视DOM树中的距离 Directly targeted elements versus in
阅读全文
摘要:CSS 简写 属性简写 CSS 规范定义简写属性的目的在于将那些关于同一主题的常见属性的定义集中在一起。如我们已经说过的margin、padding、border等。 下面我们再补充一些常用的一些属性简写。 字体相关属性 font 相关属性用于设置字体,主要由以下几个属性组成: font-famil
阅读全文
摘要:雪碧图 在网站开发中,我们经常会使用一些背景图片来点缀效果,如一些形象生动的小图标。这种背景图片一多,网络请求就多了。这样为了减少网络请求,我们把一些小的背景图合并在一个大的图中,然后通过 CSS 的背景定位技术去使用。我们把这种技术叫做 CSS Sprite,也叫雪碧图,还叫 CSS 精灵。 如在
阅读全文
摘要:渐变背景 gradient 在定义背景图片时,除了使用正常的图片之外,我们还可以通过 CSS3 的 gradient 去创造渐变背景图。同比使用图像的方案,使用 CSS3 gradient 来实现可以减少带宽和页面加载时间。如在移动端腾讯课堂的页面里,便使用到了 CSS3 gradient 来实现一
阅读全文
摘要:盒模型详解 认识盒模型 HTML文档中的每个元素在渲染的时候都会被描绘成一个矩形盒子,而盒模型正是用来表示每个元素盒子所占用空间大小的模型。 在我们现实生活中,描述一个矩形直接用宽和高即可。但是在CSS中主要通过四个部分来描述,分别为:margin(外边距),border(边框),padding(内
阅读全文
摘要:进一步探讨单位 CSS 中的单位有很多,这里主要介绍目前常用的及未来必备的几个单位。 px px 是 pixels(像素)的缩写,是一种绝对单位,用于屏幕显示器上,传统上一个像素对应于计算机屏幕上的一个点,而对于高清屏则对应更多。任何现代显示屏,不管是手机,平板,笔记本还是电视都是由成千上万的像素组
阅读全文
摘要:Git是分布式的代码管理工具,远程的代码管理是基于SSH的,所以要使用远程的git则需要SSH的配置。 github的SSH配置如下: 一 、 设置Git的user name和email: 二、生成SSH密钥过程:1.查看是否已经有了ssh密钥:cd ~/.ssh如果没有密钥则不会有此文件夹,有则备
阅读全文
摘要:自定义字体 概述 一般来说,网页上的字体使用的都是我们电脑里面的字体,比如我们常说的微软雅黑、宋体就是 windows 系统自带的字体。所以你可以看到网页的字体一般都比较中规中矩,不像平面设计那样各种新花样。 但是我们在浏览一些网站时,还是可以发现一些非常酷炫和高端的字体。如小米笔记本 Air: 这
阅读全文
摘要:Web前端,高性能优化 高性能HTML 一、避免使用iframe iframe也叫内联frame,可将一个HTML文档嵌入另一个HTML文档中。 iframe的好处是,嵌入的文档独立于父文档,通常也借此使浏览器模拟多线程。缺点是: ①虽然iframe能模拟多线程,但主流浏览器的同域名并行下载数是不变
阅读全文
摘要:1 块级元素:div , p , form, ul, li , ol, dl, form, address, fieldset, hr, menu, table 行内元素:span, strong, em, br, img , input, label, select, textarea, cite
阅读全文
摘要:创建链接 认识链接 使用过百度搜索都知道,我们搜索一个东西,然后百度会显示好多条,我们点击每条都会打开一个对应的网页。 以搜索“腾讯课堂”为例,出现如下结果: 上图截图中的所有红框部分都是链接,点击就会跳到腾讯课堂相关页面。 这种从一个页面转到另一个页面就是Web的魅力所在,而这之间的跳转正是通过<
阅读全文
摘要:路径指南 认识路径 首先,你以前肯定接触过路径,如你电脑中的某个文件 E:\娱乐\音乐\蓝莲花.mp3,或者你在网上看到的某个图片 https://8.url.cn/edu/download/images/s-3-bg.86430f50.jpg,这些都是路径。 而我们在前面学习的<a>元素和<img
阅读全文
摘要:HTML head 头部分的标签、元素有很多,涉及到浏览器对网页的渲染,SEO 等等,而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多差异性。移动互联网时代,head 头部结构,移动端的 meta 元素,显得更为重要。了解每个标签的意义,写出满足自己需求的 head 头标签
阅读全文
摘要:HTML meta标签总结与属性使用介绍 html5 html Lxxyx 2016年01月10日发布 | 24 收藏 | 245 10.9k 次浏览 HTML meta标签总结与属性使用介绍 html5 html Lxxyx 2016年01月10日发布 | 24 收藏 | 245 10.9k 次浏
阅读全文
摘要:js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器<input type="file">默认的样式; 2:图片从本地选择后,立即预览图片; 3:使用上传可以查看上传进度(本博做的是上传
阅读全文
摘要:301 moved permanently、302 found、303 see other 301/302/303都表示重定向,所以放在一起讲解。 301表示永久重定向(301 moved permanently),表示请求的资源分配了新url,以后应使用新url。 302表示临时性重定向(302
阅读全文
摘要:隐藏域在页面中对于用户是不可见的,在表单中插入隐藏域的目的在于收集或发送信息,以利于被处理表单的程序所使用 (隐藏只是在网页页面上面不显示输入框,但是虽然隐藏了,还是具有form传值功能。 一般用来传值,而不必让用户看到。) 基本语法: <input type="hidden" name="fiel
阅读全文
摘要:【以下有部分内容引用的网络文章】 我们在日常需求中,经常会碰到视觉设计师对某个中文字体效果非常坚持的情况,因为页面是否高大上,字体选择是很重要的一个因素,选择合适的字体可以让页面更优雅。面对这种问题,我们通常以下方式来进行设计还原: 使用图片背景还原设计,即使用 photoshop 将文本图层单独导
阅读全文
摘要:转:http://www.cnblogs.com/zendu/p/4987985.html
阅读全文
摘要:拖拽功能主要是用在让用户做一些自定义的动作,比如拖动排序,弹出框拖动移动等等,效果还是蛮不错的。下面讲解一下拖拽的原理,希望可以帮助到有需要的朋友! 一、拖拽的流程动作①鼠标按下②鼠标移动③鼠标松开 二、拖拽流程中对应的js事件①鼠标按下会触发onmousedown事件 [javascript] v
阅读全文
摘要:DIV CSS text-overflow文本有溢出时显示css省略号clip ellipsis样式基础知识与用法实例经验教程篇 有时为了避免文本文字内容超出一定宽度后溢出,我们想要溢出的部分不显示但用省略号(...)显示,这个时候我们可以使用CSS text-overflow文本溢出省略号属性样式
阅读全文
摘要:作者:贺师俊链接:https://www.zhihu.com/question/20027966/answer/13727164来源:知乎著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 Google并没有把<script>插入在</body>之后,而只是没有写</body>和<
阅读全文
摘要:文章目录 一、从一个面试题说起 “页面渲染出来了” 指的是什么? 陷阱 二、浏览器的渲染机制 几个概念 浏览器的渲染过程 看 Timeline,一目了然 三、问题的答案 四、总结、再进一步 一、从一个面试题说起 “页面渲染出来了” 指的是什么? 陷阱 二、浏览器的渲染机制 几个概念 浏览器的渲染过程
阅读全文
摘要:HTML xmlns 属性 xmlns 属性 xmlns 属性可以在文档中定义一个或多个可供选择的命名空间。该属性可以放置在文档内任何元素的开始标签中。该属性的值类似于 URL,它定义了一个命名空间,浏览器会将此命名空间用于该属性所在元素内的所有内容。 例如,如果需要使用符合 XML 规范的 XHT
阅读全文
摘要:HTML 5 <html> 标签 定义和用法 <html> 标签告知浏览器这是一个 HTML 文档。 html 元素是 HTML 文档中最外层的元素。 html 元素也可称为根元素。 定义和用法 <html> 标签告知浏览器这是一个 HTML 文档。 html 元素是 HTML 文档中最外层的元素。
阅读全文
摘要:转载:http://www.jianshu.com/p/9ba1f8f77081 <!DOCTYPE> 声明位于文档中的最前面,处于 <html> 标签之前。告知浏览器的解析器, 用什么 文档类型规范 来解析这个文档。 声明的意义只有确定了一个正确的文档类型,超文本标记语言或可扩展超文本标记语言中的
阅读全文

浙公网安备 33010602011771号