div元素
首先要提到的是元素的分类:
元素类型 | 特征 | 元素 |
---|---|---|
块元素 | 主要特征是会产生换行效果,自动与其他元素分离成两行,通常可以作为容器的内部添加其他元素 | h1~h6;hr;ul;ol;p;table… |
内联元素 | 不会产生换行效果,会和其他元素并联排列 | b;i;br;img;… |
div元素和布局
div元素是通用的块元素,内部可以包含其他各种元素包括其他div元素,并且可以通过CSS设置样式来完成复杂的页面的布局。其中会用到float-属性,其作用是为了让div元素中的内容在某一个位置浮动,Float常跟属性值left、right、none,Float:none 不使用浮动,Float:left 靠左浮动,Float:right 靠右浮动。
<!DOCTYPE html>
<html>
<head>
<title>div元素</title>
</head>
<body>
<div style="background: lightblue;width: 100%;height: 800px"><!--此时div标签相当于table标签的作用-->
<div style="background: cornflowerblue;width: 100%;height: 10%;">标题</div>
<div style="background: pink;width: 20%;height: 80%;float: left;">导航栏</div>
<div style="background: floralwhite;width: 60%;height: 80%;float: left;">内联框架</div>
<div style="background: lemonchiffon;width: 20%;height: 80%;float: right;">布局</div>
<div style="background: mintcream;width: 100%;height: 10%;clear: right;">尾部</div><!--clear:不让内容浮动-->
</div>
</body>
</html>
样例如下图所示: