学习CSS布局入门教程

高洛峰

发布时间：2017-03-17 09:33:37

1596人浏览过

来源于php中文网

原创

概述

Web 兴起之后，关于CSS的介绍和学习资料已经铺天盖地。
本文不涉及具体的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部分的长之和和宽之和组成
示例：

CSS Sample

content

仿虎嗅网在线视频教育门户源码2.0

仿虎嗅商学院在线视频教育门户网站源码，织梦内核，页面简洁，容易维护修改；适合做在线教育类网站，网站模板修改简单，网站设置多个广告位方便放置广告。适用于视频网站，在线教育、在线商学院；图片展示效果极佳;网站手工div+css，代码精简，首页排版整洁大方、布局合理、利于SEO、图文并茂、静态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 属性设置相对于浏览器左上角的距离





CSS Sample



content1
content2


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 布局



  
    
    CSS Sample
    
  
  
      head
      
        
nav
        content
      
      foot
  

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 宽度固定。其他都是自适应的，可以通过调整浏览器窗口的大小看到效果。