随笔分类 -  CSS相关

摘要：引子 在日常开发过程中，我们经常会遇到如下的场景，一行中既有图片也有文字，而且图片还要和文字对齐。效果如下： 通常代码如下: 得到的效果却是这样的： 修改下文本为行内块盒子，并设置行高与盒子高度（盒子高度与图片高度相同）一致，效果如下: 我们发现文本区域始终与图片错开了一些。怎么解决呢？设置文字的 阅读全文

摘要：Flexbox 完全指南 我不是这篇文章的原创作者，我只是好文章的搬运工。原文地址 "A Complete Guide to Flexbox" 应用于 flex container 的属性 display 该属性定义一个 flex container，根据不同取值定义为 inline 或 block 阅读全文

摘要：CSS的盒模型描述了一些长方形盒子，这些长方形盒子被用来表示文档树中的元素，并根据 "视觉格式化模型" 进行定位。 1. 盒子的尺寸 每个盒子都有一个content区域（比如文本、图片等）和可选的包围content区域的padding、borde、margin区域。这些区域的大小由下面定义的属性决定 阅读全文

摘要：视觉格式化模型 1. 简介 在视觉格式化模型中，文档树中的每个元素都将会根据盒模型产生零到多个盒子。这些盒子的布局由如下因素决定： 盒子的尺寸和类型 定位策略（正常文档流，浮动或者绝对定位） 和文档树中其他元素的关系 额外的信息（比如视口的大小，图片的原始尺寸等） 1.1 视口（viewport） 阅读全文

摘要：1.模式匹配 在css中，通过模式匹配规则来决定给文档树中的元素应用什么样的样式。这些模式规则就被称为选择器。一个选择器可能只是一个单一的元素名称，也可能是包含复杂上下文的模式规则集合。如果一个元素满足一个选择器中的所有条件，我们就称这个选择器选中了该元素。 下面的这张表格概要的展示了CSS2.1的 阅读全文

摘要：什么是position，根据css 2.1中的描述，position和float的值决定了浏览器要采用那种定位算法来计算元素盒子的具体位置。先避开float不谈，本文主要介绍position属性的不同取值并对相对定位（relative）和绝对定位（absolute）进行一个简单的比较。 5种不同的取 阅读全文