##页面制作过程##
页面制作过程前言：
<ul>
<li>页面的制作过程</li>
<li>如何划分区域</li>
<li>划分区域中的CSS知识</li>
</ul>
###页面制作过程###
由设计师设计好设计稿，再由我们前端工程师制作页面：
<br>1.划分页面区域（最重要，且很复杂）
<br>2.填充内容
###如何划分区域###
<ul>
<li>用合适的元素来表示不同的区域(HTML)</li>
<li>设置区域的位置、尺寸、背景等样式(CSS)</li>
</ul>
###划分区域中的CSS知识###
每个元素都会在页面中生成一个矩形区域，CSS称该矩形区域为盒子(box)
盒子相关知识：
<ul>
<li>盒模型：单个盒子的组成</li>
<li>视觉格式化模型：多个盒子的排列（盒子之间的相互作用和影响）</li>
<li>布局：实际应用</li>
</ul>
##盒模型##
###盒模型概述###
####盒子的分类####
不同的元素产生的盒子类型可能不同，一个元素，产生什么样的盒子，取决于它CSS的display属性
<br>display:none=>不生成盒子
<br>display:innline=>行盒
<br>display:block=>块盒
<br>display:其他取值=>其他盒子
####盒子的组成####
<br>margin:外边距
<br>border:边框
<br>padding:内边距
<br>content:内容
<br>注：补充知识：CSS尺寸=>在CSS中，有很多属性的取值，需要表示为一个尺寸,一个尺寸，由数值和单位组成
<br>CSS常见尺寸单位：
<br>1.px：像素，绝对尺寸，计算机屏幕由很多的小点组成，每一个点，就是一个像素（所以其他尺寸单位，在经过浏览器计算后，都会变为px）
<br>2.em：相对尺寸，相对于当前元素的字体大小(px)
<br>3.%：百分比，在不同的CSS属性中，有不同的含义
<br>注2：涉及到的CSS属性=>
<br>width：宽度，不可继承，默认值auto，当内容超过宽度会自动对内容截断换行，英文一个单词为截断，中文一个汉字为截断。
<br>height：高度，不可继承，默认值auto
<br>overflow：内容溢出时的处理方式，不可继承=>
<br>1.hidden：溢出部分隐藏
<br>2.scroll：在水平和垂直方向上出现滚动条，若溢出，则滚动条可用，否则不可用。
<br>3.auto：当内容在水平或垂直方向上溢出时，才在该方向上出现滚动条，否则不出现（默认值）
<br>min/max-width/height：最小/最大宽度/高度，不可继承，默认值0px，保证宽度/高度值不能小于/大于此属性值
##内边距##
###含义###
表示边框到内容之间的距离，分为上（top）、右（right）、下（bottom）、左（left）四个方向
###相关CSS属性###
padding-top:上内边距，不可继承，默认值0px，其他取值em、%
<br>padding-right:右内边距，不可继承，默认值0px，其他取值em、%
<br>padding-bottom:下内边距，不可继承，默认值0px，其他取值em、%
<br>padding-left:左内边距，不可继承，默认值0px，其他取值em、%
<br>padding:速写属性不是真实的CSS属性，它只是CSS提供的一种快速的写法=>
<br>1. padding:上内边距 右内边距 下内边距 左内边距
<br>2. padding:上内边距 左右内边距 下内边距
<br>3. padding:上下内边距 左右内边距
<br>4. padding:上下左右内边距
##边框##
###含义###
分割内部和外部的界限，由上(top)、右(right)、下(bottom)、左(left)四个部分组成
###相关CSS属性###
1.border-top-style:上边框的样式，不可继承，默认值none,其他取值=>
<br>(1)solid:实线
<br>(2)dashed:虚线
<br>(3)dotted:点阵
<br>(4)double:双实线
<br>(5)其他
<br>2.border-top-width:上边框的厚度，不可继承，默认值medium,其他取值=>
<br>(1)medium:中等
<br>(2)thin:细
<br>(3)thick:粗
<br>(4)px
<br>(5)em
<br>3.border-top-color:上边框的颜色，不可继承，默认值currentcolor,其他取值=>
<br>(1)black:黑色
<br>(2)white:白色
<br>(3)gray:灰色
<br>(4)其他颜色
<br>(5)rgb:用红绿蓝三种基本颜色调配而成，每种颜色的取值是十进制的数字：0-255，书写格式：rgb(红,绿,蓝)
<br>(6)HEX:用红绿蓝三种基本颜色调配而成，每种颜色的取值是十六进制的数字00-ff，书写格式：#红绿蓝，#号后必须是6个或3个数值
<br>1.border-top:速写属性，书写格式：border-top:厚度 样式 颜色
<br>2.右边框:border-right-XXX(同上)
<br>3.下边框:border-bottom-XXX(同上)
<br>4.左边框:border-left-XXX(同上)
<br>5.border-width:速写属性：同时设置所有边框的厚度
<br>6.border-style:速写属性：同时设置所有边框的样式
<br>7.border-color:速写属性：同时设置所有边框的颜色
<br>8.border:速写属性：同时设置所有边框的厚度、样式、颜色，书写格式：border:厚度 样式 颜色
##外边距##
###含义###
类似于箱子与箱子之间的距离，具体规则比较复杂，视觉格式化模型详细讲解
###相关CSS属性###
1.margin-top:上外边距，不可继承，默认值0px，其他取值=>em、%
<br>2.margin-right:右外边距，不可继承，默认值0px，其他取值=>em、%
<br>3.margin-bottom:下外边距，不可继承，默认值0px，其他取值=>em、%
<br>4.margin-left:左外边距，不可继承，默认值0px，其他取值=>em、%
<br>5.margin：速写属性，书写格式=>
<br>(1)margin:上外边距 右外边距 下外边距 左外边距
<br>(2)margin:上外边距 左右外边距 下外边距
<br>(3)margin:上下外边距 左右外边距
<br>(4)margin:上下左右外边距
<br>6.浏览器默认样式中的margin：-webkit-XXX,-webkit-是浏览器厂商前缀
##补充知识##
###子盒子###
1.边框盒（border-box）：由border、padding、content组成，浏览器调试时，页面中显示的元素尺寸是指边框盒的尺寸，元素的背景，默认覆盖边框盒，可通过background-clip属性修改=>
<br>(1)背景覆盖范围，不可继承，默认值：border-box
<br>(2)取值：
<br>border-box：背景覆盖边框盒
<br>padding-box：背景覆盖填充盒
<br>content-box：背景覆盖内容盒
<br>2.填充盒（padding-box）：由padding、content组成，严格意义上，overflow指代的溢出，是指溢出填充盒
<br>3.内容盒（content-box）：由content组成，默认情况下，width和height属性，是指内容盒的宽度和高度，width和height的设置范围，可通过box-sizing属性修改，box-sizing属性=>
<br>(1)背景覆盖范围，不可继承，默认值：content-box
<br>(2)取值：
<br>content-box：表示内容盒的宽高
<br>border-box：表示边框盒的宽高
