1.高度不去设置,或者高度设置auto 内容撑开父元素的高度。
2.内容撑开父元素的高度 -> 最小高度的设置 min-height
3.浮动元素添加高度自适应 -> 添加浮动元素的父元素没有高度,会出现高度塌陷
(1)给出现高度塌陷的元素添加:overflow:hidden;
原理:overflow:hidden;触发了一个 BFC(布局逻辑)
BFC规定:计算BFC高度时候,浮动元素也参与计算。
弊端:隐藏掉定位在当前元素外围的内容。
(2)在浮动元素的下方(同级)添加一个空的div,给div设置样式div{clear:both;}
原理:添加的空div添加了clear:both;忽略上方同级添加浮动的元素留出的空间。在父元素最底下显示,撑 开父元素高度。
弊端:形成代码的冗余(出现高度塌陷,添加一个div)
(3)万能清除法:
.clear_fix:after{
content:".";
clear:both;
display:block;
height:0;
overflow:hidden;
visibility:hidden;
}
.clear_fix{
zoom:1;
}
让子元素高度随着父元素高度进行改变。
前提条件:
body,html{
height:100%;
}
clear:both; 当前元素会忽略上方添加浮动的元素 留出来的空间。
(闭合浮动)
clear的属性值:
clear:left
clear:right
clear:both
1.元素选择符
::after{
content:"";
}
说明: 在某个元素的后面用css的形式添加内容(图片、文本)。
2.元素选择符
::before{
content:"";
}
说明: 在某个元素的前面用css的形式添加内容(图片、文本)。
3.元素选择符
::first-letter{
}
说明:控制第一个字符的样式
4.元素选择符
::first-line{
}
说明:控制第一行的样式
display:none;
将元素彻底隐藏,不再占据空间
visibility:hidden;
将元素隐藏,占据空间,在页面上留下一片空白
先了解一下CSS3的相对长度单位:相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用,通过vh / vw 我们可以获得当前屏幕的视窗宽度
有时候,我们一进入页面,就需要获取display为none元素的物理尺寸(宽高),或获取display为none元素的子元素的物理尺寸(宽高),本篇文章就如何解决以上问题给出自己的解决方案,获取display为none元素的子元素的物理尺寸
给高度塌陷的元素设置overflow:hidden;原理:因为overflow:hidden;触发了一个BFC,BFC布局规则:计算BFC高度的时候,里面的浮动元素也参与计算。弊端:定位在当前元素外面的内容会被隐藏。
父元素在文档流中高度默认是被子元素撑开的,当子元素脱离文档流以后,将无法撑起父元素的高度,也就会导致父元素的高度塌陷,父元素的高度一旦塌陷所有元素的位置将会上移
在我们的网页中有一个固定区域,这个区域会用于渲染从后端拉取的含有图片等资源的富文本字符串。他需要在内容不超过一个最大高度的时候完全显示所有内容,超过最大内容后仅展示最大高度范围内的内容
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!