web前端技術分享css盒模型
學習目標
一、css盒模型的概念及組成
概念：盒模型是css布局的基石，它規定了網頁元素如何顯示以及元素間相互關係。css定義所有的元素都可以擁有像盒子一樣的外形和平面空間.
盒模型的組成：邊框、邊界/邊距、補白/填充、內容區。
二、盒子模型的相關元素
說明：
填充：padding,在設定頁面中乙個元素內容到元素的邊緣(邊框) 之間的距離。 也稱補白或填充。
用法：
1）用來調整子元素在父元素中的位置。
注：padding屬性需要新增在父元素上。
2）padding值是額外加在元素原有大小之上的，如想保證元素大小不變，需從元素寬或高上減掉後新增的padding屬性值
屬性值的4種方式：
四個值：上 右 下 左
三個值：上 左右 下
二個值：上下 左右
乙個值：四個方向 padding:2px;/*定義元素四周填充為2px*/
說明：可單獨設定一方向填充，如：上方向padding-top:10px; 右方向padding-right:10px; 下方向padding-bottom:10px; 左方向padding-left:10px;
說明：
邊界：margin,在元素外邊的空白區域，被稱為邊距/邊界。 「屬性值的用法同上」
margin-left:左邊界
margin-right:右邊界
margin-top:上邊界
margin-bottom:下邊界
屬性值的4種方式：
四個值：上 右 下 左
三個值：上 左右 下
二個值：上下 左右
乙個值：四個方向 margin:2px;/*定義元素四邊邊界為2px*/
margin:0 auto;/*乙個有寬度的元素在瀏覽器中橫向居中。
定義元素上、下邊界為2px，
說明：可單獨設定一方向邊界，如：margin-top:10px;
注：/*上下邊距重疊，左右邊距相加*/
三、標準盒子大小計算方式
寬 =左右border+左右padding+width，
高 =上下border+上下padding+height，
例如：乙個盒子的border 為 1px，padding 為 10px，content 的寬為 200px、高為 50px，
寬= border*2 + padding*2 + content.width = 1*2 + 10*2 +200 = 262px，
高= border*2 + padding*2 + content.height = 1*2 +10*2 + 50 = 112px，
怪異盒模型/ie盒子模型組成：margin+內容區
寬：width;
高:height;
四、盒模型注意事項
*margin值的解析：左右邊界累加，正常文件流的上下邊界重合。
*在正常文件流下，子元素（塊）直接寫margin-top時，會將margin-top屬性值加上父元素身上,(子元素或父元素不設定任何浮動及定位的屬性，或父元素不設定邊框的情況下。)
乙個標記可以設定多個class名
語法：《標記 class="名稱1 名稱2 名稱3 " >
好程式設計師web前端技術分享css盒模型
web前端技術分享css盒模型 學習目標 一 css盒模型的概念及組成 概念 盒模型是css布局的基石，它規定了網頁元素如何顯示以及元素間相互關係。css定義所有的元素都可以擁有像盒子一樣的外形和平面空間.盒模型的組成 邊框 邊界 邊距 補白 填充 內容區。二 盒子模型的相關元素 說明 填充 pad...
好程式設計師web前端分享邏輯運算
一門計算機語言，程式設計的核心在於邏輯思想，當我們在編寫程式的時候，邏輯是否通順，是能否正確寫出程式的關鍵，可以說如果你掌握了邏輯，那麼你就踏入了計算機程式設計的大門。與 或 否 邏輯 與 var a 0,b 3 alert a 0 b 3 true alert a 1 b 3 false 他的 返...
好程式設計師web前端分享CSS學習 HSLA顏色模式
好程式設計師web前端分享css學習 hsla顏色模式 一 理論 1.hsla顏色模式 a.hsla在hsl基礎上增加了不透明度，值越大透明度越低 b.hsla顏色模式的瀏覽器相容性和hsl一樣，只有較新版本的主流瀏覽器才支援 2.rgba和hsla顏色模式二者可以完全相互替換 3.rgba hsl...