项目六DIV+CSS布局网

《项目六DIV+CSS布局网》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、项目六DIV+CSS布局网页掌握盒模型了解元素类型掌握DIV及其常用属性能够分析并使用DIV+CSS布局网页所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间。一般来说这些被占据的空间往往都要比单纯的内容要大，因为盒子可以有边框，盒子内外都可以有边距，可以通过调整盒子的边框和边距等参数，来调节盒子的位置。一个盒子模型由content（内容）、border（边框）、padding（填充也叫内边距）和margin（外边距）这4个部分组成。如图所示。6.1任务1：认识盒模型6.1.1盒模型概述内边

2、距（padding）外边距（margin）边框（border）Padding与margin都有上、右、下、左四个值。当这些属性被赋值后，会影响盒子的宽度与高度。1、盒模型的宽度盒模型的宽度=margin-left（左外边距）+border-left（左边框）+padding-left（左内边距）+width（内容宽度）+padding-right（右内边距）+border-right（右边框）+margin-right（右外边距）2、盒模型的高度盒模型的高度=margin-top（上外边距）+bor

3、der-top（上边框）+padding-top（上内边距）+height（内容高度）+padding-bottom（下内边距）+border-bottom（下边框）+margin-bottom（下外边距）【实例】盒模型宽高计算div{margin:30px;padding:20px;height:100px;width:100px;border:solid20px#CCFFFF;}6.1任务1：认识盒模型DIV的宽度=30px+20px+

4、20px+100px+20px+20px+30px=240pxDIV的高度=30px+20px+20px+100px+20px+20px+30px=240px6.1任务1：认识盒模型6.1.2元素类型HTML中的元素默认分为两种：块元素（blockelement）与行内元素（inlineelement）。1、块元素块元素是独立的，显示时独占一行。常见的块元素有：p、div、ul、li、h1、dt...2、行内元素行内元素都会在一行内显示。常见的行内元素有：a、img、span、strong...【实

5、例】元素类型.block{background-color:#6CF;}.inline{background-color:#F9F;}6.1任务1：认识盒模型块元素

块元素在显示时会独占一行，常见的块元素有p、ul、li...