页面制作

##页面制作过程##

页面制作过程前言：

<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：表示边框盒的宽高