一、寬度自適應

語法：width:100%;

注： a）塊狀元素的默認寬度為100%

　　 b) 當給元素設置寬度為100%時，繼承父元素的寬度

　　 c) 通常使用寬度自適應實現通欄效果

---

?

二、高度自適應

語法：height:auto;（等同于不給元素設置高度）

---

?

三、最小高度，最大高度，最小寬度，最大寬度

1.最小高度

語法： min-height:數值 單位;

注：IE6不識別min-height屬性，解決方案如下：

方案一： min-height:100px; _height:100px;

方案二： min-height:100px; height:auto!important; height:100px;

2.最大高度

語法： max-height:數值 單位;

3.最小寬度

語法：min-width:數值 單位;

注：當給塊元素設置min-width屬性時，需要將塊元素轉換為display:inline-block;

4.最大寬度

語法：max-width:數值 單位;

注：以上四個屬性在IE6及以下版本瀏覽器中不識別

---

?

四、高度塌陷問題（常見的幾種清除浮動的方法）

描述：當父元素高度自適應，子元素設置了float，導致父元素高度為0，稱為高度塌陷問題

解決方案如下：

1.方案一

給父元素一個固定的高度

缺點：不能實現高度自適應，不夠靈活（不推薦使用）

2.方案二

給父元素設置overflow:hidden;

優點：簡單，父元素可以高度自適應

缺點：當子元素有定位屬性時，由于父元素設置了overflow:hidden;父元素容器之外的部分會被隱藏

3.方案三

在子元素的末尾添加一個空div，并設置樣式：

.clear{clear:both;height:0; overflow:hidden;}

注：a）此div只為解決高度塌陷問題，不需要在瀏覽器中顯示，所以設置height:0;

b）IE6不能識別小于10px的容器，所以要加overflow:hidden;來兼容IE6

優點：所有瀏覽器都支持

缺點：在網頁中添加無意義的一個div,會造成代碼冗余

4.方案四

通過偽元素的方式解決高度塌陷問題(萬能清除浮動法)

父元素:after{
content:".";
display:block;
height:0;
overflow:hidden;
clear:both;
visibility:hidden;
}

注：偽元素的語法

選擇器:before{content:"";} 在子元素之前去添加一個偽元素

選擇器:after{content:"";} 在子元素之后去添加一個偽元素

偽元素是內聯元素

---

?

五、元素隱藏不可見的兩種方式（display:none;和visibility:hidden的區別）

1.display:none;

元素被隱藏，空間不保留；（看不見，摸不著）

2.visibility:hidden;

元素被隱藏，空間保留；（看不見，摸得著）

注：display:none;和overflow:hidden;的區別

display:none讓元素完全隱藏不顯示，overflow:hidden;是讓元素溢出部分隱藏不可見，沒有溢出部分正常顯示

---

?

六、窗口高度自適應

首先，要設置窗口的高度自適應

html,body{height:100%;}

然后，給元素設置

div{height:100%;}

注：窗口高度自適應適用于屏幕窗口沒有內容body為0或內容不滿一屏的情況下使用

---

?

七、內聯元素水平居中設置

如果被設置水平居中的元素是文本，圖片等內聯元素時，通過給父元素設置text-align:center;實現

---

?

八、定寬塊狀元素水平居中設置

滿足定寬，塊狀元素兩個條件的元素，將左右margin設置為auto即可實現元素在水平方向上居中顯示

注：a）當給元素設置了float后，左右為auto將會失效

　　b) 當給元素設置了absolute和fixed后，左右auto將會失效

---

?

九、不定寬塊狀元素水平居中設置

1.給父元素設置以下樣式

a）給父元素設置display:table; 將元素轉換為表格形式

b) 給父元素設置左右margin為auto

2.給父元素設置：text-align:center;

? ?給子元素設置: display:inline-block;

---

?

十、元素在屏幕窗口水平垂直都居中

1.定寬高元素在屏幕窗口水平垂直都居中

元素{

width:value;
height:value;
position:fixed;
left:50%;
top:50%;
margin-left:-width/2 "px";
margin-top:-height/2 "px";
}
2.不定寬高元素在屏幕窗口水平垂直都居中

元素{

position:fixed;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
}

---

?

十一、不定寬高子元素在父元素中水平垂直都居中

1.方案一（高度須給定，否則垂直居中高度拉伸充滿父元素）

父元素{position:relative;}

子元素{

position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
}
2.方案二

父元素{

display:table-cell;
text-align:center;
vertical-align:middle;
}

注：display:table-cell;將元素轉換為表格單元格形式

?　　3.子元素轉換成行內塊狀元素寬高自適應，子元素同級設置高度充滿父元素的參照物 且行內塊狀元素。同級子元素通過設置vertical-align:middle;垂直居中。兼容IE8及更高版本。

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的从零开始学习前端开发 — 7、CSS宽高自适应的全部內容，希望文章能夠幫你解決所遇到的問題。

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