盒子模型基础

概括：

盒子模型一共有四个元素：content内容/padding内边距（内边距会把盒子撑大慎用）/border边框/margin外边距。

一、内容

1.创建一个元素标签（div，p等）加入类选择器定义样式

2.在head标签中加入style标签，在style标签中定义样式

3.用width、height属性设置盒子宽高

二、内边距、外边距

用left、right，bottom，top，center定义方位布局

复合写法（外边距也适用）：

padding：10px 20px    10px定义上下内边距   20px定义左右内边距

padding： 10px 20px 30px    10px定义上内边距  20px定义左右内边距  30px 定义下内边距

padding：10px 20px 30px 40px 分别定义上、左、右、下  顺时针内边距 

三、边框

一般采用复合写法，加入像素、线条、颜色等属性

1.线条一般有三种：实线：soil   虚线：dashed  点线：dotted

用left，right，bottom，top，center定义边框属性

四、例子

设置一个盒子模型长200像素宽300像素的盒子，要求背景颜色粉色，上边框黄色，下边框为绿色。内边距10px，外边距10px

运行结果