目录：1、Div+Css布局教程（-）CSS必备知识注：本教程要求对html和css有基础了解。一、CSS布局属性Width：设置对象的宽度（width:45px）。Height：设置对象的高度(Height:45px;)。Background：设置对象的背景颜色、背景图像。1.背景颜色backgr...
学习了css布局的基础后又来翻阅《精通css》这本经典书籍，对布局有了进一步的认识。基于浮动的布局两列的布局仍然是使用一个元素向左浮动，一个元素向右浮动，值得注意的是要加入display：inline 用来防止IE中的双外边距浮动产生的bug。三列布局与昨天的使用了不同的方法，全部依靠浮动来实现，与...
分类：
Web程序 时间：
2015-04-16 23:10:45
阅读次数：
186
三种定位机制1.标准文档流：从上到下，从左到右输出文档内容2.浮动3.绝对定位需要注意的是块级元素如div p ul 等 行级元素如span strong img input等块级元素与行级元素都是盒子模型，下面说下盒子模型盒子模型盒子模型是网页布局的基石，border padding m...
分类：
Web程序 时间：
2015-04-15 00:56:44
阅读次数：
212
#main{ max-width:600px; margin:0 auto;}用max-width替代width，可以使屏幕比600px窄时自动调整内容宽度，而不是出现滚轮。所有主流浏览器包括IE7都支持。*{ -webkit-box-sizing:border-box; ...
分类：
Web程序 时间：
2015-04-14 21:28:38
阅读次数：
114
居中是我们使用css来布局时常遇到的情况。使用css来进行居中时，有时一个属性就能搞定，有时则需要一定的技巧才能兼容到所有浏览器，本文就居中的一些常用方法做个简单的介绍。注：本文所讲方法除了特别说明外，都是兼容IE6+、谷歌、火狐等主流浏览器的。先来说几种简单的、人畜无害的居中方法1. 把margi...
分类：
Web程序 时间：
2015-04-12 20:49:18
阅读次数：
180
一个自适应的宽度的两列网页布局，含头部和尾部，也是比较经典的二栏风格设计，在本例中，网页左栏是自适应宽度的，不论你的浏览器窗口大小，它都不会出现滚动条，你完全可以把它拷贝回去做为一个模板来用，也是学习CSS布局的一个好范例。...
分类：
Web程序 时间：
2015-04-11 14:53:48
阅读次数：
113
什么是BFCBFC(Block Formatting Context)，简单讲，它是提供了一个独立布局的环境，每个BFC都遵守同一套布局规则。例如，在同一个BFC内，盒子会一个挨着一个的排，相邻盒子的间距是由margin决定且垂直方向的margin会重叠。而float和clear float也只对同...
分类：
Web程序 时间：
2015-04-09 23:41:52
阅读次数：
179
很多人都在做前端，当然这里包括很多新手，也许在新手的想法就是在做布局的时候不要用font标签之类的就算是web标准了，这样一来，造成如今网上“div泛滥”，一看源文件，霍，除了div没其他标签了。这里，我可以很负责的告诉大家，这不叫web标准，这叫“div+css”。名副其实的“div+css”。也...
分类：
Web程序 时间：
2015-04-09 19:06:16
阅读次数：
130
CSS平铺背景图片实现百分比图表，这个示例主要是练习CSS如何布局出规则图形，用CSS布局出图表图，这个技巧 也很常用，实现步骤却很简单，新手也能看懂，研究一下。...
分类：
Web程序 时间：
2015-04-09 17:32:01
阅读次数：
159
