css设置自适应高度和垂直居中

前端之家收集整理的这篇文章主要介绍了css设置自适应高度和垂直居中前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

注:IE盒子模型和标准w3c盒子模型区别(参考:404.shtml)">http://www.360doc.com/content...

自适应高度

第一种:一定高度内容加多时自适应高度,而内容少时DIV有一定最小高度

_height:200px; /* css 注解: 仅IE6设别此属性,假定最低高度是200px ,设置高度200px,内容超出后IE6会自动撑高设定高度 */ 
min-height:200px; /* css注释: css最小高度为200px支持所有浏览器,IE6浏览器除外 */ 

第二种:没有最小高度,DIV完全自适应高度。

第三种:容器嵌套的情况下,而子容器又是浮动的

例:
 
其中class为fuqin的div有浮动的li,当li比较多的时候,即便是div设置的是最小高度,也无法被撑开。 
原因就在于作为子容器的li是浮动的即 。在这种情况下,即便是li的内容超过了div的高度,div也无法撑开。 
@R_502_323@如下: 
在浮动的容器后面,父容器结束之前加入一个div 

<div class="fuqin">

<div class="clearfloat">

.clearfloat{clear:both;height:0;font-size: 1px;line-height: 0px;}

第四种:通过position自适应高度

    例:
  
.righinfo{ font-family: '华文'; background-color: #f6fffa; border: 1px solid red; padding: 0px; left:0px; right:0px; top:0px; bottom: 0px; position: absolute; text-align: center; } 主要通过position、left、right、top、bottom来设置实现

垂直居中

第一种:CSS中的vertical-align属性,但是它只对(X)HTML元素中拥有valign特性的元素才生效,

例如表格元素中的、等,而像
这样的元素是没有valign特性的, 因此使用vertical-align对它们不起作用 通过display来实现这种方式 多行<a href="https://www.jb51.cc/tag/wenzi/" target="_blank" class="keywords">文字</a>实现垂直居中
这里设置一个“#main”对象样式,宽400px,高200px,使用了绝对定位position样式同时使用绝对定位left和top,并且同时设置margin-top和margin-left,为了观察到效果,所以对此div盒子加了个红色边框。 这里使用了绝对定位position:absolute,使用left和top设置对象距离上和左为50%,但如果设置50%,实际上盒子是没有实现居中效果,所以又设置margin-left:-200px;margin-top:-100px;,这里有个技巧是,margin-left的值是宽度一半,margin-top的值也是对象高度一半,同时设置为负,这样就实现了水平和垂直居中。

第三种:不固定高度div垂直居中(还没整理)

参考(http://www.haorooms.com/post/css_div_juzhong)
原文链接:https://www.f2er.com/note/421563.html

猜你在找的程序笔记相关文章