盒子模型

页面的所有元素都放在盒子（容器标记）中，无拼版不盒子

盒子模型

盒子由3部分组成

1. 边界（外边距）,盒子外面的部分
2. 填充（内边距），盒子的内部
3. 边框：盒子本上的4个边

标准流的注意事项

1. 块显示标记默认宽带100%，高度是0px，上下排列，可以设定宽高
2. 行显示标记，默认宽度0px，高度0px，左右排列，不能设置宽高
3. 盒子是可以被撑开的
4. 文字和图片不能放在图片之上，如果字在图上，或者图在图上，那么这个图必定是背景图
5. 如果看到图片重复出现，这个图必定是背景图

例题（银杏的优点）

结果预览

难点分析

代码实现

<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. 萌蘖力强、耐修剪。根际萌蘖旺盛，可以形成五代同堂&rdquo;，怀中抱孙&rdquo;等自然风景。<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,专门用来清除浮动的影响。

定位

定位有四种

1. absolute：局对定位
2. relative：相对定位
3. fixed：固定定位
4. static：静态定位（默认）

除了默认定位以外，其他三种定位必须结合如下的属性使用

top：距上 left：距左 right：距右 bottom：距下

absolute（绝对定位）

1. 要脱离标准流
2. 以浏览器客户端的左上角为原点
3. 不保留原先位置的占位

<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（相对定位）

1. 保留原先位置的占位
2. 默认原点是自身左上角

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>

例题（导航栏）

难点：

1. 很多标签本身带有边界和填充，我们拼版的第一步是清除这些距离。

*{ /*所有标签都清空自带的距离*/

margin:0px;

padding:0px;

}

1. 元素居中（左边界自动，右边界自动）

margin-left:auto;

margin-right:auto;

1. 去除无序列表的前面的点

list-style-type:none; /*去除小圆点*/

1. 导航内容垂直居中（设置行高）

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的新增属性

1. 內减模式：默认情况下，盒子的尺寸是外加模式，盒子实际宽度=盒子的宽度+填充+边框粗细。所以很多情况下，指定了填充以后，盒子尺寸会变大，解决方法：我们可以使用內减模式，就是指定盒子的宽度就是总宽度，如果指定填充，盒子中内容的宽度-填充=实际内容的宽度。

<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新增的伪类选择器

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>

作业：

1. 实现如下效果

1. 实现如下效果

1. 实现如下导航

拼版