青春木鱼的博客

格式化上下文指的是初始化元素定义的环境。包含两个要点，一个是元素定义的环境，一个是初始化。在 CSS 中，元素定义的环境有两种，一种是块格式化上下文( Block formatting context )，另一种是行内格式化上下文( Inline formatting context )。 这两种上下文定义了在 CSS 中元素所处的环境，格式化则表明了在这个环境中，元素处于此环境中应当被初始化，即元素在此环境中应当如何布局等。以上解释专业点的说法是：在常规流中的框，都属于一个格式化的上下文中。

如何缓存 JavaScript、CSS 文件是一个关注点，因为这能显著提升网站性能、减少服务器负载、节省带宽。简而言之，缓存是指浏览器存储网页资源的一种机制，使得用户在访问同一页面时，无需重新下载相同的资源。特别地，对于JavaScript和CSS文件，一旦缓存，就可以在用户的后续访问中使用本地副本，这样可以加快页面加载速度、改善用户体验。其中，最常用的缓存实现方式包括设置HTTP缓存标头，如Cache-Control和Expires，以及使用服务工作器（Service Workers）。

media query功能：这种机制允许设置在css样式中添加media query表达式，这种表达式不仅可以对媒体类型进行匹配，也可以对媒体分辨率、色深等各种细节进行匹配，因此可以针对不同类型，不同参数细节的媒体设计提供精确控制。语法：@media 设备名 only（选取条件） not （选取条件） and （设备选取条件） ， 设备二｛sRules｝

移动端适配是指为了提高应用在各种不同分辨率、尺寸和操作系统上的表现，而对其界面和功能进行相应的调整和优化。随着移动设备的普及，移动端适配问题日益凸显，处理移动端适配对于提高用户体验和降低开发成本至关重要。

CSS实现两栏布局和三栏布局方法详解

css中的负边距(negative margin)是布局中的一个常用技巧，只要运用得合理常常会有意想不到的效果。很多特殊的css布局方法都依赖于负边距，所以掌握它的用法对于前端的同学来说，那是必须的。本文非常基础，老鸟可以略过。

‌FOUC（Flash of Unstyled Content）是指网页在加载过程中，由于CSS样式加载延迟或加载顺序不当，导致页面出现闪烁或呈现出未样式化的内容的现象。‌这种现象通常发生在HTML内容已经加载，但CSS样式表尚未加载或加载顺序不正确时，导致页面短暂地以无样式状态显示，随后样式表加载完成，页面才呈现出预期的样式。这种用户体验不佳的现象，即被称为FOUC。总之，FOUC 是一种常见的 Web 开发问题，可以采取内嵌样式表、预加载样式表、延迟加载样式表、使用样式表框架或者使用样式表链接的 med

外部引入 CSS 有2种方式，link 和 @import。就结论而言，强烈建议使用 link ，慎用 @import 方式。

css 把“字（word）”定义为任何非空白符字符组成的串，并由某种空白字符包围。letter-spacing和word-spacing这两个属性都用来添加他们对应的元素中的空白。有时候经常会把两者搞混淆，接下来，就和大家聊聊css中间隔的设置。

defer与async的区别是：前者要等到整个页面正常渲染结束，才会执行；后者一旦下载完，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染。一句话，defer是“渲染完再执行”，async是“下载完就执行”。另外，如果有多个defer脚本，会按照它们在页面出现的顺序加载，而多个async脚本是不能保证加载顺序的。

简单而言,这东西就是自动加前缀的,在link中，或是style中，或是dom元素的style中书写CSS3 code，或是jQuery .css()方法此脚本会自动补上需要的前缀，让响应的浏览器支持该CSS3属性，避免了一些老长的浏览器前缀兼容性。

@import 规则可以在一个CSS文件中引用另一个CSS文件

1vh它表示的是当前屏幕可见高度的1/100，而1%它表示的是父元素长或者宽的1%

