CSS（三）
盒子模型
页面的所有元素都放在盒子（容器标记）中，无拼版不盒子
盒子模型
盒子由3部分组成
- 边界（外边距）,盒子外面的部分
- 填充（内边距），盒子的内部
- 边框：盒子本上的4个边
标准流的注意事项
- 块显示标记默认宽带100%，高度是0px，上下排列，可以设定宽高
- 行显示标记，默认宽度0px，高度0px，左右排列，不能设置宽高
- 盒子是可以被撑开的
- 文字和图片不能放在图片之上，如果字在图上，或者图在图上，那么这个图必定是背景图
- 如果看到图片重复出现，这个图必定是背景图
例题（银杏的优点）
结果预览
难点分析
代码实现
<style type=”text/css”>
body{
background-image:url(images1/bg7.jpg); /*设置背景*/
background-repeat:no-repeat; /*背景不平铺*/
}
div{
background:url(images1/bg8.gif) repeat-y; /*银杏的叶子垂直平铺*/
padding-left:110px; /*文字距离div的宽度110px*/
font-size:18px; /*字号18px*/
}
</style>
</head>
<body>
<div>
<h1>银杏的优点</h1>
1. 叶色秀雅，花色清淡。<br />
2. 树体高大，寿命绵长，树粗可达4米，寿命可达3000年之多。固长与古老寺庙相配伍，以名山大川、风景名胜为伴。<br />
3. 树干光洁，愈伤力强，轻微的损伤很快便可愈合。<br />
4. 发芽晚落叶早，有利于早春和晚秋树下能及时得到和暧的阳光。<br />
5. 银杏冠大荫浓，具有降温作用；直射阳光下，气温高达40.20c，银杏树下的气温仅为35.30c。降温4.90c，优于其它树种。<br />
6. 萌蘖力强、耐修剪。根际萌蘖旺盛，可以形成五代同堂”，怀中抱孙”等自然风景。<br />
7. 银杏绝少病虫害，不污染环境，是著名的无公害树种。<br />
8. 抗旱力较强。<br />
9. 抗烟尘、抗火灾、抗有毒气体（如二氧化硫、氨气、臭氧等），抗辐射能力也强。
</div>
浮动（float）
浮动可以左浮动，也可以右浮动，只要浮动的元素都会脱离标准流
<style type=”text/css”>
#aa,#bb{
width:200px;
height:100px;
background-color:#F00;
float:left; /*左浮动*/
}
#bb{
background-color:#060;
}
#cc{
width:200px;
height:130px;
background-color:#00F;
}
</style>
<div id=”aa”></div>
<div id=”bb”></div>
<div id=”cc”></div>
运行结果
例题一（全部左浮动）：
例题二（全部右浮动）
例题三（有左浮动，有右浮动）
脚下留心：盒子里面的子盒子浮动起来，子盒子就脱离标准流了，这时父盒子就不能精确的检测到它内部的内容到底有多高，父盒子会变成一根线；我们可以给父盒子加一个overflow:hidden属性让它精确检测一下内部的高度。盒子就会自动撑开了。
解决：给父盒子添加overflow:hidden
例题（春季）
难点分析
代码实现
<style type=”text/css”>
body{
background-color:#5B8A00;
color:#c4f762;
font-size:18px;
}
img{
float:right;
}
#first{
font-size:80px;
font-family:’黑体’;
float:left;
/*margin-right:20px;*/ 这两种方法都行
padding-right:20px;
}
</style>
<img src=”images4/mainroad.jpg” />
<span id=”first”>春</span>季，地球的北半球开始倾向太阳，受到越来越多的太阳光直射，因而气温开始升高。随着冰雪消融，河流水位上涨。春季植物开始发芽生长，许多鲜花开放。冬眠的动物苏醒，许多以卵过冬的动物孵化，鸟类开始迁徙，离开越冬地向繁殖地进发。许多动物在这段时间里发情，因此中国也将春季称为“万物复苏”的季节。春季气温和生物界的变化对人的心理和生理也有影响。
对农民来说，春季是播种许多农作物的季节。在春季，地球的北半球开始倾向太阳，受到越来越多的太阳光直射，因而气温开始升高。随着冰雪消融，河流水位上涨。春季植物开始发芽生长，许多鲜花开放。冬眠的动物苏醒，许多以卵过冬的动物孵化，鸟类开始迁徙，离开越冬地向繁殖地进发。许多动物在这段时间里发情，因此中国也将春季称为“万物复苏”的季节。
清除浮动
浮动属性会影响到其他的盒子
解决：清除c盒子的左浮动的影响
clear：left 清除左浮动
clear：right 清除右浮动
clear：both 清除所有浮动
多学一招：Clear属性不但能清除float属性，还能清除margin属性，如果用了clear属性的盒子就不能再使用margin属性。
解决方法：在上下的盒子之间插入一个空div,专门用来清除浮动的影响。
定位
定位有四种
- absolute：局对定位
- relative：相对定位
- fixed：固定定位
- static：静态定位（默认）
除了默认定位以外，其他三种定位必须结合如下的属性使用
top：距上 left：距左 right：距右 bottom：距下
absolute（绝对定位）
- 要脱离标准流
- 以浏览器客户端的左上角为原点
- 不保留原先位置的占位
<style type=”text/css”>
div{
width:200px;
height:200px;
}
#aa{
background-color:#F00;
position:absolute; /*绝对定位*/
top:100px;
left:100px;
z-index:10 /*图层顺序*/
}
#bb{
background-color:#060;
position:absolute;
top:0px;
left:0px;
z-index:2; /*图层顺序*/
}
</style>
<div id=”aa”></div>
<div id=”bb”></div>
relative（相对定位）
- 保留原先位置的占位
- 默认原点是自身左上角
fixed（固定定位）
<style type=”text/css”>
#win{
width:100px;
height:100px;
background-color:#F00;
position:fixed; /*固定定位*/
right:0px; /*距右0px*/
bottom:0px; /*距下0px*/
}
</style>
<body style=”height:2000px;”>
<div id=”win”></div>
定位例题（通过绝对定位盒子居中）
分析：
例题
<style type=”text/css”>
div{
width:200px;
height:200px;
background-color:#F00;
position:absolute; /*绝对定位*/
left:50%; /*距左边界50%*/
top:50%; /*距上边界50%*/
margin-left:-100px; /*将盒子左移动100px;*/
margin-top:-100px; /*将盒子上移100px;*/
}
</style>
<div></div>
定位例题（以父级元素为原点）
口诀：父级相对，子级绝对，这个子级就以父级的左上角为原点。
内减模式
默认情况下，盒子的尺寸是外加模式，盒子实际宽度=盒子的宽度+填充+边框粗细。所以很多情况下，指定了填充以后，盒子尺寸会变大，解决方法：我们可以使用內减模式，就是指定盒子的宽度就是总宽度，如果指定填充，盒子中内容的宽度-填充=实际内容的宽度。这是css3增加的属性
<style type=”text/css”>
div{
width:200px;
height:200px;
border:#000 solid 1px;
padding-left:50px;
box-sizing:border-box; /*内减模式*/
}
</style>
<div>锄禾日当午</div>
例题（导航栏）
难点：
- 很多标签本身带有边界和填充，我们拼版的第一步是清除这些距离。
*{ /*所有标签都清空自带的距离*/
margin:0px;
padding:0px;
}
- 元素居中（左边界自动，右边界自动）
margin-left:auto;
margin-right:auto;
- 去除无序列表的前面的点
list-style-type:none; /*去除小圆点*/
- 导航内容垂直居中（设置行高）
line-height:30px; /*内容可以垂直居中*/
实现方法
<style type=”text/css”>
*{ /*所有标签都清空自带的距离*/
margin:0px;
padding:0px;
}
ul{
width:780px;
margin-left:auto;
margin-right:auto;
margin-top:100px;
list-style-type:none; /*去除小圆点*/
overflow:hidden; /*重新测定子元素的高度*/
background-color:#060;
}
li{
float:left;
font-size:14px;
font-family:’微软雅黑’;
width:130px;
line-height:30px; /*内容可以垂直居中*/
text-align:center; /*文本居中*/
border-right:#930 solid 1px;
box-sizing:border-box; /*内减模式*/
}
a{
text-decoration:none;
color:#FFF;
}
a:hover{
background-color:#090;
display:block;
}
</style>
</head>
<body>
<ul>
<li><a href=”#”>公司首页</a></li>
<li><a href=”#”>产品介绍</a></li>
<li><a href=”#”>用户反馈</a></li>
<li><a href=”#”>给我留言</a></li>
<li><a href=”#”>联系我们</a></li>
<li><a href=”#”>公司简介</a></li>
</ul>
运行结果
例题（图片排版）
<style type=”text/css”>
*{
margin:0px;
padding:0px;
}
#con{
width:440px;
margin:auto;
list-style-type:none;
overflow:hidden;
}
#con li{
float:left;
width:110px;
}
</style>
<ul id=”con”>
<li><img src=”images14/ba1.jpg” width=”100″ height=”167″ /></li>
<li><img src=”images14/ba2.jpg” width=”100″ height=”167″ /></li>
<li><img src=”images14/ba3.jpg” width=”100″ height=”167″ /></li>
<li><img src=”images14/ba4.jpg” width=”100″ height=”167″ /></li>
<li><img src=”images14/ba5.jpg” width=”100″ height=”167″ /></li>
<li><img src=”images14/ba6.jpg” width=”100″ height=”167″ /></li>
<li><img src=”images14/ba7.jpg” width=”100″ height=”167″ /></li>
<li><img src=”images14/ba8.jpg” width=”100″ height=”167″ /></li>
</ul>
css3和css2的区别
CSS3比CSS2 多了一些属性，在做特效上功能变得很强大。
广义上的h5=html5+css3+js+js框架
css3的新增属性
- 內减模式：默认情况下，盒子的尺寸是外加模式，盒子实际宽度=盒子的宽度+填充+边框粗细。所以很多情况下，指定了填充以后，盒子尺寸会变大，解决方法：我们可以使用內减模式，就是指定盒子的宽度就是总宽度，如果指定填充，盒子中内容的宽度-填充=实际内容的宽度。
<style type=”text/css”>
div{
width:200px;
height:200px;
border:#000 solid 1px;
padding-left:50px;
box-sizing:border-box; /*内减模式*/
}
</style>
<div>锄禾日当午</div>
css3的新增属性选择器
CSS2有4个属性选择器，CSS3添加了3个。
CSS3新增的伪类选择器
| 选择器 | 含义 |
| :root | 文档的根，就是html |
| E:nth-child(n) | E的父元素的第n个子元素，n是从1开始 |
| li:nth-child(even) | li父元素(ul)的第偶数个子元素 |
| li:nth-child(odd) | li父元素(ul)的第奇数个子元素 |
| li:first-child | li父元素(ul)的第1个子元素 |
| li:last-child | li父元素(ul)的最后一个子元素 |
| li:empty | li中不包含内容的元素 |
| li:first-of-type | 第一个li |
| li:last-of-type | 最后一个li |
| li:nth-of-type(n) | 第n个li元素 |
CSS3新增的伪对象选择器
E:before 在E元素里面前面插入一个盒子（行显示）
E:after 在E元素的里面的后面插入一个盒子（行显示）
注意：这个两个伪对象必须和content属性一起使用
例题：
<style type=”text/css”>
*{
margin:0px;
padding:0px;
}
div{
width:290px;
height:25px;
border:#000 solid 1px;
margin:100px auto;
}
div:before,div:after{
content:”;
width:25px;
height:25px;
display:inline-block;
margin:0px 10px;
background:url(images17/tu1.png) no-repeat;
vertical-align:middle; /*盒子的居中对齐*/
}
input[type=’text’]{
height:25px;
width:200px;
border:none;
}
div:after{
background:url(images17/tu2.png) no-repeat;
}
</style>
<div><input type=”text” name=”con” /></div>
作业：
- 实现如下效果
- 实现如下效果
- 实现如下导航
拼版
