CSS
关注
分享
扫一扫
xujie_0311
这个作者很懒，什么都没留下…
展开
-
描述下 “reset” CSS 文件的作用和使用它的好处。
重置浏览器的css默认属性；浏览器的品种不一样，那么对默认样式的解释不一样，通过reset可以达到显示一致的效果。原创 2014-12-26 18:25:23 · 4044 阅读 · 0 评论 -
使用 CSS 预处理器的优缺点有哪些？(SASS，Compass，Stylus，LESS) 描述下你曾经使用过的 CSS 预处理的优缺点。
缺点：简单来说CSS预处理器语言较CSS玩法变得更高级了，但同时降低了自己对最终代码的控制力。更致命的是提高了门槛，首先是上手门槛，其次是维护门槛，再来是团队整体水平和规范的门槛。这也造成了初学学习成本的昂贵。优点：用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。通俗的说，CSS预处理器用一种专门的编程语言，进行Web转载 2015-01-03 20:19:24 · 4492 阅读 · 0 评论 -
解释下浏览器是如何判断元素是否匹配某个 CSS 选择器？
先产生一个元素集合，然后从后往前判断； 浏览器先产生一个元素集合，这个集合往往由最后一个部分的索引产生（如果没有索引就是所有元素的集合）。然后向上匹配，如果不符合上一个部分，就把元素从集合中删除，直到真个选择器都匹配完，还在集合中的元素就匹配这个选择器了。举个例子，有选择器：body.ready #wrapper > .lol233先把所有 class转载 2015-01-03 21:40:04 · 3008 阅读 · 0 评论 -
如果设计中使用了非标准的字体，你该如何去实现？
所谓的标准字体是多数机器上都会有的，或者即使没有也可以由默认字体替代的字体。方法：1、用图片代替 2、web fonts在线字库，如Google Webfonts，Typekit 等等；http://www.chinaz.com/free/2012/0815/269267.shtml 3、@font-facehttp://www.qianduan.net/google-转载 2015-01-03 21:00:03 · 5925 阅读 · 0 评论 -
在书写高效 CSS 时会有哪些问题需要考虑？
1.样式是：浏览器是从右向左来解析一个选择器的 2.ID最快，Universal最慢 有四种类型的key selector，解析速度由快到慢依次是：ID、class、tag和universal 3.不要tag-qualify （永远不要这样做 ul#main-navigation { } ID已经是唯一的，不需要Tag来标识，这样做会让选择器变慢。） 4.后代选择器最糟糕（换句话说，下面这个选择器转载 2014-12-30 21:03:23 · 2857 阅读 · 0 评论 -
如何优化网页的打印样式？
1、指定媒体的两种方法：方法A:Media属性media="screen" href="screenstyles.css" />方法B:@media或@import@import url("screenstyles.css") screen; @media print { /* 打印时使用的样式放置在此 *}转载 2014-12-30 20:10:22 · 4353 阅读 · 0 评论 -
讨论CSS hacks，条件引用或者其他
为了实现浏览器兼，主要有以下几种方式：1、给标记添加包含User Agent的class属性” 这种方式得到的标记可能会是这样的：<html class="ua-wk ua-wk535">2、条件样式表 这种注释的方式只有IE浏览器支持，其他浏览器只会把它当做html注释，不起任何作用。一般使用Javascript或者服务器端程序判断User Ag转载 2014-12-29 21:43:07 · 1406 阅读 · 0 评论 -
有哪些的隐藏内容的方法（如果同时还要保证屏幕阅读器可用呢？）
1.display:none;的缺陷搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略屏幕阅读器（是为视觉上有障碍的人设计的读取屏幕内容的程序）会忽略被隐藏的文字。2. visibility: hidden ;的缺陷这个大家应该比较熟悉就是隐藏的内容会占据他所应该占据物理空间3.overflow:hidden;一个比较合理的方法.texthid转载 2014-12-29 22:39:01 · 2944 阅读 · 0 评论 -
你熟悉 SVG 样式的书写吗？
是绘制矢量图形的html5的标签，它是用SVG 使用 XML 格式定义图形的。其定义格式为：//XML标准文件头，从左到右依次表示：版本号是1.0，standalone 定义了外部定义DTD 文件的存在 //因为上面是no<svg viewBox = "0 0 1000 1000" version = "1.1" xmlns="http://www.w3.org/20转载 2014-12-30 15:55:35 · 2023 阅读 · 0 评论 -
你用过媒体查询，或针对移动端的布局/CSS 吗？
通过媒体查询可以为不同大小和尺寸的媒体定义不同的css，适合相应的设备显示；即响应式布局@media screen and (min-width: 400px) and (max-width: 700px) { … }@media handheld and (min-width: 20em), screen and (min-width: 20em) { … }转载 2014-12-30 15:52:34 · 6554 阅读 · 0 评论 -
你用过栅格系统吗？如果使用过，你最喜欢哪种？
Bootstrap中的流式布局；Bootstrap提供了两种布局方式，固定式布局和流式布局方式，Bootstrap的布局实际上是在栅格外加个容器(container)，因此两种布局方式的唯一区别是：固定布局加的是固定宽度(width)的容器，流式布局加的是自适应(或叫可变)宽度的容器。1.固定布局body> div class="container">转载 2014-12-30 10:51:10 · 2338 阅读 · 0 评论 -
你最喜欢的图片替换方法是什么，你如何选择使用?
对于这个问题既要考虑到用户体验又要考虑到搜索引擎1、1>"image.gif" alt="Image Replacement">1> 首先使用图片；然后给图片添加一个alt值，对搜索引擎友好一些。缺点：对搜索引移开文字擎不友好，搜索引擎对于图片alt属性的权重肯定是低于H1的，就算你的图片是放在H1标签里面。2、移开文字1>Image Replacement1> h1转载 2014-12-29 09:58:56 · 3235 阅读 · 0 评论 -
列举不同的清除浮动的技巧，并指出它们各自适用的使用场景。
http://www.cnblogs.com/yuzhongwusan/archive/2008/06/18/1224383.html1.使用空标签清除浮动 在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。2.使用overflow 包含浮动元素的父标签添加css属性 overflow:auto; zoom:1;转载 2014-12-28 22:33:51 · 2838 阅读 · 0 评论 -
解释下 CSS sprites，以及你要如何在页面或网站中使用它。
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。CSS Sprites为一些大型的网站节约了带宽，让提高了用户的加载速度和用户体验，不转载 2014-12-28 22:58:47 · 3343 阅读 · 0 评论 -
解释下浮动和它的工作原理
浮动元素不会占据文档流当浮动元素碰到包含它的元素的边框或者其他浮动元素的边框时会停留下来。原创 2014-12-26 19:00:59 · 4162 阅读 · 0 评论 -
解释一下你对盒模型的理解，以及如何在 CSS 中告诉浏览器使用不同的盒模型来渲染你的布局。
盒子模型分为两类：W3C标准盒子模型和IE盒子模型 （微软确实不喜欢服从他家的标准）这两者的关键差别就在于：W3C盒子模型——属性高（height）和属性宽（width）这两个值不包含 填充（padding）和边框（border）IE盒子模型——属性高（height）和属性宽（width）这两个值包含 填充（padding）和边框（border）我们在编写页面代码的时候应该转载 2015-01-03 22:22:03 · 10208 阅读 · 0 评论