随笔分类 - 前端-CSS
摘要：在实现图像与文本内容对齐时，我们面临着垂直对齐和环绕效果之间的挑战。 ### 期望实现效果： ### 实际： 1. 用 `float` + `flex`、`grid` 处理垂直对齐。 对齐了，但是当文本内容较多高度比图像高度高时，空间效率低，没有环绕效果。 2. 用 `float` + [shape
阅读全文
摘要：美化字体，镂空字是个不错的选择。 参考：中秋佳节之际, 一起来欣赏 9 个冷门的css属性 镂空字 p { font-size: 150px; color: white; -webkit-text-stroke: 6px red; } 字体白色，描边红色。 渐变色镂空文字 p { font-size
阅读全文
摘要：css 揭秘 [希]Lea verou 著 css 魔法 译 该书涵盖7大主题，47个css技巧，是css进阶必备书籍，开阔思路，探寻更优雅的解决方案。这本书完全用css渲染出的html写成的(布局、图片、颜色、页码、章节号等)。 涵盖7大主题 背景与边框 形状 视觉效果 字体排印 用户体验 结构与
阅读全文
摘要：css3 的魅力，不容小觑。曾经被她折服，再度回首，依旧拜倒在她的石榴裙下。相信在未来，她仍然魅力依旧。 站在巨人的肩上学习，不断提升自身实力。 用 CSS 和颜色选择工具更改图片中的颜色，即如何给小汽车换个背景色。原文地址： " 12个令人惊叹的CSS实验项目" 主要代码展示： html： css
阅读全文
摘要：温故知新，巩固基础 从 FC 开始 FC ，Formatting Context，格式化上下文，是 W3C CSS2.1 规范中的一个概念，定义的是页面中一块渲染区域，并且有一套渲染规则，它 决定了其子元素将如何定位 ，及 和其他元素的关系和相互作用 。 常见的 FC 有： BFC (Block F
阅读全文
摘要：偶然间在微信公众号 上看到了这篇文章《 "CSS Painting API" 》，算是对 的初次见面。 后来有空的时候，百度搜了一下，看了这篇文章《 "CSS神奇的conic gradient圆锥渐变" 》后，对 有了深刻的了解。 概述 ：圆锥形渐变，它的两个兄弟 、`radial gradient
阅读全文
摘要：Flexbox非常的棒，肯定是未来布局的一种主流。在过去的几年这之中，语法改变了不少，这里有一篇“旧”和“新”新的语法区别教程（如果你对英文不太感兴趣，可以移步阅读中文版本）。但是，如果我们把Flexbox新语法、旧语法和中间过渡语法混合在一起使用，我们就可以让浏览器得到完美的展示。尤其是对一个简单
阅读全文
摘要：我们都知道，固定高宽的div在网页中垂直居中很简单，相信大家也很容易的写出来，但是不是固定高宽的div如何垂直居中呢？我们在网页布局，特别是手机等web端网页经常是不固定高宽的div，那么这些div如何垂直居中呢？这篇文章，我总结一下。 固定高宽div垂直居中 如上图，固定高宽的很简单，写法如下：
阅读全文
摘要：参考：http://www.w3cplus.com/CSS3/css-secrets/sticky-footers.html 效果：将footer固定到底部。文章内容不足满屏时 footer在底部，超过满屏时footer在内容末尾。 以下这种方案：布局虽然复杂，但兼容性最好 html部分 css部分
阅读全文
摘要：在实现网页效果时，细节很重要，字体也不例外，CSS：font-family常用字体中英文对照如下： 微软雅黑： Microsoft YaHei 宋体：SimSun 黑体：SimHei 仿宋： FangSong 楷体： KaiTi 隶书：LiSu 幼圆：YouYuan 华文细黑：STXihei 华文楷
阅读全文
摘要：在浏览其他人的源代码时，看到了一个陌生的属性：width:calc(100% - 10px -10px); 出于好奇心，百度了一下，看到了以下这篇文章，http://www.w3cplus.com/css3/how-to-use-css3-calc-function.html ，讲解的很清楚，很容易
阅读全文
摘要：预处器的对比——Sass、LESS和Stylus 转载： 英文原文：http://net.tutsplus.com/tutorials/html-css-techniques/sass-vs-less-vs-stylus-a-preprocessor-shootout 中文译文：http://www
阅读全文
