Rumah > Artikel > hujung hadapan web > 学习CSS布局入门教程

学习CSS布局入门教程

高洛峰asal: 2017-03-17 09:33:371382semak imbas

概述

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部分的长之和和宽之和组成
示例：

<!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 的方式也不适合组件化。

Atas ialah kandungan terperinci 学习CSS布局入门教程. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：CSS3动画实现5种预载动画效果 Artikel seterusnya：移动端css单位之 “vh” & “vw”的分别介绍

Artikel berkaitan

Lihat lagi