概述

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，才会有所谓的 div+css 布局方式，以前用 HTML 都是 table 布局。

初步了解 div+css 的布局，我觉得了解3点就够了，框模型，定位和浮动。

框模型

每个div对于css来说都是一个 框 。每个框由内到外由4部分组成 content padding border margin

div 的长和框由这4部分的长之和和宽之和组成

示例：

<!doctype html>

<html lang="en">

  <head>

    <meta charset="UTF-8"/>

    <title>CSS Sample</title>

    <link href="index.css" rel="stylesheet"/>

  </head>

  <body>

    <div>Content</div>

  </body>

</html>

body {

  background-color: #FAEBD7;

}

div {

  width: 100px;

  height: 100px;

  padding: 30px;

  border: 10px solid blue;

  margin: 10px;

  background-color: red;

  text-align: center;

}

例子很简单，但是可以看出：

  1. 从外到内 依次是 margin, border, padding, content
  2. div 的 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>

<div id="div1">Content1</div>

<div id="div2">Content2</div>

</body>

</html>

body {

  background-color: #FAEBD7;

}

div {

  width: 100px;

  height: 100px;

  padding: 30px;

  border: 10px solid blue;

  margin: 10px;

  background-color: red;

  text-align: center;

  position: absolute;

}

#div1 {

  top: 100px;

  left: 100px;

}

#div2 {

  top: 200px;

  left: 200px;

}

绝对定位明确但不灵活，除非屏幕大小能固定，否则需要多套css。设置不好会造成元素的重叠。

绝对定位中有个很关键的设置是 position: absolute

相对定位

相对定位中每个 div 的 top 和 left 不再是相对浏览器的左上角了。而是相对剩余位置的左上角。

同样是上面的例子，把 position: absolute 换成 position: relative 可以发现2个div 不再重叠了。

浮动

div 默认是 inline的，也就是每个 div 占据了一行。

布局时，如果希望多个div排列在一行，那么就会用到浮动（或者用以前的 table方式）

设置 div 浮动属性之后，就可以用div布局出各种结构。

下面以常见的管理系统为例，做一个简单的 div+css 布局

<!doctype html>

<html lang="en">

  <head>

    <meta charset="UTF-8"/>

    <title>CSS Sample</title>

    <link href="index.css" rel="stylesheet"/>

  </head>

  <body>

      <div id="head">head</div>

      <div id="middle">

        <div id="nav">nav</div>

        <div id="content">content</div>

      </div>

      <div id="foot">foot</div>

  </body>

</html>

body {

  background-color: #FAEBD7;

  height: 100%;

  margin: 0px;

  padding: 0px;

}

div {

  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 布局入门的更多相关文章

  1. (转)Div+CSS布局入门

    在网页制作中,有许多的术语,例如:CSS.HTML.DHTML.XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础 ...

  2. Div+CSS布局入门教程

    http://www.blueidea.com/tech/site/2006/3574.asp ———————————————————————————————————————————————————— ...

  3. html响应式布局，css响应式布局，响应式布局入门

    html响应式布局,css响应式布局,响应式布局入门 >>>>>>>>>>>>>>>>>>& ...

  4. 3.实战HTML+CSS布局（实例入门篇）

    转自:https://www.cnblogs.com/hmyprograming/archive/2012/03/23/2414373.html 学习这篇入门教程我们假定你已经具有了一定的HTML基础 ...

  5. WEB入门.七 CSS布局模型

    学习内容 标准文档流 流动模型(flow model) 浮动模型(float model) CSS基本布局 能力目标 理解标准文档流 使用流动模型实现页面布局 使用浮动模型实现页面布局 掌握常用CSS ...

  6. CSS 三栏布局入门

    首先,我是CSS盲[只听说过box model],没动手实践过,关于margin padding只知名称,不明细节.刚看过一叶斋大哥关于css布局的博文,再动手实践,动手记录下点滴积累以备后用. &l ...

  7. 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码

    原文地址:http://www.divcss5.com/jiqiao/j771.shtml css布局居中和CSS内容居中区别和对应DIV CSS代码教程与图文代码案例篇 对于新手来说DIV CSS布 ...

  8. DIV+CSS布局问题：一个宽度不确定的DIV里面放三个水平对齐的DIV，左右两个DIV宽度固定为150px，中间那个DIV充满剩余的宽度

    一个入门的DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度. 说明:代码非真实情况下使用,所以直接简单. 没耐 ...

  9. CSS布局十八般武艺都在这里了

    CSS布局十八般武艺都在这里了 Shelley Lee 4 个月前 布局是CSS中一个重要部分,本文总结了CSS布局中的常用技巧,包括常用的水平居中.垂直居中方法,以及单列布局.多列布局的多种实现方式 ...

随机推荐

  1. WCF账户密码认证

    记录一下我实现WCF用户认证与权限控制的实现方法, 也让其他网友少走一些弯路. 内容写得非常小白(因为我也是小白嘛), 比较详细, 方便WCF知识基础薄的朋友 主要分为下面几个步骤 作为例子, 创建最 ...

  2. 如此清除sql server 2008 记住的用户名

    在C盘下搜索这个文件  SqlStudio.bin 搜索到后删除就可以,这样登录Sql server 时就不会有用户名密码之类的,相当于做了初始化操作,但里面的数据库什么的都是有的. 这只是个删除记住 ...

  3. 调用 WebService 浏览器提示 500 (Internal Server Error) 的原因及解决办法

    在 ASP.NET 开发中,WebService部署成站点之后,如果在本地测试WebService可以运行,在远程却显示“测试窗体只能用于来自本地计算机的请求”或 者"The test fo ...

  4. mysql中的where和having子句的区别

    mysql中的where和having子句的区别 having的用法 having字句可以让我们筛选成组后的各种数据,where字句在聚合前先筛选记录,也就是说作用在group by和having字句 ...

  5. Android NDK, No rule to make target

    这种问题一般是android.mk里面没有找到对应的源文件 http://stackoverflow.com/questions/11570167/android-ndk-no-rule-to-mak ...

  6. .net 批量打印可实现方案

    最近几年一直在教育行业工作,主要负责竞赛类系统的开发工作,包括网上报名,安排考场,在线考试,学业报告书等. 打印功能在这个信息化时代非常普遍,浏览器都自带打印功能,通常的做法是调用 window.pr ...

  7. K/3 Cloud开发之旅－－环境准备篇

    K/3 Cloud是金蝶软件新推出的一款产品,介绍我就不多说了,谁用谁知道啊,那么我们如果要基于它做开发需要什么环境呢 开发环境必备软件 1 操作系统Windows X86/X64 或者Windows ...

  8. Qt 为tableview的item添加网格线

    使用qss可以显示每个item的网格: selection-background-color: rgb(170, 170, 127); gridline-color: rgb(255, 255, 25 ...

  9. Linux三剑客之sed

    sed sed对文本的处理很强大,并且sed非常小,参数少,容易掌握,他的操作方式根awk有点像.sed按顺序逐行读取文件.然后,它执行为该行指定的所有操作,并在完成请求的修改之后的内容显示出来,也可 ...

  10. JAVA 异常类

    1.Exception(异常) :是程序本身可以处理的异常. 2.Error(错误): 是程序无法处理的错误.这些错误表示故障发生于虚拟机自身.或者发生在虚拟机试图执行应用时,一般不需要程序处理. 3 ...