前端之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(寬高)設置小技巧