一、寬度自適應
語法：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
注：a）此div只為解決高度塌陷問題，不需要在瀏覽器中顯示，所以設定height:0;
b）ie6不能識別小於10px的容器，所以要加overflow:hidden;來相容ie6
優點：所有瀏覽器都支援
缺點：在網頁中新增無意義的乙個div,會造成**冗餘
4.方案四
通過偽元素的方式解決高度塌陷問題(萬能清除浮動法)
父元素:after
注：偽元素的語法
選擇器:before 在子元素之前去新增乙個偽元素
選擇器:after 在子元素之後去新增乙個偽元素
偽元素是內聯元素
五、元素隱藏不可見的兩種方式（display:none;和visibility:hidden的區別）
1.display:none;
元素被隱藏，空間不保留；（看不見，摸不著）
2.visibility:hidden;
元素被隱藏，空間保留；（看不見，摸得著）
注：display:none;和overflow:hidden;的區別
display:none讓元素完全隱藏不顯示，overflow:hidden;是讓元素溢位部分隱藏不可見，沒有溢位部分正常顯示
六、視窗高度自適應
首先，要設定視窗的高度自適應
html,body
然後，給元素設定
div注：視窗高度自適應適用於螢幕視窗沒有內容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.定寬高元素在螢幕視窗水平垂直都居中
元素2.不定寬高元素在螢幕視窗水平垂直都居中
元素十
一、不定寬高子元素在父元素中水平垂直都居中
1.方案一（高度須給定，否則垂直居中高度拉伸充滿父元素）
父元素子元素
2.方案二
父元素注：display:table-cell;將元素轉換為**單元格形式
3.子元素轉換成行內塊狀元素寬高自適應，子元素同級設定高度充滿父元素的參照物 且行內塊狀元素。同級子元素通過設定vertical-align:middle;垂直居中。相容ie8及更高版本。
從零開始學習web前端開發
之前半個月一直在學習深度學習，但是感覺自己的能力還沒到那個程度所以就想擱置一下，從程式設計師基礎的前端開發來學。廢話不多說直接開記 我所使用的前端開發軟體就是業內很流行的vscode，作為小白的我當然也是用的這個 具體的安裝教程，外掛程式教程網上都有詳細的介紹，在此處不多講 在vscode中輸入 就...
從零開始學習前端開發 3 CSS盒模型
css盒模型是css的基石，每個html標籤都可以看作是乙個盒模型。css盒模型是由內容 content 補白或填充 padding 邊框 border 外邊距 margin 四部分組成 1.內容 content 寬度 width 數值 單位 高度 height 數值 單位 eg box 2.補白或...
從零開始的wed前端學習 css基礎
繼承性 層疊性 可被覆蓋 1.後來者居上原則 後來的樣式覆蓋先前的樣式,越往後越說的算 2.行內樣式優先順序大於頭部樣式與外部樣式 3.頭部樣式優先順序大於等於外部樣式 因為後來者居上原則頭部樣式優先順序大於外部樣式 4.越精確越說的算,id選擇器 class類選擇器 標籤選擇器 5.importa...