一、寬度自適應

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

從零開始學習前端開發 — 6、CSS寬高自適應