页面的制作过程

 

1. 页面的制作过程

设计师——设计稿——前端工程师

设计稿=前端工程师+划分区域+填充内容

用合适的元素来表示不同的区域，设置区域的位置、尺寸、背景等样式。

每个元素都会在页面中生成一个矩形区域，CSS称该矩形区域为盒子(box)

2. 述盒模型概

Margin:外边框，与其他盒子的距离。

Border:边框

Padding：内边框，边框与内容的距离。

Conten内容的宽度和高度。

一个元素，产生什么样的盒子，取决于它CSS的display属性。

3. 盒子内容

CSS的尺寸单位

在CSS中，有很多属性的取值，需要表示为一个尺寸，一个尺寸，由数值和单位组成，CSS中常见的尺寸单位：px{像素，绝对尺寸，计算机屏幕由很多的小点组成，每一个点，就是一个像素}

 

Em{相对尺寸，相对于当前元素的字体大小(px)}

%{百分比，在不同的CSS属性中，有不同的含义}

所以其他尺寸单位，在经过浏览器计算后，都会变为px

padding 内边距、填充区含义：表示边框到内容之间的距离，分为上（top）、右（right）、padding-bottom下（bottom）、左（left）四个方向，类似于箱子和内部空间之间的填充物；相关CSS属性有：padding-top，padding-right，padding-left。

Border 边框含义：分割内部和外部的界限，由上(top)、右(right)、下(bottom)、左(left)四个部分组成，类似于箱子壁；相关CSS属性：border-top上边框，border-right-XXX有边框，

border-bottom-XXX下边框，border-left-XXX左边框，border-width边框厚度，border-style边框样式，border-color边框颜色。

margin 外边距含义：表示边框和相邻盒子的距离，分为上（top）、右（right）、下（bottom）、左（left）四个方向，类似于箱子与箱子之间的距离，具体规则比较复杂，视觉格式化模型详细讲解；相关CSS属性：margin-top，margin-right，margin-bottom，margin-left，margin。

4.盒模型知识补充

子盒子边框盒（border-box）：由border、padding、content组成，元素的背景，默认覆盖边框盒【演示】，可通过background-clip属性修改。

填充盒（padding-box）：由padding、content组成，严格意义上，overflow指代的溢出，是指溢出填充盒【演示】。

内容盒（content-box）：由content组成，默认情况下，width和height属性，是指内容盒的宽度和高度，width和height的设置范围，可通过box-sizing属性修改，box-sizing属性含义：盒子宽高的设置范围。

盒子尺寸的计算：box-sizing:content-box的情况下，box-sizing:border-box的情况下，outline属性外边框，用法和border完全一致。