![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
文章平均质量分 83
BorisHuai
Web前端工程师,Augmentum。
展开
-
首选 inline-block
描述作为 CSS2 visual formatting model 规范的成员之一,display: inline-block 其实并不是什么新鲜玩意儿,至少比 border-radius 神马的资历要老得多,但是悲剧的是其使用频率 并不十分广泛。我想说,在很多场景中,inline-block 是神器。其实严谨地说,从语义的角度出发,inline-block 在很多时候是必需的 displ转载 2013-01-09 16:24:19 · 1246 阅读 · 0 评论 -
可以从CSS框架中借鉴到什么
现在很多人会使用 CSS 框架进行快速建站。那 CSS 框架是什么呢,它通常是一些 CSS 文件的集合,这些文件包括基本布局、表单样式、网格、简单组件、以及样式重置。使用 CSS 框架大大降低工作成本进行快速建站。当然对于一些大型的项目,可能会很难照搬某些框架直接使用的,因为直接使用会带来一些限制或者冗余的问题。但在 CSS 框架已经日趋成熟的今天,在我们设计项目架构、规范的时候,现时转载 2014-04-16 11:21:18 · 1860 阅读 · 0 评论 -
CSS架构
对于想踏入前端开发的工程师来说,通晓CSS(Cascading Style Sheets)则是最基本的要求。而擅长CSS的Web开发人员不仅可以从视觉上复制实物原型,还可以用代码进行完美的呈现。无需使用表格、尽可能少的使用图片。如果你是个名副其实的高手,你可以快速把最新和最伟大的技术应用到你的项目中,比如媒体查询、过渡、滤镜、转换等。虽然这些都是一个真正的CSS高手所具备的,但CSS很少被人单独拿转载 2013-07-31 19:03:38 · 4637 阅读 · 0 评论 -
响应式设计介绍
2013年,智能机上网时间已经超过PC机了,并且这种趋势是不可逆的,设计移动设备将成为Web开发人员的首要任务。针对移动用户,一种方案是开发Native App,如分别给IOS和Anroid开发应用,但是这种方案成本非常高,更新比较困难;另外一种是建立一个专门的移动网站,通常是m.*.com,例如m.qian.com,这种方式需要维护2套代码,成本也比较高;还有一种方案就是响应式设计,好处是一套代码打天下,维护相对来说方便多了,成本较低,开发速度较快,适合大部分的情况。原创 2014-01-16 15:11:49 · 4143 阅读 · 0 评论 -
前端知识体系及修炼攻略
前端简介Web前端开发工程师是一个很新的职业,在国内乃至国际上真正开始受到重视的时间不超过5年。Web前端开发是从网页制作演变而来的,名称上有很明显的时代特征。随着人们对用户体验的要求越来越高,前端开发的技术难度越来越大,Web前端开发工程师这一职业终于从设计和制作不分的局面中独立出来。早期的前端其实就是Table布局,后来发展到所谓的Div + CSS网站重构,再到现在的让人眼花缭乱的各原创 2013-03-15 10:29:12 · 48614 阅读 · 11 评论 -
CSS语言精粹
本文主要是对CSS中一些比较重要的高级部分作了一些整理,这些内容也许不是经常使用,但是都很强大。本文将长期更新。原创 2013-10-30 15:51:00 · 2918 阅读 · 2 评论 -
HTML语义和前端架构
语义学是研究符号和意义之间的关系以及它们表示的内容。在语言学中,则主要是研究符号(例如单词,短语或者语音)在语言中所表达的意义。而在前端开发时,语义学则更多的关注HTML元素,属性以及它的值所表达的含义。而这些规范的语义可以帮助开发人员更好的理解网站上的信息。但是即使是以非常正式的形式来规范这些语义,程序员仍然会去修改这些语义。翻译 2013-07-31 19:12:40 · 2824 阅读 · 0 评论 -
CSS性能优化探讨
大部分前端开发人员都不关心CSS性能优化,其实对于一个复杂的页面来说,高效的选择器还是可以带来一定的性能提升的。1. CSS 选择器浏览器是“从右往左”来分析 class 的,它的匹配规则是从右向左来进行匹配的,因此最右边的选择符就是关键选择符。Descendant selector#toc > li {font-weight: bold}浏览器首先会查找页面上所有的“原创 2013-03-14 10:34:07 · 4937 阅读 · 2 评论 -
Web页面Repaint和Reflow
1. Repaintrepaint(重绘)是在一个元素的外观被改变,但没有改变布局的情况下发生,如改变visibility、outline、前景色。当repaint发生时,浏览器会验证DOM树上的所有其它结点的visibility属性。2. Reflow如果变化涉及元素布局 (如 width), 浏览器则抛弃原有属性, 重新计算并把结果传递给 render 以重新描绘页面元素, 此过程原创 2013-03-14 10:41:02 · 3093 阅读 · 0 评论 -
CSS BFC和IE Haslayout介绍
BFC(Block Formatting Context)1. BFC的定义是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。在创建了 Block Formatting Context 的元素中,其子元素会一个接一个地放置。垂直方向上他们的起点是一个包含块的顶部,两个相邻的元素之间的垂直距离取决于 ‘margin’ 特性。在原创 2012-10-30 12:27:11 · 5931 阅读 · 1 评论 -
CSS选择器笔记
原文网址:http://www.ruanyifeng.com/blog/2009/03/css_selectors.html作者: 阮一峰一、基本选择器序号选择器含义1.* 通用元素选择器,匹配任何元素2.E标签选择器,匹配所有使用E标签的元素3..infoclass选择器,匹配所有class属性中包含in转载 2013-03-05 09:13:44 · 1989 阅读 · 0 评论 -
使用overflow清理浮动(Float)
浮动的元素在文档流里是不占空间的,例如: #left, #right { float: left; } left right在上述代码中,因为id为"left", "right"两个div元素是浮动的,并且没有被清理掉,因此这两个元素在文档流里是不占空间的,通过firebug我们可以看到id为"container"的div元素的高度是0(大家可以通过给cont原创 2010-05-21 13:49:00 · 1609 阅读 · 0 评论 -
为什么每个前端开发者都要理解页面的渲染?
今天我要将关注点放到页面渲染以及其重要性上。虽然已经有很多文章提到过这个主题了,但大部分信息都是零碎的片段。为了思考这件事情,我需要研究很多信息的来源。这也就是为什么我觉得我应该写这篇文章的原因。我相信这篇文章对新手会很有用,并且对想刷新和巩固他们已经了解的东西的高手也同样适用。渲染应该从最开始当页面布局被定义时就进行优化,样式和脚本在页面渲染中扮演着非常重要的角色。专业人员知道一些技巧以避免转载 2014-07-04 10:49:32 · 2379 阅读 · 0 评论