夭幻境地

关注技术,关心成长,关怀世事人情

  • img元素下方空白的来源

    2018-05-23 15:29 276
    开发中经常会遇到图片元素img下方多余的空白,到底是怎么回事呢?要弄明白这个问题首先要弄明白CSS对于 display: inline 元素的 vertical-align 各个值的含义。vertical-align 的默认值是 baseline,这是一个西文排版才有的概念:  可以看到,出现在baseline下面的是 p 啊,q 啊, g 啊这些字母下面的那个尾巴。对比一下 vertical-align 的另外两个常见值,top 和 bottom:  可以看到,baseline 和 bottom 之间有一定的距离。实际上,inline 的图片下面那一...
  • Flex布局:语法

    2017-09-24 12:17 1267
    网页布局(layout)是 CSS 的一个重点应用。布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。Flex 布局将成为未来布局的首选方案。本文介绍它的语法。一、Flex 布局是什么?Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模...
  • SCSS/Sass基础教程(二)

    2016-12-27 09:58 945
    5. 混合器;如果你的整个网站中有几处小小的样式类似(例如一致的颜色和字体),那么使用变量来统一处理这种情况是非常不错的选择。但是当你的样式变得越来越复杂,你需要大段大段的重用样式的代码,独立的变量就没办法应付这种情况了。你可以通过sass的混合器实现大段样式的重用。混合器使用@mixin标识符定义。看上去很像其他的CSS @标识符,比如说@media或者@font-face。这个标识符给一大段样式赋予一个名字,这样你就可以轻易地通过引用这个名字重用这段样式。下边的这段sass代码,定义了一个非常简单的混合器,目的是添加跨浏览器的圆角边框。@mixin rounded-corners { ...
  • SCSS/Sass基础教程(一)

    2016-12-27 09:56 1019
    前言:SCSS 与 Sass 异同SCSS 是 Sass 3 引入新的语法,其语法完全兼容 CSS3,并且继承了 Sass 的强大功能。也就是说,任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件。另外,SCSS 还能识别大部分 CSS hacks(一些 CSS 小技巧)和特定于浏览器的语法,例如:古老的 IE filter 语法。由于 SCSS 是 CSS 的扩展,因此,所有在 CSS 中正常工作的代码也能在 SCSS 中正常工作。也就是说,对于一个 Sass 用户,只需要理解 Sass 扩展部分如何工作的,就能完全理解 SCSS。大部分扩展,例如变量、...
  • 谈谈CSS的设计模式

    2016-12-04 15:45 827
    什么是设计模式?曾有人调侃,设计模式是工程师用于跟别人显摆的,显得高大上;也曾有人这么说,不是设计模式没用,是你还没有到能懂它,会用它的时候。先来看一下比较官方的解释:“设计模式(Design pattern)是一套被反复使用、多数人知晓的、经过分类的、代码设计经验的总结。使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性。 毫无疑问,设计模式于己于他人于系统都是多赢的;设计模式使代码编制真正工程化;设计模式是软件工程的基石脉络,如同大厦的结构一样。”今天我们来聊聊CSS的设计模式。设计模式,这个词汇我们常见,几乎所有的编程语言都会有几套,但深入研究的人不多,原因如下:似乎没...
  • 关于CSS Transition,你需要知道的事

    2016-12-02 21:24 1132
    CSS3的过渡属性,给web应用带来了简单优雅的动画,但是比起初次相见,他(transition)有许多细则。在这片文章中,我将会专研CSS3的过渡(transition)中更加复杂的部分,从链式和事件到硬件加速和动画函数。让浏览器控制动画序列,通过改变帧率,减少绘画和减少GPU的工作,能够优化性能和效率。浏览器支持CSS transitions在每一版的firefox、afari和Chrome中支持。IE10以上支持。如果CSS动画在一个特定浏览器不支持,那么属性就会立即被应用,优雅地降级。Webkit内核的浏览器(Safari 和 Chrome),依然需要-webkit前缀,用于动画和渐变...
  • @media print——为打印机应用CSS样式

    2016-11-20 09:54 943
    大多数Web设计师对打印控制还不是很熟悉,他们往往更迷恋像素,而不是打印机。在现实世界中,很多人依赖从网站上打印网页来参考: 在这个数字时代, 在一些特殊的场合,很多人手中还会拿着纸张。Web开发人员可以采取一些措施来弥补打印机和液晶屏之间的差距。显示器(screen)和打印机(printer)是两种差别很大的设备,所以从浏览器里看到的页面,打印出来也许和你看到的样子有很大的差距。screen一般使用逻辑单位比如px,而打印机则应该使用物理单位比如cm或in。我们常见的A4纸张大小在不同DPI的显示器上显示的大小是不同的。因此如果要精确的控制打印效果就应该使用printcss,这是跨平台兼容的...
  • LESS 函数手册

    2016-10-22 16:42 892
    索引 escape(@string); // 通过 URL-encoding 编码字符串 e(@string); // 对字符串转义 %(@string, values...); // 格式化字符串 unit(@dimension, [@unit: ""]); // 移除或替换属性值的单位 color(@string); // 将字符串解析为颜色值 data-uri([mimetype,] url); // * 将资源内嵌到cs...
  • LESS 语言特性

    2016-10-22 16:32 1888
    作为CSS的一种扩展,LESSCSS不仅向下兼容CSS的语法,而且连新增的特性也是使用CSS的语法。这样的设计使得学习LESS很轻松,而且你可以在任何时候回退到CSS。 变量 很容易理解: @nice-blue: #5B83AD; @light-blue: @nice-blue + #111; #header { color: @light-blue; } 输出: #header { color: #6c94be; } 甚至可以在定义变量值时使用其它的变量: @fnord: "I am fnord."; @var: 'fnord'; content: @@var; 解析...
  • IE中a标签绝对定位时才生的bug

    2016-10-11 20:11 1092
    对a链接的display设置为block,以便整个标签可以点击。但是,如果对该标签设置为position:absolute后,会发现在ie6、ie7下有时点击无效,ie8下有效(ie8标准),使用zoom:1方式也无法解决问题。解决方案使用position:relative而不是position:absolute;添加背景色;添加透明的背景图片,gif或png,但会增加无意义的http请求;使用background:url(about:blank),最佳方案(推荐);在A外面套一个DIV,给DIV定义width、height、position:absolute。...................
  • 加载更多