DIV+CSS布局_div便宜-CSDN博客

本文链接：https://blog.csdn.net/NextLove_1015/article/details/52658570

前文说到，现在之所以不用表格表单是因为网页布局多使用div+css的布局方式，那么为什么要使用这中方式，那么我们今天就来看一看

首先我们先对元素进行分类：

block元素：默认宽度是浏览器的100%，单独占了一行，块元素：

<p>

<h1><h6>

<table>

<div>div没有含义，仅仅充当其他元素的容器

inline元素：内联元素，共处一行

<a>

<img>

<input>

<select>

<span>也没有含义，充当其他元素的容器

元素的display属性

block按块展示

inline：同行展示

none：隐藏

作用：改变元素显示状态

其中重点就是div模型

可以这么说,HTML里面一切元素皆为盒子。

结构从外到内分别为：

margin 外边距

border 边框

padding 填充

content 内容

border的类型可参照前文的style

padding类似于border 也是分上下左右四个

padding-top 等可以看div的border 类推一下

margin同理外边距

margin-top

类推

重点：元素流定位

普通流定位：特征：按照HTML元素默认的盒子模型，block自上而下，inline从左到右的排列次序

相对定位：position：relative

元素相对普通流的定位，根据便宜属性top，botton，left，right移动元素

要注意的一点：相对定位无论元素是否移动，元素依旧占着以前的位置

绝对定位：position：absolute

绝对元素的便宜是根据距离该元素最近的包含该元素的已定位的元素位置进行计算，如果没有包含元素，则浏览器作为包含元素，简单的说就是相对“父类”元素的位置

注意：绝对定位使得元素的位置与文档流（也就是一开始的普通流定位）无关，不占位置了。

浮动：float

定义元素浮动到左侧或右侧

以往这个属性总应用于图像，使得文本可以围绕在图像周围

不过在css中，任何元素都可以浮动。

浮动元素会生成一个块级元素，而不论他本身是何种元素

</pre><p></p><p>设置了float以后，也是会脱离普通流，不再独占一行。</p><p>浮动元素可以向左或者向右移动，知道它的外边距碰到了包含它的边框或者另一个浮动的边框为止。</p></blockquote><p>主要作用：使纵向排列的块元素可以横向排列</p><p>float值：left；right；none；inherit（）</p><p></p><pre code_snippet_id="1899149" snippet_file_name="blog_20160925_2_3879470" name="code" class="html"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>t4</title>
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}
		
			#div1 {
				width: 100px;
				height: 100px;
				border: 1px solid black;
				background-color: red;
				float: left;
			}
			
			#div2 {
				width: 100px;
				height: 100px;
				border: 1px solid black;
				background-color: yellow;
				float: left;
			}
			#div3 {
				width: 100px;
				height: 150px;
				border: 1px solid black;
				background-color: yellow;
			}
			
			#clear {
				clear: both;
			}
			
			#main {
				float: right;
			}
		</style>
	</head>
	<body>
		<div id="main">
			<div id="div1">1111111111</div>
			<div id="div2">2222222222</div>
			<div id="div3">3333333333</div>
			<div id="clear"></div>
			
		</div>
	</body>
</html>

这里会出现三个div，但是由于两个是float，3只能看见下半部分的50px的内容，但是3里面的文字确环绕在离他最近的float元素上，这就是早期的文字环绕效果。