cssdiv高度自适应 css高度自适应以及高度塌陷总结

原创 用友财务软件  2022-09-02 11:15:09  阅读 435 次 评论 0 条
摘要:

高度塌陷: 场景:子元素有浮动,父元素没有设置高度或者设置最小高度,父元素会出现高度塌陷 高度塌陷的解决方法: 1、给高度塌陷的元素设置:overflow:hidden(原理:因为overflow:

本文主要介绍【css高度自适应以及高度塌陷总结】和【cssdiv高度自适应】,有兴趣的朋友可以看下由【月疯】投稿的技术文章,希望该技术和经验能帮到你解决你所遇的相关问题。

cssdiv高度自适应

高度塌陷:
场景:子元素有浮动,父元素没有设置高度或者设置最小高度,父元素会出现高度塌陷

高度塌陷的解决方法:
1、给高度塌陷的元素设置:overflow:hidden(原理:因为overflow:hidden触发了一个BFC,块格式上下文,有一个布局规则,计算BFC高度的时候,里面的浮动元素也参与计算的)。弊端:会隐藏掉定位在当前元素外面的内容。

2、给出现高度塌陷的元素里面,放在浮动元素的后面,添加空的div,并且给div{clear:both}
原理:忽略上面的浮动元素预留出来的空间
弊端:形成不必要的空标签,代码冗余?

3、万能清除法:
选择符:after{content:".";display:block;height:0;clear:both;overflow:hidden;visibolity:hidden;}(谁出现高度塌陷,谁就拥有选择符的样式)?

?解释:after?

伪对象选择符:
:after{content:"在什么后添加内容";}
:befor{content:"在什么之前添加内容";}
:first-letter{第一个}
:first-line{第一行}

伪对象选择符用在块装元素下面。

?高度自适应第一种方法:

高度自适应第一种情况:
当height:auto或者是height不设置,子元素撑开父元素height

需求:
a、当内容少,让父元素保持一个最小高度
b、当内容多,让父元素被内容撑开

最小高度的设置方法:
min-height(最小高度)

??高度自适应第二种方法:

高度自适应第二种方法:
需求:让子元素的高度跟着父元素高度进行变化。
height:100%;(就是跟着父元素的100%)
需求:让元素铺满浏览器的宽度和高度
宽度:
width:去掉。默认就是100%,只有浮动和定位的情况下必须设置成100%。否则消失。
如果输入内容,宽度就是根据文本宽度。

实现一个元素在浏览器窗口铺满。前提条件,必须设置html、body{height:100%}

让一个元素铺满浏览器的宽和高的方法:?

?



	
		
		
		
			*{
				margin: 0;
				padding: 0;
			}
			/* 元素铺满整个网页 */
			body,html{
				height:100%
			}
			.box{
				width: 100%;
				height: 100%;
				background: orange;
			}
			
		
	
	
		

?

本文《css高度自适应以及高度塌陷总结》版权归月疯所有,引用cssdiv高度自适应需遵循CC 4.0 BY-SA版权协议。

本文地址:https://www.ufidawhy.com/gjp/120108.html
版权声明:本文来源于网络,如有侵权请E-mail联系 ufidawhy 站长 ufidawhy@vip.qq.com!

评论已关闭!