css盒子

总结

一、 页面的制作过程

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

二、 如何划分区域

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

三、 划分区域中的CSS知识

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

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

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

c) 布局：实际应用。

四、 盒模型概述

盒子的分类：

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

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

盒子的组成

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)四个部分组成；类似于箱子壁。