CSS背景图片定位属性background-position
background-position用来指定背景图片左上角相对于容器元素左上角的位置 有三种方式来指定background-position的值： 1、可以用top,left,center,right,bottom等值，比如background-position: top left; 2、使用百分比,比如background-position: 0% 0%;...
View ArticleClik here to view.
CSS盒模型和定位模型
盒模型 一图胜千言： HTML元素实际占据content部分，外围是padding填充，再往外是border边框，最外面为margin空白。 padding又叫内边距,margin又叫外边距。 可以这样想象CSS盒模型：...
View ArticleClik here to view.
FlexBox布局模型
一直以来我们都是使用float,position还有早期的table来做页面布局。现在几乎没有人会用table布局了,但float和position仍然是布局的中坚力量。 虽然table,float,position可以用来布局, 但它们都不是布局元素,只是用它们来做布局比较方便罢了。这都是trick。...
View ArticleCSS垂直外边距合并
这几天写CSS的时候发现一个奇怪的现象,子元素的margin-top会影响父元素的margin-top。本来父元素只是一个简单的容器,没有设置样式,第一个子元素设置了margin-top后,父元素也具有了一样的margin-top,原来是边距合并(Margin Collapse)在作怪。...
View ArticleCSS print 样式
显示器(screen)和打印机(printer)是两种差别很大的设备,所以从浏览器里看到的页面,打印出来也许和你看到的样子有很大的差距。screen一般使用逻辑单位比如px,而打印机则应该使用物理单位比如cm或in。我们常见的A4纸张大小在不同DPI的显示器上显示的大小是不同的。因此如果要精确的控制打印效果就应该使用print css，这是跨平台兼容的标准。不推荐使用浏览器插件方式实现打印。...
View ArticleCSS视觉格式化模型(Visual Formatting Model)
CSS视觉格式化模型用于计算如何布置和渲染各种元素,是HTML页面呈现的核心模型。 视觉格式化模型是CSS核心的,基础的概念。要完全掌控页面的展示效果,了解视觉格式化模型是有必要的。 视觉格式化模型比较复杂,要完整的描述需要很多笔墨,这里只讲核心的概念,更详细的描述见参考[1],[2],[3]和[4]。 核心概念...
View Article