本文主要介绍【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版权协议。
版权声明:本文来源于网络,如有侵权请E-mail联系 ufidawhy 站长 ufidawhy@vip.qq.com!