16 posts tagged with "css"

有时候在元素显示区域并不充分的时候，我们会限制其宽度。但是，却会带来文本太长导致与我们预期的效果不符合。因此，我们常常采用 CSS 来控制文本的显示或者 JS 截取的方式来解决该问题。

一文介绍grid网格布局的用法和常见布局，更多的内容可以在mdn阅读。

一文介绍 flex 弹性布局的用法和常见的布局，更多的内容可以在mdn阅读。

在实现一些 CSS 特效中，比如元素的颜色随着高度而变化，或者是元素实现移动。这些效果都是属于动画效果。而动画效果不但可以给页面增加一些趣味性，还可以给用户视觉上的冲击感。而实现 CSS 动画可以采用的是 CSS3 中的新属性 transform（变形）、transition（过渡） 和 animation（帧动画）来实现。

在上文《CSS 方法论》中，介绍了四种常见的方法论，但是在实际开发是很难完全落实某一方法论的约定的。所以我在实际开发的需要中，根据 CSS 方法论中 BEM + SMACSS 这两种方法论的结合命名约定总结出自己的一套 CSS 书写规范。

该 CSS 书写规范只是提供大致的规范准则及理论知识，在实际项目中应考虑具体情况而作出调整。

一个前端项目中，CSS 实现各种样式效果并不困难。但在后期维护中，CSS 不规范的书写或者是杂乱命名之类却经常让我们厌恶，从而重新书写自己的样式。因此，CSS 规范书写对于前端项目是至关重要的。它这样不仅可以让我们写出优雅的代码，也方便他人阅读和维护。

本文内容学于 《前端躬行记》 - CSS 方法论，由此将其记录在此，方便阅读和查看。

图片空白间隙是怎么出现以及解决方案。

在上篇中 CSS 参考线 中已经讲过line-height设置数值改变 参考线 上下两个 间隙 gap的高度来实现文本间距改变的效果。 line-height是可以被子元素所继承，这就意味父元素设置了 line-height，子元素在不设置 line-height 也同样有着父元素 line-height的效果。

网络上的各式各样的文字是怎么制作出来的？通常是借助 fontforge 工具根据不同间距的参考线和字体形态制作而成。而制作字体大致上可以会有几根参考线。不同类型的字体，其参考线是不一样（主要体现在线与线的间距），而同一个文字类型，参考线一致。

浮动 float 元素作为可视化模型中主要的三大主要的排列方式之一。更多的基础知识在 CSS 基础 2 中已有相应介绍了。本篇是记录浮动 float 元素的一些细节规则和扩展应用。