一、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;將元素轉換為表格單元格形式

總結

以上是生活随笔為你收集整理的gridcontrol值为0时设置为空_CSS设置宽高的小技巧的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。