盒子模型的概念
• 盒子模型用來「放」網頁中的各種元素。
• 網頁設計中內容，如文字、等元素，都可是盒子（div巢狀）
寬度屬性
寬度 width：長度值 | 百分比 | auto
最大寬度 max-width：長度值 | 百分比 | auto
最小寬度 min-width：長度值 | 百分比 | auto
高度屬性
高度 height：長度值 | 百分比 | auto
最大高度 max- height ：長度值 | 百分比 | auto
最小高度 min- height ：長度值 | 百分比 | auto
邊框屬性
• 邊框寬度（border-width）
• 邊框顏色（border-color）
• 邊框樣式 ( border-style）
4個方向來表示（上、下、左、右）
設定元素邊框寬度 border-width : thin | medium | thick | 長度值
設定元素邊框顏色 border-color ： 顏色 | transparent
設定元素邊框樣式 border-style : 值 | none | hidden
不同方向表示：
border-[left | right | top | bottom]-width
border-[left | right | top | bottom]-color
border-[left | right | top | bottom]-style
邊框縮寫：
border : [寬度] | [樣式] | [顏色]
不同方向：
border-top : [寬度] | [樣式] | [顏色]
border-left : [寬度] | [樣式] | [顏色]
border-right : [寬度] | [樣式] | [顏色]
border-bottom ：[寬度] | [樣式] | [顏色]值描述
none
定義無邊框。預設值
hidden
與 「none」 相同。除非在**元素中解決邊框衝突時
dotted
定義點狀邊框。在大多數瀏覽器中呈現為實線
dashed
定義虛線。在大多數瀏覽器中呈現為實線
solid
定義實線
double
定義雙線
groove
定義 3d 凹槽邊框
ridge
定義 3d 壟狀邊框
inset
定義 3d inset 邊框
outset
定義 3d outset 邊框
inherit
規定應該從父元素繼承邊框樣式。
內邊距屬性
設定元素的內容與邊框之間的距離（內邊距或填充）,分4個方向
（上、右、下、左）
– padding-top : 長度值 | 百分比
– padding-right :長度值 | 百分比
– padding-bottom :長度值 | 百分比
– padding-left :長度值 | 百分比
說明：值不能為負值
內邊距屬性縮寫
padding : 值1； //4個方向都為值1
padding : 值1 值2 ; // 上下=值1，左右=值2
padding : 值1 值2 值3；// 上=值1，左右=值2，下=值3
padding : 值1 值2 值3 值4；// 上=值1，右=值2，下=值3,左=值2
外邊距屬性
設定元素與元素之間的距離（外邊距）, 4個方向（上、右、下、左）
– margin-top : 長度值 | 百分比 | auto
– margin-right : 長度值 | 百分比 | auto
– margin-bottom : 長度值 | 百分比 | auto
– margin-left : 長度值 | 百分比 | auto
說明：值可為負值
外邊距屬性縮寫
設定元素與元素之間的距離（外邊距）, 4個方向（上、右、下、左）
margin : 值1； //4個方向都為值1
margin : 值1 值2 ; // 上下=值1，左右=值2
margin : 值1 值2 值3；// 上=值1，左右=值2，下=值3
margin : 值1 值2 值3 值4；// 上=值1，右=值2，下=值3,左=值2
• 預設情況下，相應html塊級元素存在外邊距
body、h1~h6、p……
• 宣告margin屬性，覆蓋預設樣式
• margin值為auto , 實現水平方向居中顯示效果
• 由瀏覽器計算外邊距
• margin值為auto , 實現水平方向居中顯示效果
• 由瀏覽器計算外邊距
• 在 css 中，width 和 height 指的是內容區域的寬度和高度
• 增加內邊距、邊框和外邊距不會影響內容區域的尺寸
• 但會增加元素框的總尺寸
display屬性
• inline
元素將顯示為內聯元素，元素前後沒有換行符
• block
元素將顯示為塊級元素 , 元素前後會帶有換行符
• inline-block
行內塊元素，元素呈現為inline，具有block相應特性
• none
此元素不會被顯示
WEB前端 盒子模型初識
border border width border style border color 複製 邊框屬性 設定邊框樣式 border style 邊框樣式用於定義頁面中邊框的風格，常用屬性值如下 none 沒有邊框即忽略所有邊框的寬度 預設值 solid 邊框為單實線 最為常用的 dashed 邊...
Web前端 CSS盒子模型
2.內邊距 3.盒陰影 4.盒模型概念 5.標籤最終尺寸的計算 盒子模型分別由外邊距 邊框 內邊距和標籤內容組成。屬性 margin 作用 調整標籤與標籤之間的距離 特殊 1 margin 0 取消預設外邊距 2 margin 0 auto 左右自動外邊距，實現標籤在父標籤範圍內水平居中 3 mar...
web前端 css盒子模型
css最重要的是盒子模型，盒子組成一切 盒子構成 首先可以直接設定各個區域 box 注意 這裡的width和height設定的大小是內容區的大小，不是整個盒子的大小。內邊距 邊框和外邊距可以應用於乙個元素的所有邊，也可以應用於單獨的邊。外邊距可以是負值，而且在很多情況下都要使用負值的外邊距。當wid...