盒子模型3D结构
第一层：border
第二层：content+paddin
第三层：background-image
第四层：background-color
第五层：margin
自动居中一列布局
如果你想让页面自动居中，当设置margin属性为auto的时候，不能再设置浮动或绝对定位！
注意三个元素：
1.标准文档流
2.块级元素
3.margin属性
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>几米简介</title>
<style type="text/css">
*{margin:0; padding:0; font-size:12px; color:#346667; font-family:Arial, Helvetica, sans-serif,"宋体";}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
h2{line-height:30px; font-size:14px; margin-bottom:5px;}
p{line-height:24px; text-indent:26px; margin-bottom:5px;}
#wrap{width:770px;
margin:0 auto; //wrap中的header、mainbody、footer自动居中
}
#header{width:762px; border:4px solid #badbdb; background:url(../images/banner.gif) no-repeat; height:92px; text-align:right; color:#fff;}
#header a{color:#fff; margin:0 5px;}
#mainbody,#footer{
width:100%; //以父元素wrap的宽度自适应
}
#footer{text-align:center; padding:20px 0;}
.content{background:#eff9f9;
padding:44px 15px 15px;
border:4px solid #badbdb;}
.profile{background:url(../images/t_profile.gif) no-repeat #eff9f9;}
.book{background:url(../images/t_book.gif) no-repeat #eff9f9;}
.book img{
border:1px solid #b1adaa;
margin:10px 18px;}
</style>
</head>
<body>
<div id="wrap">
<div id="header"><a href="#">联系我们</a>|<a href="#">站点地图</a></div>
<div id="mainbody">
<div class="content profile">
<h2>:: 关于幾米 ::</h2>
<p>幾米，一位用画笔描绘梦想、吸引无数读者画迷为之疯狂，知名度迅速窜升的当红绘本作家，同时却也是一个腼腆善良的中年男子，偏好简单的居家生活，低调而淡泊。</p>
<p>幾米的个性害羞内向，不擅长用言语表达，他用敏锐细腻的心去感受周遭的人与事，将情感、思绪藉由「绘画」传达他对大千世界的看法，作品风貌多变，创作力源源不绝，因此看幾米的作品，就像是走入他的内在，幾米的故事引领着每一位欣赏他作品的人看到并相信世界上的美与善，同时也反应了现代人生活中的点点滴滴，因此每个人都能在他的故事找到一个映照和寄托，或许这就是幾米作品的迷人之处。</p>
<p>幾米，绘本作家，文化大学美术系毕业，曾在广告公司工作十二年，后来为报纸、杂志等各种出版品画插画 。1998年开始创作，发表《森林里的秘密》和《微笑的鱼》，拿下当年度中国时报开卷最佳童书、
民生报好书大家读年度最佳童书，以及联合报读书人最佳童书奖。 1999年出版《向左走．向右走》，开创出成人绘本的新型式，兴起一股绘本创作风潮。本书获选为1999年金石堂十大最具影响力的书，并已改
编成电影、电视剧。之后陆续推出《听幾米唱歌》、《月亮忘记了》、《森林唱游》、《我的心中每天开出一朵花》等作品，展现惊人的创作力和多变的叙事风格。 2001年出版《地下铁》，获选2002年金鼎奖
推荐优良图书，并改编成音乐剧和电影。次年《照相本子》、《1.2.3.木头人》和《我只能为你画一张小卡片》获选2002年行政院新闻局推介中小学生优良课外读物图书类推荐读物。2002年《布瓜的世界》甫上
市便登上各大书店畅销排行榜第一名。 2003、2004年陆续出版《幸运儿》、《你们我们他们》、《又寂寞又美好》、《履历表》、《遗失了一只猫》等作品，内容风格上更形突破。2005年的《小蝴蝶小披风》
和《失乐园》开始经营角色，多变的故事节奏有不同于以往的阅读趣味。 作品风靡两岸三地，美、法、德、希腊、韩、日、泰等国皆有译本。学界和媒体多次以「幾米现象」为主题分析评论。 2003年Studio Voice杂
志选为亚洲最有创意的五十五人之一。 </p>
</div>
<div class="content book">
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a></div>
</div>
<div id="footer">copyright © 2004-2012 Jimmyspa.com All Rights Reserved.</div>
</div>
</body>
</html>```
#浮动布局float---实现块级元素横向布局
>3个属性：left、right、none
> | 设置了浮动的元素仍然属于标准文档流。
> | 当元素没有设置宽度值时，设置了浮动属性，元素的宽度就会随内容而变化；
> | 设置了浮动的元素会对紧跟其后的元素产生影响。
#清除浮动（一般是对受到浮动影响的元素设置这个属性）
>给紧随其后的元素设置clear both或者clear left/right;
或者
给它的父元素设置width：100%或（固定宽度）+overflow：hidden；
#横向两列布局——网页中最常见的布局之一
>主要技能：
>1.float属性，使纵向分布的元素横向排列
>2.margin属性：设置两列之间的间距
**代码**
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>float属性横向两列布局</title>
<style type="text/css">
- {
margin:0;
padding:0;
}
wrap {
background:#00C;
margin:0 auto;//设置自动居中
width:960px;
}
header {
background:#FF3300;
width:100%;
}
mainbody {
background:#FC0;
width:100%;
overflow:hidden;//消除浮动影响
}
.left {
width:800px;
height:200px;
background:#000;
float:left;//使用float属性
}
.right {
width:140px;
height:500px;
background:#690;
float:left;//使用float属性+margin属性
margin-left:12px;
}
footer {
background:#639;
width:100%;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">头部</div>
<div id="mainbody">
<div class="left"></div>
<div class="right"></div>
</div>
<div id="footer">版权部分</div>
</div>
</body>
</html>```
绝对定位布局
通过position属性来实现
CSS中规定的第三中定位机制，能够实现横向多列布局等较为复杂的布局。如：带有遮罩效果的提示框、固定层效果、全屏广告等
position属性拥有三种定位机制：1.静态定位 2.相对定位 3.绝对定位
可以设置四个属性：
1.static 静态定位
2.relative 相对定位
3.absolute 绝对定位
4.fixed固定定位（3.4.同属于绝对定位）
relative:
相对于自身原有位置进行偏移
仍处于标准文档流当中
随即拥有偏移属性和z-index属性
absolute
建立了以包含块为基准的定位，完全脱离了标准文档流
（1）未设置偏移量的时候：
· 无论是否存在已经定位的祖先元素，都保持在元素初始位置
· 脱离了标准文档流
（2）设置了偏移量的时候：偏移参照标准
· 无已定位祖先元素，以<html>为偏移参照标准；
· 有已定位祖先元素，以距离其最近的已定位祖先元素为偏移参照标准；
当一个元素设置了绝对定位没有设置宽度的时候，元素的宽度根据内容进行调节
使用绝对定位进行横向两列布局的情况比较少，一般适用于这种情况：
一列固定宽度，另一列宽度自适应；
主要应用技能：
1.relative—父元素相对定位
2.absolute—自适应宽度元素绝对定位
注意：固定宽度列高度一定要大于宽度自适应列的高度。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>绝对定位实现布局</title>
<style type="text/css">
* {
margin:0;
padding:0;
font-size:12px;
color:#333;
font-family:Verdana, Geneva, sans-serif, "宋体";
list-style:none;
}
a {
text-decoration:none;
}
a:hover {
text-decoration:underline;
color:#ff0000;
}
p {
line-height:24px;
}
#wrap {
width:780px;
margin:0 auto;
padding:0 10px 10px;
border-left:1px solid #e7e7e7;
border-right:1px solid #e7e7e7;
}
#header {
width:100%;
overflow:hidden;
}
.logo {
width:100%;
height:80px;
line-height:80px;
font-size:30px;
font-family:"微软雅黑";
background:#3399cc;
color:#fff;
text-indent:30px;
}
.nav {
width:100%;
margin-top:10px;
}
.nav li {
margin:0 32px;
float:left;
}
.nav li a {
color:#7f7f7f;
font-size:16px;
display:block;
padding-bottom:2px;
}
.nav li a:hover {
border-bottom:3px solid #cc0000;
text-decoration:none;
}
.nav li.current {
border-bottom:3px solid #cc0000;
}
.nav li.current a:hover {
border-bottom:none;
}
#mainbody {
width:100%;
position:relative;
margin-top:20px;
}
#sidebar {
width:180px;
padding-bottom:10px;
}
#sidebar dl {
padding:0 0 5px;
}
#sidebar dt {
font-weight:bold;
line-height:22px;
font-family:"微软雅黑";
font-size:14px;
color:#fff;
background:#3399cc;
padding:5px 0 5px 15px;
font-weight:normal;
margin-bottom:10px;
}
#sidebar dd {
line-height:20px;
padding-left:15px;
}
#sidebar dd.current a {
color:#f00;
}
#content {
position:absolute;
top:0px;
left:200px;
}
#content h1 {
color:#000;
font-size:24px;
font-family:"微软雅黑";
font-weight:normal;
}
#content h3 {
margin-top:10px;
line-height:26px;
}
#content dl {
margin-bottom:10px;
}
#content dt {
font-weight:bold;
line-height:26px;
}
#content dd {
line-height:22px;
}
.learn a {
color:#900b09;
text-decoration:underline;
padding-bottom:2px;
}
.learn a:hover {
text-decoration:none;
}
.tips {
color:#999;
margin-top:20px;
}
.pageto {
border-top:1px solid #aaa;
border-bottom:3px solid #aaa;
margin-top:5px;
padding:15px 0;
}
.pageto a {
margin:0 10px;
background:#f3f3f3;
padding:5px 20px;
border:1px solid #dfdfdf;
color:#555;
}
.pageto a:hover {
color:#000;
text-decoration:none;
}
.disline {
border-bottom:1px dashed #ccc;
margin-top:10px;
}
#footer {
width:100%;
margin-top:15px;
padding:15px 0;
text-align:center;
color:#999;
background:#ddd;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<div class="logo">前端开发教程</div>
<div class="nav">
<ul>
<li class="current"><a href="#">CSS</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">Ajax</a></li>
</ul>
</div>
</div>
<div id="mainbody">
<div id="sidebar">
<dl>
<dt>CSS 基础教程</dt>
<dd class="current"><a href="#">CSS 简介</a></dd>
<dd><a href="#">CSS 基础语法</a></dd>
<dd><a href="#">CSS 高级语法</a></dd>
<dd><a href="#">CSS 派生选择器</a></dd>
<dd><a href="#">CSS id 选择器</a></dd>
<dd><a href="#">CSS 类选择器</a></dd>
<dd><a href="#">CSS 属性选择器</a></dd>
<dd><a href="#">CSS 创建</a></dd>
</dl>
<dl>
<dt>CSS 样式</dt>
<dd><a href="#">CSS 背景</a></dd>
<dd><a href="#">CSS 文本</a></dd>
<dd><a href="#">CSS 字体</a></dd>
<dd><a href="#">CSS 链接</a></dd>
<dd><a href="#">CSS 列表</a></dd>
<dd><a href="#">CSS 表格</a></dd>
<dd><a href="#">CSS 轮廓</a></dd>
</dl>
<dl>
<dt>CSS 盒子模型</dt>
<dd><a href="#">CSS 盒子模型概述</a></dd>
<dd><a href="#">CSS 内边距</a></dd>
<dd><a href="#">CSS 边框</a></dd>
<dd><a href="#">CSS 外边距</a></dd>
<dd><a href="#">CSS 外边距合并</a></dd>
</dl>
<dl>
<dt>CSS 定位</dt>
<dd><a href="#">CSS 定位概述</a></dd>
<dd><a href="#">CSS 相对定位</a></dd>
<dd><a href="#">CSS 绝对定位</a></dd>
<dd><a href="#">CSS 浮动</a></dd>
</dl>
<dl>
<dt>CSS 选择器</dt>
<dd><a href="#">CSS 元素选择器</a></dd>
<dd><a href="#">CSS 选择器分组</a></dd>
<dd><a href="#">CSS 类选择器详解</a></dd>
<dd><a href="#">CSS ID 选择器详解</a></dd>
<dd><a href="#">CSS 属性选择器详解</a></dd>
<dd><a href="#">CSS 后代选择器</a></dd>
<dd><a href="#">CSS 子元素选择器</a></dd>
<dd><a href="#">CSS 相邻兄弟选择器</a></dd>
<dd><a href="#">CSS 伪类</a></dd>
<dd><a href="#">CSS 伪元素</a></dd>
</dl>
<dl>
<dt>CSS 高级</dt>
<dd><a href="#">CSS 对齐</a></dd>
<dd><a href="#">CSS 尺寸</a></dd>
<dd><a href="#">CSS 分类</a></dd>
<dd><a href="#">CSS 导航栏</a></dd>
<dd><a href="#">CSS 图片库</a></dd>
<dd><a href="#">CSS 图片透明</a></dd>
<dd><a href="#">CSS 媒介类型</a></dd>
<dd><a href="#">CSS 注意事项</a></dd>
<dd><a href="#">CSS 总结</a></dd>
</dl>
</div>
<div id="content">
<h1>CSS 简介</h1>
<div class="pageto"><a href="#">上一章</a> <a href="#">下一章</a></div>
<h3>你应该知道这些知识</h3>
<p>在继续之前，你应该有一个以下基本认识：</p>
<p>· HTML / XHTML</p>
<p class="learn">如果您希望首先学习这些项目，我们的<a href="#">主页</a>上可以找到教程。</p>
<div class="disline"></div>
<h3>什么是CSS？</h3>
<p>CSS即级联样式表。
它是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。</p>
<div class="disline"></div>
<h3>基本信息</h3>
<p>CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。</p>
<div class="disline"></div>
<h3>发展历史</h3>
<dl>
<dt>CSS1</dt>
<dd>作为一项W3C推荐，CSS1发布于 1996年12月17 日。1999 年1月11日，此推荐被重新修订。</dd>
</dl>
<dl>
<dt>CSS2</dt>
<dd>作为一项 W3C 推荐，CSS2发布于 1999年1月11日。CSS2添加了对媒介（打印机和听觉设备）和可下载字体的支持。</dd>
</dl>
<h3>CSS3</h3>
<dl>
<dt>CSS3 计划将 CSS 划分为更小的模块。</dt>
<dd class="learn"><a href="#">亲自体验一下</a>！</dd>
</dl>
<div class="pageto"><a href="#">上一章</a> <a href="#">下一章</a></div>
<p class="tips">本站提供的内容仅用于学习培训。我们不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。</p>
</div>
</div>
<div id="footer">慕课©版权所有</div>
</div>
</body>
</html>```