页面的制作过程与盒模型

 

一、页面的制作过程

（一）页面的制作过程

1. 页面制作过程是又ui设计师交付设计稿给前端工程师制作网页
2. 前端工程师制作页面首先要划分区域（最重要），其次则为填充内容（最复杂）

（二）如何划分区域

1. 用合适的元素表示不同的区域（html）
2. 设置区域的位置、尺寸、背景等样式（css）

（三）划分区域中的css知识

1. 没个元素都会在页面中生成一个矩形区域
2. Css称该矩形区域为盒子（box）
3. 盒子的相关知识
4. 盒模型：单个盒子的组成
5. 视觉格式化的模型：多个盒子的排列（盒子之间的相互作用和影响）
6. 布局：实际应用

二、盒模型概述

（一）盒子的组成

1. 外边距（margin）：与其他盒子之间的距离
2. 边框（border）
3. 内边距（padding）边框与内容之间的距离
4. 内容（content）内容的宽度和高度

（二）盒模型的概述

1. 盒子的分类：一个元素，产生什么样的盒子，取决于它css的display属性
2. 盒子的组成：一个盒子由：margin、border、padding、content组成

三、盒子内容

css的尺寸单位

1. 在css中，有很多的属性的取值，需要表示一个尺寸；一个尺寸，由数值和单位组成。
2. Css中常见的尺寸单位：px，em，%
3. Px 像素，绝对尺寸。计算机屏幕由很多的小点组成，每一个点，就是一个像素，所以其他尺寸单位，在经过浏览器计算后，都会变为px。
4. em 相对尺寸。相对于当前元素的字体大小（px）
5. % 百分比 在不同的css属性中，有不同的含义

四、Content内容

（一）含义

用于存放文本或其他元素的区域，类似于一个箱子中存放东西的空间

（二）相关css属性

1. Width：宽度，不可继承，默认值（auto）暂认为撑满整个可用区域，其他取值像素、绝对长度、固定长度：px，所有其他单位都会倍计算为像素；相关长度em，相对于应用样式的元素的字体大小；百分比%，目前不用管。断词：当内容超过宽度时，会自动对内容进行截断换行；如何截断？：按照断词规则截断；断词规则可修改；默认断词规则在单词之间进行截断；英文：被空格隔开的即为单词；中文：每个汉字均视为单词
2. Height：高度，不可继承，默认值：auto，暂认为适应内容的高度，其他取值：px、em、%
3. Overflow：内容溢出时的处理方式，不可继承，默认值（visible）溢出部分依然显示；其他取值：hidden溢出部分隐藏，scroll在水平和垂直方向上出现滚动条，若溢出，则滚动条可用，否则不可用，auto当内容在水平或垂直方向上溢出时，才在该方向上出现滚动条，否则不出现
4. Min-width：最小宽度，保证width属性的值不小于该属性值，不可继承，默认值0px，其他取值em、%。
5. Max-width：最大宽度，保证width属性的值不大于该属性值，不可继承，默认值（none）表示未设置最大宽度，可视为width属性可以无限大，其他取值：px，em，%
6. Min-height：最小高度，保证height属性的值不小于该属性值，不可继承，默认值0px，其他取值em，%。
7. max-height：最大高度，保证height属性的值不大于该属性值，不可继承，默认值（none）表示未设置最大高度，可视为height属性可以无限大，其他取值px，em，%

 

五、Padding内边距。填充区

（一）含义

1. 表示边框到内容之间的距离，分为上（top）、右（right）、下（bottom）、左（left）四个方向。
2. 类似于箱子和内部空间之间的填充物

（二）相关css属性

1. padding-top：上内边距，不可继承，默认值（0px），其他取值em、%
2. padding-right：右内边距，不可继承，默认值（0px），其他取值em，%
3. padding-bottom：下内边距，不可继承，默认值（0px），其他取值em，%
4. padding-left：左内边距，不可继承，默认值（0px），其他取值em，%
5. Padding：速写属性、简写属性，速写属性不是真实的CSS属性，它只是CSS提供的一种快速的写法，
6. Padding书写格式：
7. padding:上内边距 右内边距 下内边距 左内边距
8. padding:上内边距 左右内边距 下内边距
9. padding:上下内边距 左右内边距
10. padding:上下左右内边距

六、Border边框

（一）含义

 

分割内部和外部的界限，由上(top)、右(right)、下(bottom)、左(left)四个部分组成类似于箱子壁

（二）相关css属性

1. 上边框：边框样式（border-top-style），含义为上边框样式，不可继承，默认值（none），无边框模式，其他取值：实线（solid），虚线（dashed），点阵（dotted），双实线（double），其他
2. 边框厚度（border-top-width）：含义为上边框厚度，不可继承，默认值（medium），预设值，表示中等边框；其他取值：预设值中等（medium），细（thin），粗（thick）；数值：px、em
3. 边框颜色（border-top-color）：含义为上边框颜色，不可继承，默认值（currentcolor），表示当前元素的字体颜色；预设值：黑色（black），白色（whine），灰色（gray），其他，rgb用红绿蓝三种基本颜色调配而成，每种颜色的取值是十进制的数字：0-255

书写格式：rgb(红,绿,蓝)HEX，用红绿蓝三种基本颜色调配而成， 每种颜色的取值是十六进制的数字00-ff，书写格式：#红绿蓝，# 号后必须是6个或3个数值

1. border-to，速写属性，书写格式，border-top:厚度 样式 颜色
2. 右边框：border-right-xxx
3. 下边框：border-bottom-xxx
4. 左边框：border-left-xxx
5. border-width：书写属性：同事设置所有边框的厚度
6. border-style：速写属性：同事设置所有边框的样式
7. border-color：速写属性：同事设置所有边框的颜色
8. Border：速写属性：同事设置所有边框的厚度、样式、颜色；书写格式：border厚度、样式、颜色。

七、外边距

（一）含义

1．表示边框和相邻盒子的距离，分为上（top）、右（right）、下（bottom）、左（left）四个方向

2．类似于箱子与箱子之间的距离

3．具体规则比较复杂，视觉格式化模型详细讲解

（二）相关css属性

1. margin-top，含义：上外边距，不可继承，默认值：0px 其他取值em %
2. margin-right，含义：右外边距，不可继承，默认值：0px，其他取值，Em  %
3. margin-bottom，含义：下外边距，不可继承，默认值：0px，其他取值，Em  %
4. margin-left，含义：左外边距，不可继承，默认值：0px，其他取值，Em  %
5. Margin，速写格式，书写格式为：
6. margin:上外边距 右外边距 下外边距 左外边距
7. margin:上外边距 左右外边距 下外边距
8. margin:上下外边距 左右外边距
9. margin:上下左右外边距

八、盒子知识补充内容

（一）子盒子

1. 边框盒（border-box）：由border、padding、content组成，浏览器调试时，页面中显示的元素尺寸是指边框盒的尺寸，元素的背景，默认覆盖边框盒，可通过background-clip属性修改，background-clip属性：含义：背景覆盖范围，不可继承，默认值：border-box，取值：border-box：背景覆盖边框盒，padding-box：背景覆盖填充盒，content-box：背景覆盖内容盒
2. 填充盒（padding-box）：由padding、content组成，严格意义上，overflow指代的溢出，是指溢出填充盒
3. 内容盒（content-box）：由content组成，默认情况下，width和height属性，是指内容盒的宽度和高度，width和height的设置范围，可通过box-sizing属性修，box-sizing属性，含义：盒子宽高的设置范围，不可继承，默认值：content-box，取值：content-box：表示内容盒的宽高，border-box：表示边框盒的宽高。