- 页面的制作过程
1页面的制作过程
1设计师制作设计图 划分区域 最重要 最复杂
2前端工程师制作页面 填充内容
2如何划分区域
用合适的元素来表示不同的区域 已学习 HTML
设置区域的位置、尺寸、背景等样式 CSS
3划分区域中的CSS知识
每个元素都会在页面中生成一个矩形区域
CSS称该矩形区域为盒子(box)
2.盒模型概述
1盒子的分类
不同的元素产生的盒子类型可能不同
一个元素，产生什么样的盒子，取决于它CSS的display属性
2盒子的组成
一个盒子由：margin、border、padding、content组成
3.CSS的尺寸单位
在CSS中，有很多属性的取值，需要表示为一个尺寸，一个尺寸，由数值和单位组成。
4.盒模型
content 内容
含义 用于存放文本或其他元素的区域，类似于一个箱子中存放东西的空间
相关CSS属性
Overflow 含义：内容溢出时的处理方式
不可继承
默认值：visible
溢出部分仍然显示
其他取值
hidden溢出部分隐藏
scroll在水平和垂直方向上出现滚动条，若溢出，则滚动条可用，否则不可用
auto当内容在水平或垂直方向上溢出时，才在该方向上出现滚动条，否则不出现
min-width 含义：最小宽度保证width属性的值不小于该属性值
不可继承 默认值：0px 其他取值em %
max-width含义：最大宽度，保证width属性的值不大于该属性值
不可继承 默认值：none 表示未设置最大宽度，可视为width属性可以无限大
其他取值 px em %
min-height含义：最小高度 保证height属性的值不小于该属性值
不可继承 默认值：0px 其他取值em %
max-height含义：最大高度 保证height属性的值不大于该属性值
不可继承默认值：none 表示未设置最大高度，可视为height属性可以无限大
其他取值px em %
padding 内边距、填充区
含义:表示边框到内容之间的距离，分为上（top）、右（right）、下（bottom）、左（left）四个方向.类似于箱子和内部空间之间的填充物
相关CSS属性
padding-top 含义：上内边距 不可继承 默认值：0px 其他取值em %
padding-right含义：右内边距 不可继承 默认值：0px 其他取值em %
padding-bottom 含义：下内边距 不可继承 默认值：0px 其他取值em %
padding-left 含义：左内边距 不可继承 默认值：0px 其他取值em %
Padding 速写属性、简写属性 速写属性不是真实的CSS属性，它只是CSS提供的一种快速的写法
书写格式
- padding:上内边距 右内边距 下内边距 左内边距
- padding:上内边距 左右内边距 下内边距
- padding:上下内边距 左右内边距
- padding:上下左右内边距
border 边框
含义:分割内部和外部的界限，由上(top)、右(right)、下(bottom)、左(left)四个部分组成类似于箱子壁
相关CSS属性
上边框
边框样式：border-top-style
含义：上边框的样式 不可继承 默认值：none 无边框样式 其他取值 solid （实线） dashed （虚线）dotted（点阵） double（双实线）
边框厚度：border-top-width
含义：上边框的厚度 不可继承默认值：medium 预设值，表示中等边框 其他取值 预设值 medium（中等）thin（细） thick（粗）数值px em
边框颜色：border-top-color
含义：上边框的颜色 不可继承 默认值：currentcolor表示当前元素的字体颜色
其他取值 预设值black（黑色）white（白色）gray（灰色）rgb 用红绿蓝三种基本颜色调配而成，每种颜色的取值是十进制的数字：0-255 书写格式：rgb(红,绿,蓝)HEX用红绿蓝三种基本颜色调配而成，每种颜色的取值是十六进制的数字00-ff书写格式：#红绿蓝，#号后必须是6个或3个数值
border-top速写属性 书写格式 border-top:厚度 样式 颜色
右边框 border-right-XXX
下边框 border-bottom-XXX
左边框 border-left-XXX
border-width 速写属性：同时设置所有边框的厚度
border-style 速写属性：同时设置所有边框的样式
border-color 速写属性：同时设置所有边框的颜色
border速写属性：同时设置所有边框的厚度、样式、颜色 书写格式 border:厚度 样式 颜色
margin 外边距
含义 表示边框和相邻盒子的距离，分为上（top）、右（right）、下（bottom）、左（left）四个方向 类似于箱子与箱子之间的距离
相关CSS属性
margin-top 含义：上外边距 不可继承 默认值：0px 其他取值em %
margin-right含义：右外边距 不可继承 默认值：0px 其他取值em %
margin-bottom 含义：下外边距 不可继承 默认值：0px 其他取值em %
margin-left 含义：左外边距 不可继承 默认值：0px 其他取值em %
margin 速写属性、简写属性 速写属性不是真实的CSS属性，它只是CSS提供的一种快速的写法
书写格式
margin:上外边距 右外边距 下外边距 左外边距
margin:上外边距 左右外边距 下外边距
margin:上下外边距 左右外边距
margin:上下左右外边距
浏览器默认样式中的margin -webkit-XXX -webkit-是浏览器厂商前缀
盒模型知识补充
子盒子
边框盒（border-box）：由border、padding、content组成 浏览器调试时，页面中显示的元素尺寸是指边框盒的尺寸【演示】元素的背景，默认覆盖边框盒【演示】，可通过background-clip属性修改 background-clip属性 含义：背景覆盖范围 不可继承 默认值：border-box 取值 border-box：背景覆盖边框盒 padding-box：背景覆盖填充盒 content-box：背景覆盖内容盒
填充盒（padding-box）：由padding、content组成 严格意义上，overflow指代的溢出，是指溢出填充盒【演示】
内容盒（content-box）：由content组成 默认情况下，width和height属性，是指内容盒的宽度和高度
width和height的设置范围，可通过box-sizing属性修改
box-sizing属性 含义：盒子宽高的设置范围 不可继承 默认值：content-box 取值 content-box：表示内容盒的宽高 border-box：表示边框盒的宽高【演示】
盒子尺寸的计算
box-sizing:content-box的情况下 box-sizing:border-box的情况下 外边框，用法和border完全一致