项目二任务一 制作“科创匠心”页面

科技在线制作“科创匠心”页面CONTENTS目录盒子模型第一部分DIV标记第二部分盒子模型的组成部分第三部分CONTENTS目录CSS3设置盒子box-sizing属性第四部分盒子模型第一部分盒子模型盒子模型是CSS中的一个基本概念，它代表了HTML元素的布局方式。所有的HTML元素都可以看做是一个盒子，通过盒子模型，可以精确地控制元素的大小、位置、边距、填充和边框。盒子模型边框内边距外边距盒子模型网页中的每个元素都可以看做是一个矩形的盒子，每个盒子都由内容（content）、内边距（padding）、外边距（margin）和边框（border）组成，如图所示。这四个部分的共同作用，决定了元素在页面上的最终显示效果。DIV标记第二部分DIV标记通常网页中的元素可以分为以下两种：行内元素HTML标记块元素DIV标记大多数HTML标记都可以嵌套在DIV标记中，DIV标签中还可以嵌套多层DIV。<div>

内部相当于是一个“盒子”可以容纳段落、标题、表格、图像 等各种网页元素。</div>DIV标记DIV标记的用途布局容器：用来创建页面的布局结构内容分组：将相关的元素组合在一起，形成一个独立的部分样式应用：为DIV元素添加类或ID属性，为目标元素应用特定的样式响应式设计：在响应式网页设计中，DIV元素可以被用来创建灵活的布局盒子模型的组成部分第三部分盒子模型的组成部分一个盒子从内到外依次包括4个部分：内容（content）、内边距（padding）、边框（border）和外边距（margin）。盒子模型的组成部分其中，content是网页元素的内容。padding、border和margin是CSS属性，通过这三个属性可以控制盒子的这三部分。盒子实际所占的宽度（高度）=内容+内边距+边框+外边距盒子模型的组成部分1.内容content内容（content）是盒子模型的核心部分，也就是元素的实际内容，它包含了文本、图像等元素。内容区域是盒子模型中唯一不可或缺的部分，其他三部分都是可选的。盒子模型的组成部分2.内边距padding内边距用于控制内容与边框之间的距离。内边距进一步细化，即上、下、左、右4个内边距，对应的属性如表2-1-1所示。属性说明padding-top上内边距padding-bottom下内边距padding-left左内边距padding-right右内边距表2-1-1内边距及属性盒子模型的组成部分2.内边距paddingpadding属性值的个数3个值2个值1个值表示上、下、左、右4个内边距均为该属性值前者表示上、下内边距的属性值，后者表示左、右内边距的属性值第1个为上内边距的属性值，第2个为左、右内边距的属性值，第3个为下内边距的属性值4个值按照顺时针方向，依次是上、右、下、左内边距的属性值盒子模型的组成部分3.边框border边框（border）围绕在内边距的外围，用于定义内边距和外边距之间的界限，同时也起到了美化元素的作用。边框是占据空间的，因此在计算元素的尺寸时，要把边框也考虑进去。盒子模型的组成部分3.边框bordercolorborder-colorwidthstyleborder-widthborder-style盒子模型的组成部分3.边框borderborder-color用来设置边框的颜色，其属性值可以是颜色名称（如red、blue）、十六进制颜色值（如#FF0000、#0000FF）、RGB值（如rgb(255,0,0)）、RGBA值（rgba(255,0,0,0.5)）或HSL函数（如hsl(0,100%,50%)）等。盒子模型的组成部分3.边框borderborder-width用来设置边框的粗细程度，其属性值可以是具体的长度单位（如px、em、rem等），或者是相对单位（如thin、medium、thick）。盒子模型的组成部分3.边框borderborder-style定义了边框的外观，其常见的样式参照表2-1-2所示。属性值说明属性值说明solid实线ridge3D垄状dotted点线inset3D内嵌dashed虚线outset3D外嵌double双线none无边框groove3D凹槽hidden隐藏边框表2-1-2border-style常见属性值盒子模型的组成部分3.边框border盒子模型的组成部分3.边框border为了简化使用，可以通过一行代码来为边框同时设置宽度、颜色和样式，此时可以使用如下的代码。border:2pxredsolid;通过上述代码，就可以为4个边框同时设置其宽度为2px，颜色为红色，边框线为实线。盒子模型的组成部分3.边框border在为边框设置属性时，当有多条语句作用于同一个边框时，后面的语句代码会覆盖前面的代码。所以，我们有时为了给某条边框单独设置某个属性时，可以先通过border属性来设置整体边框属性，再单独为某一条边框设置其独有属性值。盒子模型的组成部分4.外边距margin外边距（margin）是元素之间的间隔，它决定了元素与其他元素之间的距离。通过调整外边距，我们可以控制元素之间的相互位置关系，从而影响整体布局。margin:5px;

/*设置外边距为5px*/在案例2-1-1的基础上对代码进行完善，在DIV标记选择器中为其增加外边距的属性设置。具体代码如下。盒子模型的组成部分4.外边距margin各盒子之间具有了一定间距盒子模型的组成部分5.盒子的宽和高一个完整的网页是由多个盒子经过合理排列布局形成的，每个盒子都有其特定的大小。在CSS中，使用width和height属性来控制盒子的宽度和高度。width和height的属性值可以是不同单位的数值，也可以是相对于父元素的百分比。在实际应用中，使用最多的是像素值。盒子模型的组成部分5.盒子的宽和高CSS3设置盒子背景属性第一部分CSS3设置盒子box-sizing属性第四部分CSS3设置盒子box-sizing属性box-sizing是CSS中的一个属性，它用于定义如何计算元素的总宽度和高度。这个属性对于控制元素的盒模型（包括内容、内边距、边框和外边距）非常关键。CSS3设置盒子box-sizing属性box-sizing属性值content-boxborder-boxCSS3设置盒子box-sizing属性当box-sizing设置为content-box时，元素的宽度和高度仅包括内容区域的尺寸，不包括内边距、边框和外边距。这意味着，如果你增加内边距或边