HTML盒子模型.pptx
HTML盒子模型 HTML盒子模型是网页布局的基础结构,包括边框、内边距、背景图、背景色和外边距五个部分。盒子模型的基本属性包括边框、内边距和外边距三个方面。 一、边框(border) 边框是盒子模型的外壳本身的厚度,边框属性有border-width、border-style和border-color三个方面。边框可以设置四个方向的宽度、样式和颜色,例如border:1px solid blue设置四个方向的边框均为1像素、蓝色、实线。边框颜色可以使用十六进制表示,例如border-color:#FF00FF。 二、内边距(padding) 内边距是内容与边框间的距离,padding属性可以设置四个方向的内边距,例如padding:10px 20px 40px 80px设置上内边距为10px、右内边距为20px、下内边距为40px和左内边距为80px。内边距的值不允许为负值,可以四边分别设置或一次赋值。 三、外边距(margin) 外边距是盒子与其他盒子之间的距离,margin属性可以设置四个方向的外边距,例如margin:1px 2px 3px 4px设置上外边距为1px、右外边距为2px、下外边距为3px和左外边距为4px。外边距可以使用 auto 值实现水平居中效果。 四、盒子模型在页面布局中的应用 盒子模型可以使用在页面布局中实现各种布局效果,例如设置页面背景色、设置logo图片的布局、实现水平居中效果等。例如,使用<style type="text/css"> body { margin:0px;padding:0px; background:#ccc; } #logo { width:380px; border:5px solid #666; padding:10px 20px 40px 80px; background:#ff7300; margin:30px auto; }</style>可以实现贵美logo图片的布局。 五、盒子模型在生活中的应用 盒子模型的概念在我们生活中并不陌生,例如礼品的包装盒。礼品是最终运输的物品,四周一般会添加抗震材料,在外面是包装纸壳边框内边距外边距。盒子模型的结构可以类比于包装盒的结构,边框相当于包装盒的边框,内边距相当于填充材料,外边距相当于包装盒与其他包装盒之间的距离。