css高度满屏怎么设置 css高度自适应的操作 _知识分享

一、css宽高自适应：1.宽度自适应：
元素宽度设为100%（块状元素的默认宽度为100%）
注：应用在通栏效果中
2.高度自适应：
height:auto;或者不设置高度3.最小，最大高度，最小，最大宽度：
a)最小高度 min-height:value;
IE6不识别min-height属性，解决方案如下：方案一：min-height:100px; _height:100px; 方案二：min-height:100px; height:auto!important; height:100px;b)最大高度：
max-height:value;c)最大宽度：
max-width:value;d)最小宽度：
min-width:value;注：块状元素设置最小宽度时，需要将元素转换为内联块状元素，添加display:inline-block;
注：以上四个属性IE6及以下版本浏览器不支持
4.高度塌陷问题：
描述：子元素浮动，父元素高度自适应，造成父元素高度为0 ，简称高度塌陷问题
解决方案：
方案一：
给父元素添加overflow:hidden; 优点：简单，兼容性好缺点：当有position:relative;出现时，会影响页面显示效果方案二：
给父元素固定的高度 height:value; 缺点：不灵活，高度无法自适应方案三：
在子元素的末尾添加一个空div，并设置样式 .clear{height:0; overflow:hidden;clear:both;} 优点：所有浏览器都支持缺点：在页面中添加一个无意义的div ，造成代码冗余方案四：（万能清除浮动法，推荐使用）
通过伪元素的方式清除浮动
父元素:after{ content:\"\"; height:0; overflow:hidden; clear:both; display:block; visibility:hidden;}注：伪元素是内联元素,转换为块元素设置宽高才能生效
height:0;在IE6下不兼容，添加overflow:hidden;兼容IE6
二、元素隐藏不可见的两种方式（display:none;和visibility:hidden的区别）1.display:none;元素隐藏不可见，位置不保留
2.visibility:hidden;元素隐藏不可见，位置保留
三、窗口高度自适应首先，给html，body设置高度为100%html,body{height:100%;} 然后给元素设置高度100% div{height:100%} 注：常用于窗口内容不满一屏或者没有内容body高度为0时四、水平居中和垂直居中：1.行内元素水平居中设置
设置文本、图片等行内元素水平居中，给父元素设置text-align:center;
2.定宽块状元素水平居中设置
给定宽块状元素设置左右margin值为auto
注：当元素设置float或绝对定位，固定定位时，左右margin为auto失效
3.不定宽块状元素水平居中
方法一：
给父元素设置 {display:table;margin:0 auto;}注： display:table;将元素转换为表格的形式
方法二：
子元素设置： {display:inline-block;}父元素设置：{text-align:center;}五、元素水平垂直都居中1.未知宽高元素在屏幕窗口水平垂直都居中
方法一：
元素{ width:value; height:value; position:fixed; left:50%; top:50%; margin-left:-width/2+px; margin-top:-height/2+px; }方法二：
元素{width:value;height:value; position:fixed;left:0;top:0;right:0;bottom:0;margin:auto;}2.未知宽高元素在父元素中水平垂直都居中
方法一：
元素{ width:value; height:value; position:absolute; left:0; top:0; right:0; bottom:0; margin:auto; }方法二：
父元素{ width:value; height:value; display:table-cell; vertical-align:middle; text-align:center; }【css高度满屏怎么设置 css高度自适应的操作】注：display:table-cell;将元素转换为表格单元格形式