盒模型基础知识

1. 页面的制作过程

1. 设计师制作设计图
2. 前端工程师制作页面

①   划分区域

②   填充内容

如何划分区域:

l  用合适的元素来表示不同的区域

l  设置区域的位置、尺寸、背景等样式  CSS

 

划分区域中的CSS知识：

每个元素都会在页面中生成一个矩形区域

CSS称该矩形区域为盒子(box)

盒子的相关知识：

• 盒模型  单个盒子的组成
• 视觉格式化模型  多个盒子的排列（盒子之间的相互作用和影响）
• 布局  实际应用

2.      盒模型概述

盒子的分类

不同的元素产生的盒子类型可能不同

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

盒子的组成：

Margin 外边距：与其他盒子之间的距离

border  边框

padding 内边距：边框与内容之间的距离

content 内容：内容的宽度和高度

1.盒子内容

补充知识：CSS的尺寸单位

在CSS中，有很多属性的取值，需要表示为一个尺寸

一个尺寸，由数值和单位组成

CSS中常见的尺寸单位：

• px 像素，绝对尺寸 计算机屏幕由很多的小点组成，每一个点，就是一个像素。所以其他尺寸单位，在经过浏览器计算后，都会变为px
• em 相对尺寸 相对于当前元素的字体大小(px)
•  %  百分比在不同的CSS属性中，有不同的含义

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

相关CSS属性：

1. width 宽度 默认值：auto 撑满整个可用区域 取值：px，em，%
2. height 高度 默认值：auto适应内容的高度  取值：px，em，%
3. overflow 内容溢出时的处理方式 默认值：visible 溢出部分仍然显示

取值：

• hidden 溢出部分隐藏
• scroll在水平和垂直方向上出现滚动条，若溢出，则滚动条可用，否则不可用
• auto当内容在水平或垂直方向上溢出时，才在该方向上出现滚动条，否则不出现

1. min-width最小宽度 保证width属性的值不小于该属性值 默认值：0px 取值：em，%
2. max-width最大宽度 保证width属性的值不大于该属性值 默认值：none  表示未设置最大宽度，可视为width属性可以无限大 取值：px，em，%
3. min-heigh  最小高度 保证height属性的值不小于该属性值 默认值：0px 取值：em，%
4. max-height  最大高度 保证height属性的值不大于该属性值 默认值：none 表示未设置最大高度，可视为height属性可以无限大  取值：px，em，%

2.内边距：

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

相关CSS属性：

1. padding-top 上内边距 默认值：0px 取值：em, %
2. padding-right右内边距 默认值：0px 取值：em，%
3. padding-bottom  下内边距 默认值：0px 取值：em，%
4. padding-left  左内边距 默认值：0px 取值：em，%
5. padding 速写属性、简写属性

书写格式1. padding:上内边距 右内边距 下内边距 左内边距

2.padding:上内边距 左右内边距 下内边距

3. padding:上下内边距 左右内边距                            

4. padding:上下左右内边距

3.边框：

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

相关CSS属性：

上边框：

边框样式：border-top-style上边框的样式 默认值：none 无边框样式 取值：solid （实线）dashed （虚线）dotted（点阵）double（双实线）

边框厚度：border-top-width 上边框的厚度 默认值：medium 预设值，表示中等边框 取值：px，em

边框颜色：border-top-color上边框的颜色 默认值：currentcolor表示当前元素的字体颜色 取值：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:厚度 样式 颜色

4.外边框

margin 外边距：表示边框和相邻盒子的距离，分为上（top）、右（right）、下（bottom）、左（left）四个方向，类似于箱子与箱子之间的距离。

相关CSS属性：

margin-top上外边距 默认值：0px 取值：em, %

margin-right 右外边距 默认值：0px 取值：em, %

margin-bottom下外边距 默认值：0px  取值：em, %

margin-left 左外边距  默认值：0px  取值：em，%

margin速写属性 书写格式：1. margin:上外边距 右外边距 下外边距 左外边距2. margin:上外边距 左右外边距 下外边距3. margin:上下外边距 左右外边距4. margin:上下左右外边距

浏览器默认样式中的margin -webkit-XXX  -webkit-是浏览器厂商前缀

5.      补充知识

子盒子：

边框盒（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的情况下

outline属性

         外边框，用法和border完全一致