第五單元 盒子模型任務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個值：上/右/下/左知識準備示例：邊框寬度的設置 設置四邊的邊框為1像素，單實線 設置上下邊框為2像素，左右邊框為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個值：上/右/下/左知識準備示例：邊框顏色的設置

總結

以上是生活随笔為你收集整理的html5中3个盒子怎样设置,Web前端开发任务驱动式教程（HTML5+CSS3+JavaScript）任务10 盒子模型及应用.pptx...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。