Css的起源
与html相比，Css支持更丰富的文档外观，Css可以为任何元素的文本和背景设置颜色；允许在任何元素外围设备设置边框；允许改变文本的大小
1.Css概念：
CSS指层叠样式表(Cascading Style Sheets)（级联样式表）
Css是用来美化html标签，相当于给页面化妆。
2.选择器(重点）
2.1写法
选择器是一个选择标签的过程。
写法：选择器{属性:值;}(;告诉编译器结束）
属性 解释
Width:20px; 宽
Height:20px; 高
Background-color:red 背景颜色
font-size:24px; 文字大小
text-align:left|center|right 内容的水平对齐方式
Text-indent:2em; 首行缩进 em是一个汉字的大小
color：文字颜色；
Width:20px; 宽
Height:20px; 高
Background-color:red 背景颜色
font-size:24px; 文字大小
text-align:left|center|right 内容的水平对齐方式
Text-indent:2em; 首行缩进 em是一个汉字的大小
color：文字颜色；
2.2 基础选择器
2.2.1 标签选择器（写在head里面）（一打一大片！）
写法：标签{属性:值;}会把页面所得的标签都选中
颜色的显示方式（可以通过工具吸取颜色，神奇！）
1.直接写颜色的名称
2.十六进制显示颜色 0-9, a-f
例如 #000000;黑色，前两位代表red,中间代表green，后面两位代表blue。
RGB,1667万种颜色。越接近0颜色越深，#000黑色 #eee灰色
3.RGB表示颜色：例如：color:reb(0,0,0)黑色
4.RGBA A代表alpha，不透明度 ，值0-1,1是什么也看不到，0是没有透明效果；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 样式表内容 -->
<style type="text/css">
/*标签选择器*/
div{
font-size:20px;
color: rgb(100,100,100);
background-color:yellow;
width:200px;
height:200px;
}
p{
font-size:15px;
color:#F40;
background-color:pink;
width:200px;
height:200px;
}
</style>
</head>
<body>
<h1>the moon of mystery月球之谜</h1>
<div>1972 was the year a great love affair ended.一段美丽的爱情在1972年走到终点</div>
<div>The human race fell out of love with the moon.人类对月亮的爱意荡然无存</div>
<p>It was a classic case of familiarity breeds contempt.这是因了解而分开的典型范例.There'd been six moon landings, and we'd grown bored.六次登月任务后，我们开始心生厌烦.To this day no-one has been back.此后再也没人去过月球The moon did turn out to be dull.月球的确很乏味</p>
</body>
</html>2.2.2 类选择器（重点）（指谁打谁）
写法：.自定义类名{属性:值;属性:值;}
特点：谁调用谁生效， class="调用名1 调用名2"
(自定义类名的规则：
1.不能纯数字，或以数字开头定义类名；
2.不能纯使用特殊符号或者特殊符号开头；
3. _可以作为类名；
4.不建议使用汉字来命名类名；
5.不推荐使用属性或者属性的值来定义类名)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
font-size: 20px;
color: #ff0000;
width: 300px;
height: 200px;
background-color: #999;
}
.miss{
text-indent: 2em;
text-align: right;
}
</style>
</head>
<body>
<div class="box miss">It's, what do you see,各位也看到了a barren colourless landscape
那是一片散布着with fragmentary rock all over the place.碎石的荒芜大地</div>
<div class="miss">Our eyes wandered to other more intriguing worlds.
我们不安于世的目光转向其他更引人入胜的世界</div>
<p class="box">Throughout the solar system scientists found many more moons
科学家在太阳系中发现许多卫星</p>
<p>that seemed far more exciting than our own dull pile of grey rock.
而它们看来比咱们灰色无聊的月球刺激得多</p>
<span class="box"></span>
<h1 class="box">你好<h1>
</body>
</html>2.2.3 ID选择器
写法
#自定义名称{属性：值}
特点：一个ID选择器在一个页面只能使用一次，如果使用2次或者2次以上，不符合w3c规范，JS调用会出问题。
一个标签只能调用一个ID选择器。
一个标签可以同时调用类选择器和ID选择器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#box{
font-size: 40px;
color: rgb(0,0,233);
background-color: rgb(255,255,0);
}
</style>
</head>
<body>
<div id="box">For 35 years our own moon has been abandoned.</div>我们自己的月亮被打入冷宫35年
<div> But now all that's about to change.但这一切即将改变</div>
<p>This is the story of our love affair with the moon.
这是我们与月球间的爱情故事</p>
</body>
</html>谷歌小案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.G{
font-size: 200px;
color: #000099;
}
.o1{
font-size: 200px;
color: #990000;
}
.o2{
font-size: 200px;
color: orange;
}
.g1{
font-size: 200px;
color: orange;
}
.l{
font-size: 200px;
color: #009900;
}
.e{
font-size: 200px;
color: #990000;
}
</style>
</head>
<span class="G">G</span>
<span class="o1">o</span>
<span class="o2">o</span>
<span class="g1">g</span>
<span class="l">l</span>
<span class="e">e</span>
</body>
</html>2.2.4 通配符选择器（全打）
*{属性：值；}，*代表所有标签都用到此样式
不推荐使用，增加浏览器和服务器负担。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
font-size: 20px;
color: green;
background-color: yellow;
}
</style>
</head>
<body>
<div>Our love affair with the moon is an ancient one.
我们对月亮的爱恋由来已久</div>
<div>The moon has looked down on the whole of human history.
月亮默默地俯视着人类历史的上演</div>
<p>And throughout history, we have looked up at it.
而从古至今，我们也一直仰望着它</p>
<p>It has inspired great myths and legends.
月亮激发了伟大的神话与传说</p>
<span>We've feared it, and we've worshipped it.
我们对月亮是又敬又怕</span>
</body>
</html>2.2.5复合选择器
定义：两个或者两个以上的基础选择器通过不同的方式连接在一起。
①交集选择器
标签+类（ID）选择器{属性：值； }
特点：既要满足使用的标签，也要满足使用了类（id选择器）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*.box{}类选择器*/
.box{
font-size: 50px;
}
div.box{
color: red;
}
/*#miss{}id选择器*/
#miss{
font-size: 50px;
}
span#miss{<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
font-size: 40px;
color: red;
}
.box span{
background-color: pink;
}
div span{
font-size: 30px;
}
</style>
</head>
<body>
<div class="box">
<p><span>We know very little about these people,
我们对这群人所知不多</span></p>
</div>
<div>
but they've left us an enduring symbol of their profound
但他们与月亮刻骨铭心的关系</div>
</body>
</html>width: 400px;height: 300px;background-color: #004400;}</style></head><body><div class="box">Five thousand years ago, 五千年前</div> <p class="box">in a remote corner of the Outer Hebrides,一个新石器时代的聚落</p><span id="miss">a Neolithic community made its home.在外赫布立群岛的偏远角落安顿下来</span></body></html>
②后代选择器（重点）
写法：选择器+空格+选择器+空格+选择器+......{属性：值；}
特点：无限隔代
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
font-size: 40px;
color: red;
}
.box span{
background-color: pink;
}
div span{
font-size: 30px;
}
</style>
</head>
<body>
<div class="box">
<p><span>We know very little about these people,
我们对这群人所知不多</span></p>
</div>
<div>
but they've left us an enduring symbol of their profound
但他们与月亮刻骨铭心的关系</div>
</body>
</html>③子代选择器（很少用）
选择器>选择器{属性：值；}
选中直接下一代元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div>span{
color:red;
font-size:40px;
}
p>span{
color:green;
font-size:60px;
}
</style>
</head>
<body>
<div>
<p><span>熬夜做实验好累啊</span></p>
<span>感觉快挂了</span>
</div>
</body>
</html>④并集选择器
选择器+，+选择器+，+选择器{属性：值；}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.dd,h1,span,p,div{
font-size: 30px;
color: #888;
background-color: pink;
}
.dd,#xx{
font-size: 40px;
color:blue;
}
</style>
</head>
<body>
<h1 class="dd">不眠之夜</h1>
<p id="xx">硫磺实验，全身散发着DMDS的臭味</p>
<div>转行的念头很迫切，所以抓紧时间学</div>
<span>希望自己不要被累死</span>
<p>因为那样太丢人~但是，结束或许也是一种解脱~</p>
<h1>真的太累了，我真的应该学会保护和照顾自己</h1>
</body>
</html>3.文本元素
3.1属性
font-size:16px；文字大小
font-weight：700；文字的粗细（100-900），不推荐使用font-weight:bold;
font-family: 微软雅黑；文字字体
font-style: normal （正常）| italic（斜体）;
line-height: 40px;行距
3.2文本属性连写
font: font-style font-weight font-size/line-height font-family;
Font: italic 700 16px/40px 微软雅黑；（按顺序写就行了）
文本属性连写文字大小和字体必须写
3.3字体（font-family）的表达方式
1.直接写中文名称 2.直接写字体的英文名称3.Unicode编码，可以在console中寻找：输入escape("宋体")然后回车，将%u改成\即可。
3.4.选择器的小案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.content{
width: 900px;
margin: 0 auto;
}
.content h1{
font: 28px \5FAE%u8F6F\96C5\9ED1;
text-align: center;
}
.content .box{
text-align: center;
}
.time,.solution{
font-size: 14px;
text-align: center;
}
.time{
color: rgb(180,180,180);
}
.solution{
color: #990000;
}
/*属性选择器*/
.box input[type=text]{
color: red;
}
.content p{
text-indent: 2em;
line-height: 24px;
}
.content p span{
color: blue;
}
</style>
</head>
<body>
<div class="content">
<h1>the mystery of moon</h1>
<div class="box"><span class="time">2018年5月31日 21:44</span>
<span class="solution">化工实验室 满身DMDS味道</span> <a href="#">收藏本文</a>
<input type="text" value="请输入查询条件"><input type="button" value="搜索"></div>
<hr>
<p>Five thousand years ago,五千年前
in a remote corner of the Outer Hebrides,
一个新石器时代的聚落<span>[微博]</span>
a Neolithic community made its home.
在外赫布立群岛的偏远角落安顿下来
</p>
<p>
We know very little about these people,
我们对这群人所知不多
but they've left us an enduring symbol of their profound但他们与月亮刻骨铭心的关系relationship with the moon.<span>[微博]</span>却为后世留下了恒久的象征</p>
<p>Islanders Margaret Curtis and her husband Ron
住在岛上的玛格丽特寇提斯和她丈夫朗恩
have devoted their lives to understanding that relationship.<strong>穷尽毕生精力研究这段关系</strong></p>
</div>
</body>
</html>4.样式表书写位置
♦内嵌式写法
<head>
<style type="text/css">
样式表写法
</style>
</head>
♦外链式写法
写在head里<link rel="stylesheet" href="1.css">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="outlink.css">
</head>
<body>
<div class="box">
<p>The mystery of Moon</p>
</div>
<!-- 行内样式表-->
<h1 style="font-size: 30px; color: red;">1972 was the year a great love affair ended.</h1>
</body>
</html>/*css为后缀文件*/
.box{
font: italic 200 74px microsoft yahei;
}三种写法特点：
☆内嵌式写法，样式只作用于当前文件，没有真正实现结构表现分离；
☆外链式写法，作用范围是当前站点，范围广，实现结构表现分离；
☆行内样式表，作用范围仅限于当前标签，范围小（不专业）
5.标签分类（显示方式）
5.1 块元素
典型代表:Div,h1-h6,p,ul,li
特点：独占一行； 可以设置宽高；嵌套（包含）下，子块元素宽度（没有定义情况下）和父块元素宽度默认一致。
5.2 行内元素
典型代表：span，a, strong, em ,del, ins
特点：在一行内显示；不能直接定义宽高，取决于内容的大小；
5.3行内块元素（内联元素）
典型代表：input , img。效果即等于块元素也等于行内元素
特点：在一行上显示；可以设置宽高
5.5块元素、行内元素
♦块元素转行内元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*块元素转换成行内元素，width和height作用失效*/
div,p{
display: inline;
width: 500px;
height: 500px;
background-color: red;
}
</style>
</head>
<body>
<div>These stones at Callanish are a sort of lun,</div>
<p>卡拉尼什立石阵有点像</p>
</body>
</html>♦行内元素转块元素
display: block;
♦块和行内元素转行内块元素
Display: inline-block;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*display: inline-block 块和行内元素转行内块元素*/
div,p,span,strong{
display: inline-block;
font-size: 50px;
background-color: #00ff00;
}
</style>
</head>
<body>
<div>我的第一个HTML页面</div>
<p>body元素的内容会显示在浏览器中</p>
<span>title元素的内容会显示在浏览器的标题栏中。</span>
<strong>br是单标签，<br/>功能是换行，已br/输入更专业</strong>
</body>
</html>6.css三大特性
①层叠性：当多个样式作用于同一个(同一类）标签时，样式发生了冲突，总是执行后边的代码。（后面的代码层叠了前面的代码）
②继承性
继承性发生的前提是包含（嵌套关系）
文字颜色、大小、字体、粗细、风格、行高等一切文字属性都可以继承。
特殊情况：1. h系列无法继承文字大小，会呈倍数变化；
2. 超链接颜色为默认蓝色，无法继承文字颜色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My first HTML program</title>
<style type="text/css">
/*p标签中的内容继承了div标签中的属性，因为是嵌套关系*/
.father{
color:red;
font: italic 700 40px microsoft yahei;
}
</style>
</head>
<body>
<div class="father">
<h1>No zuo No dead</h1>
<h2>why you try?</h2>
<p style="font-size:60px;">why you try?</p>
<p>请仅仅把标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。请使用其他标签或CSS代替。</p>
<a href="#">a标签不能继承颜色</a>
</div>
</body>
</html>③优先级
默认样式<标签选择器<类选择器<id 选择器<行内样式<!important
7.链接伪类
a:link{属性：值；} a{属性：值}效果一样的
a:link{属性：值；} 链接的默认状态；
a:visited{属性：值；} 链接访问之后的状态；
a:hover{属性：值；}鼠标放在链接上显示的状态；
a:active{属性：值；} 链接激活的状态；
：focus{属性：值；}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My second HTML exercise</title>
<style type="text/css">
/*链接默认的状态*/
a:link{
color: red;
}/*a{
color:red
}
/*链接访问之后的状态*/
a:visited{
color: green;
}
/*鼠标放在链接上显示的状态*/
a:hover{
color: yellow;
}
/*鼠标按着链接不放的状态*/
a:active{
color: pink;
}
*/
</style>
</head>
<body>
<a href="#">align="center"居中排列</a>
</body>
</html>7.1 文本修饰
text-decoration : none | underline | line-through
链接伪类小案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.nav{
background-color: #aaa;
height: 50px;
text-align: center;
}
a:link{
display: inline-block;
width:90px;
height:50px;
text-decoration: none;
font-size: 20px;
font-family: microsoft heiti;
color: black;
font-weight: 700;
}
a:hover{
background-color: grey;
text-decoration: underline;
color: red;
}
a.public{
font-weight: 700;
color: red;
}
</style>
</head>
<body>
<div class="nav">
<a href="#" class="public">天猫</a>
<a href="#" class="public">聚划算</a>
<a href="#" class="public">超市</a>
<a href="#" class="public">头条</a>
<a href="#">阿里旅游</a>
<a href="#">电器</a>
<a href="#">淘抢购</a>
<a href="#">苏宁电器</a>
<a href="#">京东商城</a>
</div>
</body>
</html>8.背景属性
background-color背景颜色、background-image背景图片、
background-repeat repeat（默认）| no-repeat（不平铺） | repeat-x（沿x轴平铺） | repeat-y（沿y轴平铺）图片平铺属性
background-position left | center | right | top | bottom 背景定位
background-attachment 背景是否滚动 scroll （以元素为定位例如在div中，所以滚动滑轮图片不动，） | fixed（以浏览器定位，所以滚动滑轮图片随着移动，）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>THE CHARACTER OF BACKGROUND</title>
<style type="text/css">
.box{
height: 500px;
/*background-color: #999;
background-image: url("1.png");
background-repeat: no-repeat;
/*20px代表水平方向距离值，30px代表垂直方向距离值*/
/*background-position: bottom right;*/*/
background-attachment: fixed;
/*连写没有顺序限制，url为必写项*/
background:red url("1.png") no-repeat 30px 40px scroll;
}
</style>
</head>
<body>
<div class="box">
<p>头脑清晰</p>
<p>头脑清晰</p>
<p>头脑清晰</p>
<p>头脑清晰</p>
<p>头脑清晰</p>
<p>头脑清晰</p>
<p>头脑清晰</p>
<p>头脑清晰</p>
<p>头脑清晰</p><p>头脑清晰</p><p>头脑清晰</p>
<p>头脑清晰</p><p>头脑清晰</p><p>头脑清晰</p
</div>
</body>
</html>8.1几个小案例
案例1：搜索框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*input 标签选择器*/
input{
width: 280px;
height: 30px;
background: url("search.jpg") no-repeat right;
}
</style>
</head>
<body>
<input type="text" value="请输入关键字">
</body>
</html>案例2：链接前面有图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
li{
/*清楚列表前面的符号*/
list-style: none;
background: url(li.gif) no-repeat left;
text-indent: 1em;
}
</style>
</head>
<body>
<!-- ul>li*5>a[#] -->
<ul>
<li><a href="#">如何成长为一名优秀的Web前端开发工程师</a></li>
<li><a href="#">多写</a></li>
<li><a href="#">看书</a></li>
<li><a href="#">读BLOG</a></li>
<li><a href="#">学一门后端语言</a></li>
<li><a href="#">去用很多产品</a></li>
</ul>
</body>
</html>
9.一些知识
9.1 浏览器默认行高：16px
行高：是基线与基线之间的距离。 行高=文字高度+上下边距
一行文字行高和父元素高度一致时候，垂直居中显示。
9.2 行高单位
px 文字大小为20px 则行高为20px；
em 1em=20px；%;例如150%=150%*2px=30px；
总结：单位除了像素以外，行高都是与文字大小乘积。
不带单位时，行高是和子元素文字大小相乘，em和%的行高和父元素文字大小相乘。行高以像素为单位时，就是定义的行高值。
10 盒子模型
作用：页面布局
10.1 边框 border
Border-top-style: solid 实线 dotted 点线 dashed 虚线；
Border-top-color: 上边框颜色；
Border-top-width: 上边框粗细；
简单写法：连写（无顺序要求），线型为必写项。
/*四个边框值相同的写法*/
border: 5px solid red;<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
width: 300px;
height: 390px;
background-color: #999;
/*border-top-style: solid;/*线型*/
border-top-color: green;/*边框颜色*/
border-bottom-width: 5px;*/
border-bottom-style: dashed;
border-bottom-color: red;
border-bottom-width: 10px;
border-top: green solid 5px/*连写*/
/*四个边框值相同的写法*/
border: 5px solid red;
}
</style>
</head>
<body>
<div class="box">what people think about</div>
</body>
</html>>10.2
边框合并：border-collapse: collapse;
获取光标焦点：<label for="id内容">获取光标焦点内容</label><input id="id内容">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
table{
width: 300px;
height: 500px;
border: 15px solid red;
/* 边框合并*/
border-collapse: collapse;
}
td{
border: 5px solid red;
}
</style>
</head>
<body>
<!-- cellspcing=0是使表格的外框和内框之间的距离为0，厚度为叠加所得 -->
<table cellspacing="0">
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
<div class="box">what people think about</div>
</body>
</html>一个小案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.one{
border: 0 none;/*去掉边框*/
outline-style: none;/*去掉轮廓线*/
display: block;
border: dashed 2px green;
background-color: #888;
}
.one:focus{
background: red;
}
.two{
border: 0 none;
display: block;
border-bottom: dotted 2px red;
}
.three{
background: url("../a今日任务/5.css基础三上课资料/5.css基础三上课资料/5.css基础三上课资料/04-案例/search.png") no-repeat right;
outline-style: none;
border: 0 none;
border: 2px solid #999;
}
</style>
</head>
<body>
<!-- 在浏览器点用户名 变成红色底 -->
<label for="one">用户名：</label><input type="text" class="one" id="one"><br>
邮箱：<input type="text" class="two"><br>
搜索一下：<input type="text" class="three">
</body>
</html>
10.3内边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>inner margin</title>
<style type="text/css">
.box{
padding-left: 10px;
padding-right: 20px;
padding-top: 50px;
padding-bottom: 20px;
width: 400px;
height: 300px;
background: green;
/*padding：20px;/*连写，上右下左，内边距都是20px*/
padding: 20px 30px;/*上下20px 左右30px*/
padding: 20px 30px 40px;/*上内边距20px 左右为30px 下内边距40px*/
padding: 20px 30px 40px 50px;/*上右下左*/*/
}
</style>
</head>
<body>
<div class="box">你好，明天</div>
</body>
</html>♦内边距撑大盒子div.box的问题
影响盒子宽度的因素：
①内边距影响盒子宽度padding
②边框影响盒子宽度bored
盒子的宽度=定义的宽度+边框宽度+左右内边距；
继承的盒子一般不会被撑大（水平方向受父类影响），除非padding超过了父类大小。
居中小案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>inner margin</title>
<style type="text/css">
.box{
padding-left: 100px;
padding-top: 75px;
width: 400px;
height:225px;
background: pink;
}
.smallbox{
width: 300px;
height: 150px;
background: red;
}
</style>
</head>
<body>
<div class="box">
<div class="smallbox">
</div>
</div>
</body>
</html>10.4外边距
Margin: 0 auto。盒子居中
同样写在head中，margin-left: 左外边距值px; margin-right: 右外边距值px； margin-top: 上外边距值px； margin-bottom 下外边距值；
外边距连写：
margin：20px 30px;前一个代表上下外边距，后者代表左右外边距；
margin：20px 30px 40px; 第一个上外边距，第二个左右，第三个下
margin: 20px 30px 40px 50px; 上右下左
♦垂直方向外边距合并
垂直方向的2个盒子，如果都设置了垂直方向外边距，取的是比较大的值。
♦外边距塌陷（统一下降）
嵌套盒子，直接给子盒子设置垂直方向外边距的时候，会发生塌陷。
解决方法：
☆给父盒子设置边框 boder-top: px;
☆给父盒子设置：overflow(溢出)：hidden bfc格式化上下文
一个利用padding的小案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
height: 40px;
background: #eee;
border-top: 3px solid orange;
border-bottom: 1px solid #aaa;
}
.smallbox{
width:1000px;
height:40px;
background: #aaa;
margin: 0 auto;
}
a:link{
display: inline-block;
height: 40px;
/*最好把行高放在a链接里*/
font: 12px/40px microsoft yahei;
display: inline-block;
text-decoration: none;
color: black;
padding: 0 12px;
}
a:hover{
background: #333;
color: orange;
}
</style>
</head>
<body>
<div class="box">
<div class="smallbox">
<a href="#">设为首页</a>
<a href="#">手机新浪网</a>
<a href="#">移动客户端</a>
</div>
</div>
</body>
</html>10.5行内元素可以定义左右的内外边距，上下会被忽略掉。
11. Fireworks的基本使用
新建文件 crtl+n 打开文件 crtl+o 调出和隐藏标尺 ctrl+r
清除辅助线：视图-辅助线-清除辅助线
放大镜 ：z(快捷键) 放大镜状态下 alt+鼠标左键 缩小
抓手工具：快捷键--空格不放
测量距离 ☆先拉出2根辅助线 ☆切换到指针工具（黑色的箭头）☆将光标放在两个辅助线之间，按住shift键就能测量距离。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
