CSS基础之盒模型

CSS盒模型（margin,boder,padding,content)

1.什么是盒模型

	html元素中的每个元素都被描绘成矩形盒子，也就是盛装内容的容器，
	这些矩形盒子通过一个模型来描述其**占用空间**，这个模型成为**盒模型**。
	
	**盒模型**有外向里分别为：
	marging(外边距)、padding(内边距)、border(边框)、content（内容）。

2. 盒模型—外边距(margin)

	元素与其他元素之间的距离可以使用外边距来设置（margin）。
	margin 属性接受任何长度单位，可以是像素、英寸、毫米、em或%。	
	百分数（%）是相对于父元素的 长度计算的计算的
	
	⚠️注意：外边距可使元素向里紧缩

简写语法为：

• border:10px 10px 20px 20px;
  分别为上、右、下、左。
• border:10px 20px;
  分别表示上下为10px,左右为20px.

单边外边距属性

属性名称	描述
margin-top	设置上外边距
margin-bottom	设置下外边距
margin-left	设置左外边距
margin-right	设置右外边距

3. 盒模型-边框(border）

	语法：
	border:border-width || border-style || border-color

属性名称	介绍
border -width	设置边框宽度，单位以px为主
boder-color	设置边框颜色
border-style	设置边框样式
–	–

注意：border-style边框样式 ，常见样式有：
dashed（虚线）| dotted（点线）| solid（实现）

border-top	设置上边框样式
border-bottom	设置下边框样式
boder-left	设置左边框样式
border-right	设置右边框样式

4. 盒模型–内边距（padding）

元素和边框之间是可以设置距离的，叫内边距（填充）。
padding 属性接受长度值或百分比值，但不允许使用负值。

单内边距属性

属性名称	描述
padding-top	设置上内边距
padding-bottom	设置下内边距
padding-left	设置左内边距
padding-right	设置右内边距