在不对垂直对齐方式进行调整的状况下，图片（底部）默认是和文本基线对齐（baseline）的，因为基线对齐，所以，图片的下方就会产生一条空白缝隙的状况

前端性能优化分为两个方向，一是工程化方向，另一个是细节方向。性能优化是把双刃剑，有好的一面也有坏的一面。好的一面就是能提升网站性能，坏的一面就是配置麻烦，或者要遵守的规则太多。并且某些性能优化规则并不适用所有场景，需要谨慎使用。前端性能优化方法：1、减少http请求数；2、图片优化；3、使用CDN；4、开启GZIP；5、样式表和JS文件的优化；6、使用无cookie域名；7、前端代码结构的优化。

浅谈CSS Grid比Bootstrap更适合创建布局的原因——​​​​​​​为什么CSS Grid比Bootstrap更适合布局？CSS Grid是一种全新的创建布局的方式，在我们第一次使用浏览器原生的CSS网格布局后，发现这种方式给我们带来太多好处了。

grid布局就是表格布局(grid layout)，或者称之为栅格布局也行。因为栅格布局的概念来自于bootstrap，这里使用栅格布局来与bootstrap做关联，是因为它俩是描述的同一个东西。自从有了CSS3原生表格布局，想象一下，以前用样式框架在一行中添加很多属性，无形中增加了几倍代码，grid布局就用几行代码就完成了框架很多配置才完成的功能，这是多美的一个进步。网格布局的属性相当多，有很多一个属性代表了另外两个属性的综合体。

回炉重造，温故知新，css常规布局系统整理——实战开发后复盘小结,，全是经验之谈

css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分；比如，一句话中的第一个字母，或者是列表中的第一个元素。

Sass 是一个世界上最流行 、成熟、稳定、强大的 专业级CSS 扩展语言解析器。Sass 完全兼容所有版本的 CSS。我们对于 兼容性非常重视，所以你可以放心地使用任何可用的 CSS 库。Sass 拥有比其他任何 CSS 扩展语言更多的功能和特性。

响应式布局有的方法有：1、媒体查询；2、百分比【%】；3、vw或vh，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度；4、rem单位是相对于字体大小的html元素；5、flex弹性布局。

Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜、透视等。其中，skew(倾斜)，perspective（透视）不常使用。transform是css3新增的属性，在IE9及以下的浏览器会出现兼容问题，所以要慎用！

font-weight我们很多人都用过，甚至经常用，但你们真的了解font-weight吗？今天我带大家深入了解一下font-weight

制作一份Web前端开发规范手册——为提高团队协作效率，便于后台人员添加功能及前端后期优化维护，输出高质量的文档，特制订此文档。本规范文档一经确认，前端开发人员必须按本文档规范进行前台页面开发。本文档如有不对或者不合适的地方请您及时提出，以便进一步优化文档

无论是前端还是客户端开发都离不开页面的展示，而页面是由布局和各种组件构成的。布局好比是建筑里的框架，而组件则相当于建筑里的砖瓦。组件按照布局的要求依次排列，就组成了用户所看见的界面。研究布局的目的是让我们的页面尽可能的还原UI设计给我们的设计图，适配各种尺寸的屏幕，使其在各种尺寸屏幕上能很好地显示出我们的视图。

建议看完本文，你会受益很多！本文将带你深入了解前端网页布局的几种方式，诸如关于静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念以及区别。

CSS预处理器技术已经非常的成熟，而且也涌现出了很多种不同的CSS预处理器语言，比如说：Sass（SCSS）、LESS、Stylus、Turbine、Swithch CSS、CSS Cacheer、DT CSS等。如此之多的CSS预处理器，那么我们应该选择哪种CSS预处理器？所谓CSS预处理器，就是用一种专门的编程语言，进行Web页面样式设计，再通过编译器转化为正常的CSS文件，以供项目使用...