css高度自适应-父元素随子元素变化

Day16
1、 min-height IE6不兼容问题
正常项目中：最小高度直接用min-height即可。
如果考虑兼容：min-height IE6不兼容。IE6默认把height解析成最小高度。若height 和min-height同时出现，IE6执行的事height固定高度。

最小高度的兼容设置方法：（了解：体会解决问题的思路）
1：min-height:300px;_height:300px;
2:min-height:300px;height:auto!important;height:300px;
A:高版本浏览器解析顺序：
Min-height能识别，也可以识别！important ，所以height：auto；权重最高，这样就能把把height:300px覆盖。
B: IE6解析流程：
Min-height不能识别，也不能识别！important，后写的height：300px; 会把height：auto;覆盖。

 过滤器：

下划线过滤器（IE6过滤器）
语法：
_属性：属性值；
只有IE6能识别带有下划线的属性。
！important （IE6不识别）
语法：
属性：属性值！important；
属性过滤器
当在一个属性前面增加了后，该属性只能被IE7识别，其他浏览器忽略该属性的作用。
语法：
*属性：属性值；
4. \9：IE版本识别；其他浏览器都不识别
语法：
属性：属性值\9;
\0：IE8及以上版本识别；其他浏览器不识别

2、高度塌陷
高度塌陷出现的场景：
当子元素有浮动，父元素没有高度的时候，父元素会出现高度塌陷。
注：浮动的子元素不会撑开父元素的height 或者是 min-height。

解决高度塌陷的方法：

给出现高度塌陷的元素添加：overflow:hidden;
原理：overflow：hidden；触发了一个BFC（Block formatting Context 布局逻辑）
BFC规定：计算BFC高度的时候，浮动元素也参与计算。
弊端：会隐藏掉定位在当前元素外围的内容。
在浮动元素下方（同级）添加一个空的div，给div设置样式
Div{clear:both;}
原理：添加的空div添加了{clear：both；}之后，会忽略上方同级添加浮动的元素流出的空间。
弊端：形成代码的冗余（没出现一个高度塌陷，都需要添加一个div）

Clear:both; 当前元素会忽略上方添加浮动的元素留出来的空间。（闭合浮动）
Clear的属性值：
Clear:left;
Clear:right;
Clear:both;

万能清除法：
.clear_fix:after{
Content:”.”;
Clear:both;
Display:block;
Height:0;
Overflow:hidden;
Invisibility:hidden;
}
.clear_fix{
Zoom:1;
} 此设置为IE6浏览器兼容性考虑，可不加。

3、为对象选择符：
1．元素选择符:after{
Content:””;
}(规范写法::after)
说明：在某个元素的后面用css的形式添加内容（图片，文本）
2．元素选择符:before{
Content:””;
}(规范写法::before)
说明：在某个元素的前面用css的形式添加内容（图片，文本）
3．元素选择符:first-letter{ }(规范写法:: first-letter)
说明：控制第一个字符的样式。
4．元素选择符:first-line{ }(规范写法:: first-line)
说明：控制第一行的样式。

4、 visibility属性
visibility:hidden;
将元素隐藏，并占据空间，在页面上留下需隐藏元素块的大小的空白。
注：display:none;
将元素彻底隐藏，不会占据空间。

css高度自适应-父元素随子元素变化相关推荐

微信小程序swiper高度自适应，swiper的子元素高度不固定
小程序 swiper 组件默认高度150px,并且如果子元素过高,swiper不会自适应高度解决方案一: (总体来说不够完美,适合满屏滑动) 如果不是满屏的状态,用scroll-view IOS滑动 ...
[css] 父元素下有子元素，子元素也有高度但父元素的高度为何为0呢？分析下可能出现的原因及解决方法
[css] 父元素下有子元素,子元素也有高度但父元素的高度为何为0呢?分析下可能出现的原因及解决方法父元素塌陷父元素在文档流中高度默认是被子元素撑开的,当子元素脱离文档流以后,将无法撑起父元素的高度 ...
[css] css中padding和margin是相对于父元素还是子元素呢？
[css] css中padding和margin是相对于父元素还是子元素呢? padding就是往自己身体里塞东西(盒子里面),margin就是穿衣服(盒子外面). ==>padding相对于子 ...
css设置元素网页高度自适应,css高度自适应如何实现？css高度根据内容自适应的简单方法...
在进行网页开发时,可能会遇到这样的情况,网页中的内容会超出你原先设置的高度或者宽度,这时就需要实现高度自适应或者宽度自适应,下面这篇文章将给大家来介绍关于css高度自适应. PS:css宽度自适应的介 ...
前端----CSS 父元素在子元素之上显示
今天做练习想让父元素在上覆盖子元素的边框, 在网上查了些资料, 发现了一种办法能让父元素靠上显示, 把子元素的z-index值设为负数 (position不能是默认值,z-index对定位属性生效) ...
CSS回顾总结（二）——伪类、伪元素、子元素和后代元素选择器、盒子模型
目录伪类伪元素子元素和后代元素选择器盒子模型边距边框边框样式内联元素盒子模型伪类伪类:专门用来表示元素的一种特殊状态 * 比如:访问过的超 ...
[css] 当使用opacity时会使得元素的子元素也透明，此时不想要子元素也跟着透明怎么办？
[css] 当使用opacity时会使得元素的子元素也透明,此时不想要子元素也跟着透明怎么办? 当父元素使用opacity时,子元素也会继承该透明度,即使重新设置透明度也不行.楼上的两种方法要么是放弃 ...
父元素与子元素的width关系
第一部分:父子元素都是内联元素代码演示如下: <!DOCTYPE html> <html> <head><title>fortest</titl ...
jquery获取元素（父级的兄弟元素的子元素）
一.获取父级元素使用jquery获取父级元素: parent() 例如:$(this).parent('ul'); 二.获取同级元素使用jquery获取同级元素:siblings() 例如:$(t ...

css高度自适应-父元素随子元素变化

css高度自适应-父元素随子元素变化相关推荐

最新文章

热门文章