html5--1.18 div元素与布局

1.18 div元素与布局

1.元素的分类
2.div元素与布局

1、元素的分类

• 块元素:主要特征是会产生换行效果，自动与其他元素分离成两行；通常可以作为容器在内部添加其他元素。

已经学过的块元素有：

h1~h6;hr;ul;ol;p;table.........

• 内联元素:不会产生换行效果，会和其他元素并联排列；

已经学过的内联元素有：

b;i;br;img;.........

2、div元素和布局

• div元素是通用的块元素，内部可以包含其他各种元素包括其他div元素；并且可以通过CSS设置样式来完成复杂的页面的布局
• 通过一个简单的实例了解div布局是如何实现的

div示例：

我是div通用块元素

<div style="background: #FF8888;height: 100px;width: 300px">我是div通用块元素</div>

 

我是标题

我是导航栏

我是iframe内联框架

我是尾部

1 <div style="width: 70%;height: 300px;border: 2px;background: #FFAAAA">
2 <div style="background: #88FF88;width: 100%;height: 10%">我是标题</div>
3 <div style="background: #987654;width: 30%;height: 80%;float: left;">我是导航栏</div>
4 <div style="background: #456789;width: 70%;height: 80%;float: left;">我是iframe内联框架</div>
5 <div style="background: #8888FF;width: 100%;height: 10%;clear: left;">我是尾部</div>
6 </div>

View Code