div元素和布局

最新推荐文章于 2021-07-01 15:12:58 发布

小王要认真！

最新推荐文章于 2021-07-01 15:12:58 发布

阅读量606

点赞数 1

本文链接：https://blog.csdn.net/qq_40474184/article/details/82962808

版权

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>

样例如下图所示：
在这里插入图片描述

小王要认真！

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
div元素和布局

div元素首先要提到的是元素的分类：元素类型特征元素块元素主要特征是会产生换行效果，自动与其他元素分离成两行，通常可以作为容器的内部添加其他元素h1~h6;hr;ul;ol;p;table…内联元素不会产生换行效果，会和其他元素并联排列b;i;br;img;…div元素和布局div元素是通用的块元素，内部可以包含其他各种元素包括其他div元素，并且可...
复制链接

扫一扫