第五單元 盒子模型任務10 盒子模型及應用學習目標盒子模型的概念掌握邊框的設置內邊距的設置外邊距的設置學習目標了解:利用盒子模型布局網頁的優勢任務目標實戰演練——制作古詩文欣賞網頁強化訓練——制作散文賞析網頁知識準備1. 盒子模型的概念知識準備1. 盒子模型的概念CSS將HTML頁面中的每一個元素看成是一個矩形盒子，占據一定的頁面空間。一個HTML頁面由很多這樣的盒子組成，這些盒子之間會相互影響，因此網頁布局主要是掌握：一個獨立的盒子的內部結構；多個盒子之間的相互關系。盒子模型使用

知識準備小技巧：分別設置邊框樣式上邊框樣式：border-top-style右邊框樣式：border-right-style下邊框樣式：border-bottom-style左邊框樣式：border-left-style知識準備2. 邊框的設置：邊框寬度邊框寬度(border-width)：單位為像素px基本格式：border- width：上邊框 [ 右邊框 下邊框 左邊框]；值復制原則：1個值：四邊2個值：上下/左右3個值：上/左右/下4個值：上/右/下/左知識準備示例：邊框寬度的設置 知識準備小技巧：分別設置邊框寬度上邊框寬度：border-top-width右邊框寬度：border-right-width下邊框寬度：border-bottom-width左邊框寬度：border-left-width知識準備2.邊框的設置：邊框顏色邊框顏色(border-color)：預定義的顏色值、#RRGGBB或rgb(r,b,g)。基本格式：border-color：上邊框 [ 右邊框 下邊框 左邊框]；值復制原則：1個值：四邊2個值：上下/左右3個值：上/左右/下4個值：上/右/下/左知識準備示例：邊框顏色的設置