CSS 布局入门
概述
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;
}
例子很简单，但是可以看出：
- 从外到内 依次是 margin, border, padding, content
- 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 布局入门的更多相关文章
- (转)Div+CSS布局入门
在网页制作中,有许多的术语,例如:CSS.HTML.DHTML.XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础 ...
- Div+CSS布局入门教程
http://www.blueidea.com/tech/site/2006/3574.asp ———————————————————————————————————————————————————— ...
- html响应式布局，css响应式布局，响应式布局入门
html响应式布局,css响应式布局,响应式布局入门 >>>>>>>>>>>>>>>>>>& ...
- 3.实战HTML+CSS布局（实例入门篇）
转自:https://www.cnblogs.com/hmyprograming/archive/2012/03/23/2414373.html 学习这篇入门教程我们假定你已经具有了一定的HTML基础 ...
- WEB入门.七 CSS布局模型
学习内容 标准文档流 流动模型(flow model) 浮动模型(float model) CSS基本布局 能力目标 理解标准文档流 使用流动模型实现页面布局 使用浮动模型实现页面布局 掌握常用CSS ...
- CSS 三栏布局入门
首先,我是CSS盲[只听说过box model],没动手实践过,关于margin padding只知名称,不明细节.刚看过一叶斋大哥关于css布局的博文,再动手实践,动手记录下点滴积累以备后用. &l ...
- 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码
原文地址:http://www.divcss5.com/jiqiao/j771.shtml css布局居中和CSS内容居中区别和对应DIV CSS代码教程与图文代码案例篇 对于新手来说DIV CSS布 ...
- DIV+CSS布局问题：一个宽度不确定的DIV里面放三个水平对齐的DIV，左右两个DIV宽度固定为150px，中间那个DIV充满剩余的宽度
一个入门的DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度. 说明:代码非真实情况下使用,所以直接简单. 没耐 ...
- CSS布局十八般武艺都在这里了
CSS布局十八般武艺都在这里了 Shelley Lee 4 个月前 布局是CSS中一个重要部分,本文总结了CSS布局中的常用技巧,包括常用的水平居中.垂直居中方法,以及单列布局.多列布局的多种实现方式 ...
随机推荐
- In和Out指令
In和Out OUT 0FAH,AL(它是指从AL中输出一个字节到0FAH的一个端口吗?) OUT DX,AL OUT 0FAH,AX(AX是一个字为什么也能输出到0FAH所指的8位端口中呢?) ...
- 在Visual Studio 2012 Blue theme下使用Dark theme的文本编辑器颜色设置
Visual Studio 2012 默认提供了3种color theme: blue,light,和dark.其中dark的文本编辑器颜色设定很爽,可是整个菜单项加上一些小的窗口如Find Resu ...
- Asp.Net MVC4入门指南（9）：查询详细信息和删除记录
在本教程中,您将查看自动生成的Details和Delete方法. 查询详细信息和删除记录 打开Movie控制器并查看Details方法. public ActionResult Details(int ...
- svn ignore
工程名为simple,采用maven进行依赖管理,在check in时我不想工程下maven产生的target目录被提交到SVN(包括目录下所有文件和目录本身). 解决方法: 要被忽略的目录必须是未版 ...
- XAF学习笔记1
写软件很多年了.看过的框架用过的框架非常多.一直想要一种框架,说不出的心烦重复的数据库设计,重复的Model生成,重复的界面设计 一直寻寻觅觅,终于找到一个框架,DEV的XAF,DEV控件用了N年了, ...
- NLS_LANG
NLS_LANG是一个环境变量,用于定义语言,地域以及字符集属性.对于非英语的字符集,NLS_LANG的设置就非常重要. NLS:‘National Language Support (NLS)’ 当 ...
- 解决织梦channel标签 指定typeid或设置son时 currentstyle无效的修复办法
{dede:channel type='son' row='8' currentstyle="<li><ahref='~typelink~' class='thisclas ...
- 在Xcode中使用Git进行源码版本控制
http://www.cocoachina.com/ios/20140524/8536.html 资讯 论坛 代码 工具 招聘 CVP 外快 博客new 登录| 注册 iOS开发 Swift Ap ...
- 清空stringbuilder
大家知道对于字符串频繁拼接是使用stringbuilder.Append方法比使用string+=方法效率高很多,但有时需要清空stringbuilder时却不知道怎么清空,因为它没有clear或em ...
- vuex2.0.0爬坑记录 -- mutations的第一个参数state不能解构
今天在学习vuex的过程中,遇到了一个很困扰人的问题,最终利用vuex的状态快照工具logger解决了问题. 问题是这样的,我在子组件中使用了mapState()函数来将状态映射至子组件中,使子组件能 ...