本文不涉及具体的css语法之类的，而是希望从初学者的角度，让没有接触或很少接触css的人能快速的了解 css 到底是什么以及如何使用。
什么是 css了解一个概念，首先看到的就是它的名字，而往往被忽略的，也是它的名字。
css (cascading style sheets)，可以翻译成中文 层叠样式表 。从名字可以看出：
层叠：说明 样式可以叠加，所以会有优先级
样式表：说明css是描述样式的，而且只是个 表 ，不是程序语言，所以后来随着 css 的应用越来越多，才会有 sass 和 less 这些扩充 css 语法的语言出来
css 的作用css 的作用就是样式，其实 web 只用 html也可以做出来，只是随着机器和浏览器性能的提升，人们对网页的美观和易用性要求越来越高，css 的重要性才逐渐凸显。
css 我觉得有2个主要的作用：
可以将 web 的样式统一管理，便于修改，类似于程序语言中的变量或者配置文件
将网页内容和样式分离开，让灵活呈现内容成为可能
注意 html 才是网页的实际内容，css 只是控制html元素的如何显示，显示与否。
css for 布局css 在布局上用的最多，就是因为了有了 css，才会有所谓的 p+css 布局方式，以前用 html 都是 table 布局。
初步了解 p+css 的布局，我觉得了解3点就够了，框模型，定位和浮动。
框模型每个p对于css来说都是一个 框 。每个框由内到外由4部分组成 content padding border margin
p 的长和框由这4部分的长之和和宽之和组成
示例：
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"/> <title>css sample</title> <link href="index.css" rel="stylesheet"/> </head> <body> <p>content</p> </body> </html> body { background-color: #faebd7; } p { width: 100px; height: 100px; padding: 30px; border: 10px solid blue; margin: 10px; background-color: red; text-align: center; }
例子很简单，但是可以看出：
从外到内 依次是 margin, border, padding, content
p 的 width 和 height 只是 content 的大小
定位理解了 框模型之后，定位也很简单，其实就是将一个个框定位在页面上。
定位分为绝对定位和相对定位。
绝对定位就是在浏览器上的绝对位置，通过 top 和 left 属性设置相对于浏览器左上角的距离
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"/> <title>css sample</title> <link href="index.css" rel="stylesheet"/> </head> <body> <p id="p1">content1</p> <p id="p2">content2</p> </body> </html> body { background-color: #faebd7; } p { width: 100px; height: 100px; padding: 30px; border: 10px solid blue; margin: 10px; background-color: red; text-align: center; position: absolute; } #p1 { top: 100px; left: 100px; } #p2 { top: 200px; left: 200px; }
绝对定位明确但不灵活，除非屏幕大小能固定，否则需要多套css。设置不好会造成元素的重叠。
绝对定位中有个很关键的设置是 position: absolute
相对定位相对定位中每个 p 的 top 和 left 不再是相对浏览器的左上角了。而是相对剩余位置的左上角。
同样是上面的例子，把 position: absolute 换成 position: relative 可以发现2个p 不再重叠了。
浮动p 默认是 inline的，也就是每个 p 占据了一行。
布局时，如果希望多个p排列在一行，那么就会用到浮动（或者用以前的 table方式）
设置 p 浮动属性之后，就可以用p布局出各种结构。
下面以常见的管理系统为例，做一个简单的 p+css 布局
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"/> <title>css sample</title> <link href="index.css" rel="stylesheet"/> </head> <body> <p id="head">head</p> <p id="middle"> <p id="nav">nav</p> <p id="content">content</p> </p> <p id="foot">foot</p> </body> </html> body { background-color: #faebd7; height: 100%; margin: 0px; padding: 0px; } p { border: 1px solid black; text-align: center; } #head { height: 50px; width: 100%; } #middle { width: 100%; top: 50px; bottom: 100px; left: 0px; position: absolute; } #nav { float: left; width: 200px; height: 100%; } #content { height: 100%; overflow: hidden; } #foot { height: 100px; width: 100%; bottom: 0px; left: 0px; position: absolute; }
上面的示例中，head，foot 高度固定，nav 宽度固定。其他都是自适应的，可以通过调整浏览器窗口的大小看到效果。
总结css 布局很简单，如果还有其他的交互动作，可以通过js来实现（比如导航和内容的联动）。
现在已经基本没有人会用 table 的布局方式了，因为 table 本来只展现数据的一种方式，row，cell 的方式也不适合组件化。
以上就是学习css布局入门教程的详细内容。