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

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

高度塌陷的解决方法：
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%}

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

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}/* 元素铺满整个网页 */body,html{height:100%}.box{width: 100%;height: 100%;background: orange;}</style></head><body><div class="box"></div></body>
</html>

css高度自适应以及高度塌陷总结相关推荐

html div 自动适应屏幕,css怎么让高度自适应屏幕高度？
在一个DIV中有多个未知高度的子元素DIV,怎样通过CSS实现子元素div同高或怎样实现同行div按照内容最多的那个设置高度.下面我们来看一下css设置高度自适应屏幕高度的方法. 首先,我们刚开始设计 ...
html图片自适应浏览器高度,css如何高度自适应浏览器高度？
高度自适应就是高度能跟随浏览器窗口的大小改变而改变,典型的运用在一些后台界面中上面一栏高度固定用作菜单栏或导航栏,下面一栏高度自适应用于显示内容. 在IE7+及chrome.firefox等浏览器中, ...
怎么让Html的高度自适应屏幕高度
在写css静态页面的时候让Html的高度自适应屏幕高度是一个常见的需求,比如你有一个需要置底的bottom按钮,需要在内容不足一屏的时候显示在屏幕的底部,在内容超过一屏的时候显示在所有内容的底部. 效 ...
仿小红书根据图片高度自适应viewpager高度轮播图
源码地址:http://download.csdn.net/detail/qq_34262695/9805267 之前不了解小红书,直到有一天经理说看见一个他想要的效果,跟小红书一样,赶紧下载小红书来 ...
html css高度自适应浏览器高度,Div + CSS高度自适应解决方法_html/css_WEB-ITnose
转这几天用div+css写网站,样子上中下,中间是个左中右3列,可这3列不是等高偏巧有不同颜色的背景,结果就是ie.firefox...这些浏览器无一例外的现实的效果都是长短不齐,如何让这3列可以 ...
html文本域高度自适应,textarea高度自适应，textarea随着内容高度变化
有时候我们需要textarea的高度随着内容的多少去自适应的变化,今天我使用了JS原生和JQ写了一个textarea的高度随着他的内容高度变化的代码,希望能帮上忙. 废话不多说直接贴代码: texta ...
Div高度自适应内容高度之最简处理
1.首先确定这个div是block.默认情况下,div是block,不是就设置display:block: 2.div不要设置高度,设置overflow:hidden:
DIV高度自适应浏览器高度方法
*{margin: 0;padding: 0; } html, body{width: 100%;height: 100%; } div{position: absolute;top: 0;left: ...
CSS快速学习10：高度自适应
高度自适应网页布局中经常要定义元素的宽和高.但很多时候我们希望元素的大小能够根据窗口或子元素自动调整,这就是自适应. 元素自适应在网页布局中非常重要,它能够使网页显示更灵活,可以适应在不同设备.不同 ...

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

css高度自适应以及高度塌陷总结相关推荐

最新文章

热门文章