前端之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;元素隱藏不可見,位置保留

 

 

 

三、窗口高度自適應

 

 

 

首先,給htmlbody設置高度為100%

 

 

 

html,body{height:100%;}

 

 

 

然后給元素設置高度100%

 

 

 

div{height:100%}

 

 

 

注:常用於窗口內容不滿一屏或者沒有內容body高度為0

 

四、水平居中和垂直居中:

 

 

 

1.行內元素水平居中設置

 

 

 

設置文本、圖片等行內元素水平居中,給父元素設置text-align:center;

 

 

 

2.定寬塊狀元素水平居中設置

 

 

 

給定寬塊狀元素設置左右margin值為auto

 

 

 

注:當元素設置float或絕對定位,固定定位時,左右marginauto失效

 

 

 

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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM