CSS中的宽高自适应以及最小最大宽/高

最新推荐文章于 2024-08-15 15:09:51 发布

对卦卦上心

最新推荐文章于 2024-08-15 15:09:51 发布

阅读量6.7k

点赞数 4

分类专栏： web前端 css 文章标签： css html html5

本文链接：https://blog.csdn.net/liu0218/article/details/126149093

版权

web前端同时被 2 个专栏收录

46 篇文章 2 订阅

订阅专栏

css

19 篇文章 0 订阅

订阅专栏

一、宽度自适应

宽度自适应的4种方法：

1.块元素未设置宽度默认占整行,在浏览器窗口发生变化的时候宽度会跟随发生变化 ,例

<style>
	div{
	  height:100px;
	  background-color:pink;
	}
</style>
<body>
	<div></div>
</body

2.元素不设置宽度且浮动(根据内容宽度进行自适应) ,例

<style>
	span{
		float:left;
	  	height:100px;
	 	background-color:pink;
	}
</style>
<body>
	<span></span>
</body>

3.元素不设置宽度，且使用绝对定位或固定定位同时设置left和right ,例如下面代码就会使这个div同时例左边100像素并且离右边100像素。

<style>
	div{
		position: absolute;
        left: 100px;
        right: 100px;
	}
</style>
<body>
	<div></div>
</body>

4.百分比布局，例如下列代码就可以实现无论浏览器窗口变大变小，实战沾满整个宽度。

<style>
	div{
		wight:100%
	}
</style>
<body>
	<div></div>
</body>

二、高度自适应

高度自适应的3种方法：

1.百分比高度使用时需要将body，html设置高度，如果是根据浏览器高度取值则设置height:100%,例

<style>
body,html {
   height: 100%;
}
div {
    height: 50%;
    background-color: red;
}
</style>
<body>
    <div>
        内容 <br>
        内容 <br>
        内容 <br>
        内容 <br>
        内容 <br>
    </div>
</body>

2.元素不设置高度，会默认根据内容获取高度(设置相对定位也是一样的，因为相对定位不会脱离文档流) ,例

<style>
div {
    background-color: red;
}
</style>
<body>
    <div>
        内容 <br>
        内容 
    </div>
</body>

3.元素未设置高度时使用绝对定位或固定定位添加top和bottom可以实现高度自适应(必须要有内容或者宽度，否则不显示) ,无论窗口如何变化，始终距离上下各100像素。

<style>
div{
   background-color: pink;
   position: absolute;
   top: 100px;
   bottom: 100px;
   width: 100px;
}
</style>
<body>
    <div>
        内容 <br>
        内容 <br>
        内容 <br>
        内容 <br>
        内容 <br>
    </div>
</body>