CSS

15 Oct 2019

初看CSS Grid Layout
CSS的Grid布局模型是一种双维度的布局模型。Grid布局分行列，一行或者一列叫做一轨（track）。行轨和列轨交织成网格，由框线隔开。框线不仅在网轨之间，还在网格边缘，网格的最小单元（Cell）由一个行列相交而成，若干个网格单元可以构成...
13 Oct 2019

再看CSS的Flexbox布局模型
CSS传统的定式布局，是一种流式布局，目的是为了把一整颗不管多大的DOM树塞进浏览器的视界。另外，定式布局还跟语言的阅读和书写习惯相关联，一般是从左往右从上往下。定式布局由于其通用性，可以供布局使用的选项比较少。为了实现更精确地布局，CS...
10 Oct 2019

再看CSS常态布局
布局的问题对于浏览器来说，CSS布局是这样一个问题：给定一颗DOM树，如果将他们在屏幕上列举出来。在这过程中，浏览器面临着若干限制。首先，屏幕的大小是有限的，也就是意味着浏览器的给DOM文档使用的可视区域（简称视界）是有限的。其次，视界是...
24 May 2019

走马观花看现如今流行的CSS框架
前端开发所用的工具和框架真的是五花八门，各种各样。光是和CSS相关的，就不计其数，本文试图对CSS相关的框架加以收集和整理，使选择CSS框架的时候思路更清晰一点。行业翘楚首先是几个长胜不衰的超级大牌，也就是这个行当里的明星： Twit...
26 Dec 2018

Learn CSS Layout学习笔记（三）
Learn CSS Layout学习笔记（三） Learn CSS Layout是一个在线的CSS排版教程，简明扼要。用float来进行排版 float layout example这个例子用float进行排版： nav { float:...
25 Dec 2018

Learn CSS Layout学习笔记（二）
Learn CSS Layout是一个在线的CSS排版教程，简明扼要。排版的一般矛盾在于需要显示的内容大于浏览器的可视区域，这时候我们的选择一般是让内容在垂直方向上溢出，这样用户可以通过上下滚动来观看溢出的内容。如果在水平方向上溢出的话，...
24 Dec 2018

Learn CSS Layout学习笔记（一）
Learn CSS Layout是一个在线的CSS排版教程，简明扼要。浏览器在加载完一个网页后，需要把HTML元素在浏览器的可视区域（viewport）中渲染出来，这就设计到了排版（layout）的工作。这个过程有点像在地板上铺瓷砖，但是...
27 Dec 2017

CSS布局基础
本片来简单探讨以下CSS的布局。所谓布局，是一个过程。简单的说，就是决定HTML元素在浏览器的视界（viewport）内的排列位置。浏览器解析完一个HTML页面之后，按层级以及出现的先后次数，HTML页面中的元素被组织称一个树状结构。当需...
25 Dec 2017

CSS的预处理器SASS
CSS（Cascading Style Sheet）是网页设计中最常用的语言，用于给HTML页面添加样式。CSS主要关注于如何描述样式，在可编程性上有一些缺失，导致产生了许多的CSS预处理器，用来给CSS增加可编程性和灵活度。SASS是这些...
02 Jul 2014

CSS中使用全图片背景
这个例子告诉我们怎么使用CSS来为网页布局全背景图片，简单得说，只要设置下面的CSS属性就行了：上面的代码只在较新版本的浏览器中才能好好工作，如果需要兼容较老的浏览器，可能需要其它hack了，可以参考这篇文章。有的浏览器可能不支持bac...