css盒子

总结

一、 页面的制作过程

设计师制作设计图→前端工程师制作页面：1划分区域，2填充内容。

二、 如何划分区域

用合适的元素来表示不同的区域；设置区域的位置、尺寸、背景样式。

三、 划分区域中的CSS知识

1. 每个元素都会在页面中生成一个矩形区域CSS称该矩形区域为盒子。
2. 盒子的相关知识：

a) 盒模型：单个盒子的组成。

b) 视觉格式化模型：多个盒子的排列（盒子之间的相互作用和影响）。

c)   布局：实际应用。

四、 盒模型概述

1. 盒子的分类：

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

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

1. 盒子的组成

a) Margin：外边距（与其他盒子的距离）。

b) Border：边框。

c) Padding：内边距（边框与内容之间的距离）。

d) Content：内容（内容的宽度和高度）。

e) 一个盒子由：margin、border、padding、content组成。

五、 补充知识

1、 CSS的尺寸单位：在CSS中，有很多属性的取值，需要表示为一个尺寸，一个尺寸，由数值和单位组成。

2、 CSS常见的尺寸单位：px、em、%。

Px：像素，绝对尺寸（计算机屏幕有很多的小点组成，每个点，就是一个像素）。

em：相对尺寸（相对于当前元素的字体大小）。

%：百分比（在不同的CSS属性中，有不同的含义）。

所以其他尺寸单位，在经过浏览器计算后。都会变为px。

六、 盒模型

1、 Content 内容：

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

2、 相关CSS属性

Width：含义宽度；不可继承；默认值auto（暂认为撑满整个可用区域）

Height：含义高度；不可继承；默认值auto（暂认为适应内容的高度）；其他取值px、em、%。

Owerflow：含义内容溢出时的处理方法；不可继承；默认值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、%。

3、 Padding内边距、填充区

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

B、 相关CSS属性

padding-top：含义：上内边距；不可继承；默认值：0px；其他取值em、%。

padding-right：含义：右内边距；不可继承；默认值：0px；其他取值em、%。

padding-bottom：含义：下内边距；不可继承；默认值：0px；其他取值em、%。

padding-left：含义：左内边距；不可继承；默认值：0px；其他取值em、%。

Padding：速写属性、简写属性（速写属性不是真实的CSS属性，它只是CSS提供的一种快速的写法）；

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

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

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

padding:上下左右内边距

4、 Border边框

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

相关CSS属性：

  上边框：边框样式：border-top-style

          边框厚度：border-top-width

          边框颜色：border-top-color

          border-top：书写格式：border-top:厚度 样式 颜色

右边框：border-right-XXX

下边框；border-bottom-XXX

左边框：border-left-XXX

border-width：速写属性：同时设置所有边框的厚度

border-style：速写属性：同时设置所有边框的样式

border-color：速写属性：同时设置所有边框的颜色

border：速写属性：同时设置所有边框的厚度、样式、颜色；

书写格式：border:厚度 样式 颜色

5、 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:上外边距 右外边距 下外边距 左外边距

margin:上外边距 左右外边距 下外边距

                             margin:上下外边距 左右外边距

margin:上下左右外边距

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

盒模型知识补充

子盒子：边框盒（border-box）：由border、padding、content组成：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：表示内容盒的宽高；border-box：表示边框盒的宽高

盒子尺寸的计算：box-sizing:content-box的情况下；box-sizing:border-box的情况下；

              outline属性：外边框，用法和border完全一致