网页元素自适应布局技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41625074/article/details/104586769

在我们写网页时，不仅得把UI给我们的图给一比一还原出来，还需要去考虑网页会不时进行内容更新的问题和网页在不同窗口、不同分辨率在显示的效果。就拿内容更新来说，如果你把所有元素的高度在写网页的初期都固定了，那么进行内容更新时将会造成很大的麻烦，甚至就因为一点小改动而需要重新去布局。

举个最直观的例子:

.BOX{
	width:800px;
	height:200px;
	margin:0 auto;
	background:orangered;
}
.BOX div{
	width:400px;
	height:200px;
}
.box1{
	background:cyan;
}

-----------------------------------------------------------------------------------------
<div class="BOX">
			<div class="box1">测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本">测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本
		    </div>
</div>

此时的效果是这样的：

当我们去更新box1的内容时，文本增多后：

可以看得出来当box1内容增多后，文本溢出了。也许你会想，那可以通过去改变box1和BOX的高度来解决这个问题啊?先不提这样修改会有多麻烦，就这一点都会给后期维护人员增加很多不必要的工作量。

很多时候我们希望元素的大小能够根据窗口或子元素自动适应，使网页显示更灵活，并可以适应在不同设备、不同窗口和不同分辨率下显示。所以我们在初步写网页时就应该考虑到这个问题——元素宽度自适应。

那么元素高度自适应从何入手呢？一般我们需要考虑的情况分为两大类：

元素相对子元素或内容的自适应
元素相对父元素或窗口的自适应

我们先来看第一种情况：元素相对子元素或内容的自适应。它根据其子元素的情况的不同又分为两种类型

非浮动元素的父元素的高度自适应
浮动元素的父元素的高度自适应

什么叫非浮动元素和浮动元素的父元素呢？顾名思义，就是父元素中的子元素是否存在浮动，当然这里要注意的是，所说的子元素是该元素的直接子元素。

非浮动元素的父元素的高度自适应

事实上，第一种情况我们在例子中已经见到了。box1是非浮动元素，而BOX就是非浮动元素的父元素。那么该如何让非浮动元素的父元素高度自适应呢？

我们都知道，非浮动元素在标准文档流里的显示就是自上而下的，每个元素独占一行。所以非浮动元素的父元素的高度至少大于等于直接子元素高度之和。如何解决非浮动元素的父元素的高度自适应就有以下几种办法：

1.给该元素的高度不设置或者设置成height:auto;

原理是让该元素里的直接子元素把父元素撑起来。

2.通过给这个元素添加最小高度min-height：value；来实现高度自适应。

原理是在该元素里的直接子元素高度之和没有超出最小高度时，以最小高度显示；超出时，让其直接子元素把它撑起来。

3.给需要高度自适应的元素添加这些属性：min-height:value; height:auto !important;_height:value;

这与第二种方法没有太大区别。

浮动元素的父元素的高度自适应

非浮动元素的父元素只需要给它添加一个能够随着直接子元素的高度之和自适应的属性即可（最简单的不加高度就可以达到了）。但是面对直接子元素中有浮动元素时，考虑的因素就不那么简单了。子元素浮动会对父元素有什么影响呢？

.BOX{
         width:800px;
         margin:0 auto;
	 background:orangered;
	 border-top:5px solid black;
	 border-bottom:5px solid palevioletred;
}
.BOX div{
	 height:200px;
	 width:300px;
}
.box1{
	 float:left;
	 background:cyan;
}
.box2{
	 float:right;
	 background: gold;
}


---------------------------------------------------------------------------------------
<div class="BOX">
			<div class="box1"></div>
			<div class="box2"></div>
</div>

此时的网页是这样显示的：