css中的position:absolute和float和disply:inline-block

 

 

 

 

 

今天复习了一些关于布局的内容，由于之前做的东西很少，并且没有仔细研究过，所以出现好多问题。

我发现position:absolute和float是有相似之处的，所以很迷惑，到底怎么布局好呢？

所以上网搜索了一下关于它们两个的内容，发现有一个作者讲的很好，把float讲的很透彻。

所以模仿他，整理一下心得体会。

 

 

 

 

一、position：absolute和float到底用哪个布局呢？

 

 

 

引用作者原话：

 

相信很多人都有这样的问题，在页面布局中float和position:absolute哪个更好用呢？既然是布局，就用float好。这个浮动是可以清除的，一般不会影响整体布局。而position，定位，是不受约束的，这个貌似都谈不上布局了，一般要是做什么特殊的定位或者浮动层的时候，可以考虑使用。正常页面布局，我个人建议用float。

 

 

 

 

二、float和disply:inline-block有什么区别呢？

 

 

 

 

以下我个人的理解，有不对的地方，欢迎大家给我指摘，三克油！

 

 

 

 

display:inline-block它的作用是：将盒模型标签升级成为一种inline-block类盒模型的标签，能够让block类盒模型（块元素，例：<div>、<p>标签）标签在同一行显示，也能够让inline盒模型（内联元素，例：<span>、<a>标签）标签修改width和height。但是它并没有浮动起来。

 

 

 

float它的作用是，让标签变成block类型，并且让标签浮起来，浮起来代表什么？浮起来的标签和块级元素不在一个空间，跟文字和inline类型标签在一个空间。

 

 

 

 

 

接下里我们演示一下。请大家仔细阅读哦。

 

 

 

 

第一种,初始状态

<div class="bigBox">
    hahfjafdalk
    <div class="smallBox1">
        框1
    </div>
</div>

 

div.bigBox{
	margin: 0 auto;
	width: 500px;
	height: 200px;
	border: 2px solid #ccc;
}
div.smallBox1{
	width: 100px;
	height: 100px;
	background: red;
	/*float: left;*/
	/*display: inline-block;*/
	font-size: 16px;
}

 

 

 

第二种，把子div设置为float：left

div.smallBox1{
	width: 100px;
	height: 100px;
	background: red;
	float: left;
	/*display: inline-block;*/
	font-size: 16px;
}

 

 

第三种，把div设置为display：inline-block

div.smallBox1{
	width: 100px;
	height: 100px;
	background: red;
	/*float: left;*/
	display: inline-block;
	font-size: 16px;
}

 

 

 

 

为什么会这样呢？？？？？很神奇对吧！！！不知道各位猜到运行结果没有，哈哈哈。

 

按照我的理解，我给大家解释一下。

 

第一种：因为子<div>属于block类型标签，自己需要独占一行，所以它另起一行了。

 

第二种：因为子<div>设置为float:left，它会飘到父<div>的左边框（子<div>和父<div>已经不在同一个水平空间了），但是                 子<div>会把文字挤到它的右边(因为子<div>和文字及inline类型标签还是在同一个水平空间)。

 

 

 

第三种：因为子<div>的display属性的默认值block被改成了inline-block了，所以理论上它能够和文字在同一行了，并且文字所              在行剩余宽度>子<div>的width，所以最终呈现了这个样子！！！咱们再做一个实验，在第三种情况的基础上，咱们把               原来的字符串的长度增长，咱们看看结果。。。

 

 

		<div class="bigBox">
			hahfjafdalk1111111111111111111111111111111111111111111
			<div class="smallBox1">
				框1
			</div>
		</div>

 

div.smallBox1{
	width: 100px;
	height: 100px;
	background: red;
	/*float: left;*/
	display: inline-block;
	font-size: 16px;
}

 

 

 

哈哈哈哈，怎么样，跟我预想的一样吧，各位，就整理到这里吧，东西太多了，想详细了解的话，给你们一个链接。

                                                                          点击打开链接