概述

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. 内省、JavaBean、PropertyDescriptor类、Introspector类、BeanUtils工具包、注解、Rentention、Target、注解的基本属性和高级属性

      本文转载自:http://blog.sina.com.cn/s/blog_5d65a16901011kom.html 关键字:内省.JavaBean.PropertyDescriptor类.Int ...

  2. MVC拦截器记录操作用户日志

    主要是用于记录用户操作动态, public class OperationAttribute:ActionFilterAttribute { /// <summary> /// 方法名称 ...

  3. fiddler的前端资源代理功能。

       说一个很有用的东西.fiddler的autoResponder功能能把线上网站的资源引用代理到本地.比如这个js.我们改了想测测效果.但是如果经过中间的流程要把这个文件发布到线上去挺麻烦的,而且 ...

  4. 持续集成工具Jenkins学习总结

    概述 持续集成(Continuous Integration,简称CI)是一种软件开发实践,团队开发人员每次都通过自动化的构建(编译.发布.自动化测试)来验证,从而尽早的发现集成错误.持续集成最大的优 ...

  5. ORACLE存储过程创建失败,如何查看其原因

    工作中用SQL Server比较多,Oracle可以说是小白,最近想用存储过程来完成单据复制的功能,结果遇到各种问题,其实都是非常简单的问题,但是对我来说还是花了很多时间来解决,浪费这些时间非常不值得 ...

  6. myeclipse安装flex插件后代码无自动提示及自动补全无效的解决办法

    在myeclipse配置flex插件后,可能会产生快捷键的冲突,或者快捷键设置被修改的情况,本文探索其解决办法 在卸载flex插件后,myeclipse的快捷键设置并不会自动还原,这需要我们手动设置. ...

  7. svn安装与其服务器搭建

    1.概述:SVN为程序开发团队常用的代码管理,版本控制软件. 2.工具: 1) TortoiseSVN-1.8.4.24972-win32-svn-1.8.5.msi  SVN安装包. 2)setup ...

  8. Maven之自定义archetype生成项目骨架(一)

      Maven之自定义archetype生成项目骨架(一) 标签: mavennexus插件 2015-07-15 16:40 2443人阅读 评论(0) 收藏 举报  分类: Maven技术(9)  ...

  9. 今天工作中遇到的问题!echart.js

    echart.js 引用的时候, 配置文件和引用的echart.js  应该放在main.js的后面,带有window.onload的js后面.这样的话,不会阻止echar.js的渲染.

  10. Mono for android 如何动态添加View,线程内部如何更新UI.

    貌似所有设计到UI的程序原理都是一样的,子线程是不能够更新UI状态的,所以就必须使用UI自身或者第三方来更新UI. 如 在WinForm 中 就可以使用Control.Invoke(Action ac ...