html5中3个盒子怎样设置,Web前端开发任务驱动式教程（HTML5+CSS3+JavaScript）任务10 盒子模型及应用.pptx...

第五单元 盒子模型任务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个值：上/右/下/左知识准备示例：边框颜色的设置