概述

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

示例：

  1. <!doctype html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8"/>
  5.     <title>CSS Sample</title>
  6.     <link href="index.css" rel="stylesheet"/>
  7.   </head>
  8.   <body>
  9.     <div>Content</div>
  10.   </body>
  11. </html>
  13. body {
  14.   background-color: #FAEBD7;
  15. }
  17. div {
  18.   width: 100px;
  19.   height: 100px;
  20.   padding: 30px;
  21.   border: 10px solid blue;
  22.   margin: 10px;
  23.   background-color: red;
  24.   text-align: center;
  25. }

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

  1. 从外到内 依次是 margin, border, padding, content
  2. div 的 width 和 height 只是 content 的大小

定位

理解了 框模型之后，定位也很简单，其实就是将一个个框定位在页面上。

定位分为绝对定位和相对定位。

绝对定位

就是在浏览器上的绝对位置，通过 top 和 left 属性设置相对于浏览器左上角的距离

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8"/>
  5. <title>CSS Sample</title>
  6. <link href="index.css" rel="stylesheet"/>
  7. </head>
  8. <body>
  9. <div id="div1">Content1</div>
  10. <div id="div2">Content2</div>
  11. </body>
  12. </html>
  14. body {
  15.   background-color: #FAEBD7;
  16. }
  18. div {
  19.   width: 100px;
  20.   height: 100px;
  21.   padding: 30px;
  22.   border: 10px solid blue;
  23.   margin: 10px;
  24.   background-color: red;
  25.   text-align: center;
  26.   position: absolute;
  27. }
  29. #div1 {
  30.   top: 100px;
  31.   left: 100px;
  32. }
  34. #div2 {
  35.   top: 200px;
  36.   left: 200px;
  37. }

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

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

相对定位

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

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

浮动

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

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

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

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

  1. <!doctype html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8"/>
  5.     <title>CSS Sample</title>
  6.     <link href="index.css" rel="stylesheet"/>
  7.   </head>
  8.   <body>
  9.       <div id="head">head</div>
  10.       <div id="middle">
  11.         <div id="nav">nav</div>
  12.         <div id="content">content</div>
  13.       </div>
  14.       <div id="foot">foot</div>
  15.   </body>
  16. </html>
  18. body {
  19.   background-color: #FAEBD7;
  20.   height: 100%;
  21.   margin: 0px;
  22.   padding: 0px;
  23. }
  25. div {
  26.   border: 1px solid black;
  27.   text-align: center;
  28. }
  30. #head {
  31.   height: 50px;
  32.   width: 100%;
  33. }
  35. #middle {
  36.   width: 100%;
  37.   top: 50px;
  38.   bottom: 100px;
  39.   left: 0px;
  40.   position: absolute;
  41. }
  43. #nav {
  44.   float: left;
  45.   width: 200px;
  46.   height: 100%;
  47. }
  49. #content {
  50.   height: 100%;
  51.   overflow: hidden;
  52. }
  54. #foot {
  55.   height: 100px;
  56.   width: 100%;
  57.   bottom: 0px;
  58.   left: 0px;
  59.   position: absolute;
  60. }

上面的示例中，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. MySQL-->基础-->002-->MySQL存储引擎

    mysql的存储引擎主要有:MyISAM和InnoDB MyISAM和InnoDB的主要区别:InnoDB支持事务和参照完整性(即为主键约束,数据库的主键和外键类型一定要一致) 存储引擎是针对表而言而 ...

  2. Android开发学习笔记：浅谈显示Intent和隐式Intent

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://liangruijun.blog.51cto.com/3061169/655132 ...

  3. a 标签提交前验证

    最近在做验证的时候遇到了submit()与onsubmit()事件冲突的问题,本来想在a标签中添加submit()进行表单的提交,然后在 form中添加onsubmit事件触发验证方法.结果行不通,最 ...

  4. 等宽字体延伸到的 ch 长度单位和动画 animation-timing-function

    新知识点get! 等宽字体(monospaced font)是指字符宽度相同的电脑字体.与此相对,字符宽度不尽相同的电脑字体称为比例字体(proportional font). 东亚字体基本都是等宽字 ...

  5. H5学习系列之Audio和Video

    1.视频文件:音频轨道.视频轨道和一些元数据(视频封面.标题.子标题.字幕等相关信息). 2.目前H5还不支持的:流式音频和视频(H5对视频的支持只限于加载的全部媒体文件).H5的媒体收到跨域资源共享 ...

  6. C++中下标操作注意事项

    C++中,下标操作不添加元素,对于任何使用下标操作的情况,如string类型.vector类型等等,必须是已存在的元素才能用下标操作符进行索引.如果类型为空,通过 下标操作进行赋值时,不会添加任何元素 ...

  7. ASP.NET ashx实现无刷新页面生成验证码

    现在大部分网站登陆时都会要求输入验证码,在网上也看了一些范例,现在总结一下如何实现无刷新页面生成验证码. 效果图: 实现方式: 前台: <div> <span>Identify ...

  8. [07]APUE：进程环境

    [a] exit / _Exit / _exit #include <stdlib.h> void exit(int status) void _Exit(int status) #inc ...

  9. tomcat 性能优化

    tomcat 性能优化tomcat默认参数是为开发环境制定,而非适合生产环境,尤其是内存和线程的配置,默认都很低,容易成为性能瓶颈. tomcat内存优化linux修改TOMCAT_HOME/bin/ ...

  10. Ajax Step By Step4

    第四,[$.ajax()] $.ajax()是所有 ajax 方法中最底层的方法,所有其他方法都是基于$.ajax()方法的封装.这个方法只有一个参数,传递一个各个功能键值对的对象. $.ajax() ...