前端CSS学习笔记之CSS盒模型

前端CSS学习笔记之CSS盒模型

1、盒子属性(Box properties)

盒子一般指的是块元素，盒子是我们布局的重要机制。一个盒子应该由外边距、边框、内边距、内容组成。

margin

​ 外边距 代表盒子四周的区域。相邻元素的边距会合并（margin collapsing）

border

​ 设定介于padding的外边缘与margin的内边缘之间，默认值为0

padding

​ 内间距 在任何定义的边界内的元素内容周围生成空间

width & height

​ width

​ 内容宽度，块级元素默认 100%，单位可以：px em %

​ height

​ 内容高度，默认 0 ，由子元素填充，单位可以： px em %

2、边框属性

边框属性的格式：

​ 边框宽度：
​ border-width: 5px;

​ 边框样式：
​ border-style: solid;
​ 边框样式取值：
​ none 定义无边框。
​ hidden 与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
​ dotted 定义点状边框。在大多数浏览器中呈现为实线。
​ dashed 定义虚线。在大多数浏览器中呈现为实线。
​ solid 定义实线。
​ double 定义双线。双线的宽度等于 border-width 的值。

​ 边框颜色：

​ border-color:red;

3、外边距属性

​ 标签和标签之间的距离就是外边距

格式：

​ margin-top:；

​ margin-right:;

​ margin-bottom:;

​ margin-left:;

外边距合并现象：

​ 在默认的(标准流)布局的垂直方向上，默认情况下外边距是不会叠加的，会出现合并现象，谁的外边距大就听谁的

​ 在水平方向上的外边距会叠加

4、内边距属性

​ 边框和内容之间的距离就是内边距

格式：

​ padding-top：；

​ padding-right：；

​ padding-bottom：；

​ padding-left：；

​ 注意点：

​ 1、给标签设置内边距之后，标签占有的宽度和高度也会发生变化

​ 2、给标签设置内边距之后，内边距也会有背景颜色

2、CSS盒模型

1、内容盒子(W3C盒子)

使用box-sizing属性可以改变盒子模型，取值“content-box”的盒子为默认盒子模型。

W3C盒子

内容区的宽

​ width

内容区的高

​ height

盒子的宽

​ width+paddingLeft+paddingRight+borderLeft+borderRight

盒子的高

​ height+paddingTop+paddingBottom+borderTop+borderBottom

所占屏幕空间的宽

​ width+paddingLeft+paddingRight+borderLeft+borderRight +marginLeft+marginRight

所占屏幕空间的高

​ height+paddingTop+paddingBottom+borderTop+borderBottom+marginTop+marginBottom

2、边框盒子(IE盒子模型)

​ IE盒子使用box-sizing属性可以改变盒子模型，取值“border-box”的盒子为边框盒子模型。

IE盒子

内容区的宽

​ width-paddingLeft-paddingRight-borderLeft-borderRight

内容区的高

​ height-paddingTop-paddingBottom-borderTop-borderBottom

盒子的宽

​ width

盒子的高

​ height

所占屏幕空间的宽

​ width+marginLeft+marginRight

所占屏幕空间的高

​ height+marginTop+marginBottom

3、盒子背景样式

1、background-color 背景颜色

​ 专门用来设置标签的背景颜色的

​ 取值：

​ 具体单词

​ rgb

​ rgba

​ 十六进制

2、background-image 背景图片

​ 专门用来设置背景图片的

​ 注意点：

​ 1、图片的地址必须放在url()中，图片的地址可以是本地地址，也可以是网络地址

​ 2、如果图片的大小没有标签的大小大，那么会自动在水平和垂直方向上平铺来填充

​ 3、如果网页上出现了图片，那么浏览器会再次发送请求获取图片

3、background-repeat 背景平铺属性

​ 专门用于控制图片的平铺方式

​ 取值：

​ repeat 默认，在水平方向和垂直方向都需要平铺

​ no-repeat 在水平和垂直方向上不需要平铺

​ repeat-x 只在水平方向平铺

​ repeat-y 只在垂直方向平铺

4、background-position 背景定位属性

​ 专门用于控制背景图片的位置

​ 格式：

​ background-position：水平方向 垂直方向；

​ 取值：

​ 具体的方位名词
​ 水平方向: left center right
​ 垂直方向: top center bottom

​ 注意点：

​ 同一个标签可以同时设置背景图片和背景颜色和背景图片，如果颜色和图片同时存在，那么图片会盖掉颜色。
​ 专门用于控制背景图片的位置

​ 格式：

​ background-position：水平方向 垂直方向；

​ 取值：

​ 具体的方位名词
​ 水平方向: left center right
​ 垂直方向: top center bottom

​ 注意点：

​ 同一个标签可以同时设置背景图片和背景颜色和背景图片，如果颜色和图片同时存在，那么图片会盖掉颜色。