webpack与SPA实践之管理CSS等资源

上一篇介绍了如何使用webpack搭建一个稳定的支持本地服务、自动刷新、模块热替换、使用ES6编写JavaScript的开发环境,本篇主要介绍webpack如何处理HTML应用三大元素的另一元素 - CSS及其他诸如图片、字体文件或者数据配置文件等资源。

CSS基础line-height和vertical-align属性

对于line-height属性,作为一个前端开发人员,肯定都不陌生,天天都在使用的一个CSS属性,但是这也是一个很考验一个前端开发者CSS基础功力的知识点,本篇就对line-height及其相关联属性vertical-align进行详细学介绍。

CSS盒模型(BOX Model)

CSS盒模型描述的是为文档树中的元素创建并根据CSS视觉格式化模型(visual formatting model)布局的矩形盒子。

CSS外间距崩塌(margin collapse)

CSS中块盒子的上下外间距有时会崩塌或折叠成一个单一的外间距,其值为发生崩塌的上下外间距中的最大值。

CSS之视觉格式化模型(Visual Formatting Model)

CSS中的visual formatting model(视觉格式化模型)是一种处理文档并把它显示在可视化媒体上的算法。这是CSS中的一个基础概念。visual formatting model把文档的每一个元素转换成0个,1个或多个符合CSS盒模型的盒子,包括块级盒和行内级盒。

CSS之格式化上下文(formatting context)

格式化上下文,是CSS视觉渲染过程的一个概念,它主要影响盒子的布局。普通流中的每一个CSS盒子,都会属于一个格式化上下文,是块格式化上下文(block formatting context)和行内格式化上下文(inline formatting context)中的一种。块级盒子参与块格式化上下文,行内级盒子参与行内格式化上下文。

两端对齐布局与text-align:justify

前几天在项目开发过程中需要实现一个列表两端对齐,想着在页面开发过程中也经常会有需要用到两端对齐布局的时候,就计划总结一下常见实现方式,与诸位交流。

CSS之定位机制

CSS 有三种基本的定位机制:普通文档流、浮动和绝对定位。本文简单介绍这三种定位机制。