前端之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;
}
註：display:table-cell;將元素轉換為表格單元格形式
方法三：
在父元素中添加一個參照物，如<span></span>
元素{
vertical-align:middle;
}
span{
display:inline-block;
width:0;
height:100%;
vertical-align:middle;
}
父元素{
text-align:center;
}
結構：
<div class="box">
<img src="1.jpg"/><span></span>
</div>
前端之css（寬高）設置小技巧