盒子模型（CSS）-微信小程序

盒子模型：

盒子的组成：
margin，border，padding都是CSS的属性，而content是HTML元素的内容

• margin(外边距,透明的）：
• border(边框）：
• padding(内边距）：
• content(内容）：

盒子的大小：

• 默认情况下：
  宽度=内容宽度（width）+左、右填充（padding）+左、右边框（border）+左、右边距（margin）
  高度=内容高度（height）+上、下填充（padding）+上、下边框（border）+上、下边距（margin）
  注：默认情况下，width和height表示的是内容的宽度和高度

• 另外一种情况下，width和height属性设置的就是盒子的宽度和高度。

• 盒子的宽度和高度的计算方式由box-sizing属性控制
  box-sizing

• 默认值：content-box:在宽度和高度之外绘制元素的内边距、边框、外边距

• border-box:为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去 边框 和 内边距 才能得到内容的宽度和高度。

• inherit:规定应从父元素继承box-sizing属性的值。

当box-sizing：content-box时，这种盒子模型成为标准盒子模型，当box-sizing: border-box时，这种盒子模型称为IE盒子模型

盒子成分分析

margin

盒子的外边框，他是完全透明的，开发者只可以设置它的边距
margin包含了上下左右四条边，开发者可以单独设置每一条边的边距。

• margin-top：上边距
• margin-buttom：下边距
• margin-left：左边距
• margin-right：右边距

开发者也可以直接使用简写属性margin同时设置四条边的宽度。

margin:1px;

等价于

margin-top:1px;
margin-bottom:1rpx;
margin-left:1rpx;
margin-right:1rpx;

margin:1px  2px ;

等价于

margin-top:1px;
margin-bottom:1rpx;
margin-left:2rpx;
margin-right:2rpx;

margin:1rpx 2rpx 3rpx;

等价于

margin-top:1rpx;
margin-left:2rpx;
margin-right:2rpx;
margin-bottom:3rpx;

padding

表示盒子的内边距（填充）,与外边距不同，padding不是只能完全透明的，可以设置背景图片和颜色
与margin类似，padding包含了山下左右四条边，开发者可以单独设置每一条边。

• padding-top:上部填充
• padding-bottom：下部填充
• padding-left:左部填充
• padding-right：右部填充

border
表示盒子的边界，可以设置为可见的，样式多样
最基本的，border像margin和padding一样可以分别对每一条边进行设置，也可以使用简写属性border进行设置，

• border-top：上边界
• border-bottom:下边界
• border-left:左边界
• border-right:右边界

当border属性的色值不明确指定时，如border: 1px solid，边框颜色与当前元素的字体颜色color相同。

border: 2rpx solid green;

等价于

border-top:2rpx solid green;
border-bottom:2rpx solid green;
border-left:2rpx solid green;
border-right:2rpx solid green;

设置边界的宽度、样式和颜色：
可以一起设置所有边的宽度、样式和颜色：

• border-width:边界宽度
• border-style:边界的样式
• border-color:边界的颜色

也可以分别设置各个边的宽度、样式和颜色：
例如：

• border-top-width:上边界宽度
• border-top-style:上边界的样式
• border-top-color:上边界的颜色

border-style常用属性值：

• none:无边框
• hidden:与none一样
• dotted:点状边框
• dashed:虚线
• solid:实线
• double:双线

border:1rpx solid green;

等价于

border-width:1rpx;
border-style:solid;
border-color:green;

圆角

圆角由属性border-radius控制:

和margin、padding一样，是一个简写属性：

• border-top-left-radius: 左上角
• border-top-right-radius: 右上角
• border-bottom-left-radius：左下角
• border-bottom-right-radius: 右下角

(1)

border-radius:10rpx 

等价于

border-top-left:10rpx;
border-top-right:10rpx;
border-bottom-left:10rpx;
border-bottom-right:10rpx;

(2)

border-radius:10rpx 20rpx;

等价于

border-top-left:10rpx;
border-bottom-right:10rpx;
border-top-right:20rpx;
border-bottom-left:20rpx;

(3)

border-radius:1rpx 2rpx 3rpx ;

等价于

border-top-left:1rpx;
border-bottom-left:2rpx;
border-top-right:2rpx;
border-bottom-right:3rpx;