今天遇到一个很有趣的问题：「如何实现一个宽度自适应，高度为宽度的一半的矩形」。 经过搜索引擎的筛选和自己的反复试验,发现使用padding-bottom是最完美的解决方案。 首先我们要明白，padding-top/bottom和margin-top/bottom都是相对于父元素…

之所以要专门写一篇文章去解释margin重叠，一是因为前面的文章里有提到过，怕有些童鞋不了解；二是要写的内容不是三言两语就能说清楚的。 在讲重叠之前，我们先来了解一下margin这个属性。 一. margin 基础讲解 这个属性呢，太常见，我就大概讲讲，有几点大家注意一下就好。…

文本主要解决如何理解背景定位（background-position）属性的。 文章虽短，但是内容足够拨乱反正。 其效果如下图所示，注意图片平铺是从 padding-box 开始的，另外， border 后面也是有图片的。 为了方便理解 background-position，…

在这篇文章我会介绍 9 个使你的 CSS 更加简洁优雅的使用技巧。这些技巧小生经常使用，觉得挺高效实用，所以也就有了这篇文章。 正文现在开始。 1. 建议使用 padding 代替 margin 我们在设计稿还原的时候，padding 和 margin 两个是常用的属性，但我们…

元素的高度是由什么决定对于我们解决页面显示问题和布局页面都有很大的帮助。 从结果来看确实如此，但是这句话不对，这句话多余了几个字，完全不需要设置height，只需要line-height就可以做到文字垂直居中了。 至此，前言三条结论都在本文中做出了解释和观察。

有多种实现方法，这里选几种简单方法（我看得懂的）实现。 CSS 部分完，总结，Flex 无敌。 简单实现，基本功能都有了。 还有一些稍复杂的可以写，有时间再补。

经典的上-中-下布局。 在上-中-下布局的基础上，加了左侧定宽 sidebar。 左边是定宽 sidebar，右边是上-中-下布局。 还是上-中-下布局，区别是 header 固定在顶部，不会随着页面滚动。 左侧 sidebar 固定在左侧且与视窗同高，当内容超出视窗高度时，在…

BFC 即 Block Formatting Contexts (块级格式化上下文)，它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。 具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到…

CSS中其实有很多专业术语，了解这些术语，有助于加强对css背后的机制的理解。 1. Continuous media & Paged media css样式可以让我们随心所欲的在各种电子产品上显示我们所要表达的东西，诸如在screen，在print，在projection上，…