CSS盒模型基础概念

CSS盒模型

以下是我整理的一些内容

盒模型是HTML+CSS中最核心的基础知识。它规定了网页元素如何显示以及元素间相互关系。Css定义所有的元素都可以拥有像盒子一样的外形和平面空间。

CSS盒模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。

它是由什么组成的呢

content(内容区)：盒子里的内容

padding(填充区)：盒子与内容之间的距离

border(边框区)：盒子的厚度

margin(外边距区)：盒子与盒子之间的距离

一般来说标准盒模型实际所占用空间为：

水平位置=width+左右padding+左右border+左右margin
垂直位置=height+左右padding+左右border+左右margin

一个盒子实际所占用空间：

水平位置=width+左右padding+左右border
垂直位置=height+左右padding+左右border

怪异盒模型实际所占用空间为：

水平位置=width（content+border+padding）+margin
垂直位置=height（content+border+padding）+margin

怪异盒模型：

box-sizing：border-box（怪异盒模型）

标准盒模型：

box-sizing：centent-box（标准盒模型）

我们来详细说padding、margin和border：

1、Padding：

作用：用来控制（父元素和子元素、元素和内容）之间的位置关系。

特点：1：padding会把盒子原有的大小撑大，如果想要保持原有大小，则需要在宽高基础上减掉。如果被内容撑开，没有设置固定宽高，padding直接撑开，不用减掉。

  2：paddingpadding不会对背景图的位置造成影响，背景色会延展到padding区域。

Padding的使用方法：

1：

2：

2、Margin：

作用：控制同辈元素之间的位置关系。

特点：margin是实现在元素边框外围，不会撑大元素的大小

Margin的使用方法：

1：

2：

实现元素水平居中的方法：

margin: 0 auto;

margin-left:auto;

margin-right:auto;

在盒子里margin可以写负值，
Padding不可以写负值。

3、Border：

就是边框，

边框三个基本：粗细、线型、颜色。

Border的使用方法：

border-width:; 边框宽度

border-style:; 边框线型

线型类型：

none（取消边框）、solid（实线）、dashed（虚线）、dotted（点线）、double（双边线）

border-color:; 边框颜色

注：边框的大小是会添加在元素原有大小之外的，会改变元素原本的大小，也就是说边框是占位置的。（在标准盒模型情况下）

在加入padding值后盒子就会被撑大，

如果我们设置了宽高，则需要在盒子宽高原有的值下减去padding的值。

Padding：10px 20px 30px 40px；

          上   右   下   左

Width要减掉20px和40px，Height要减去 10px和30px

才是盒子原本的大小。

而margin则是增大了盒子外围的大小，不撑开盒子大小。