div盒子模型

admin

我们说div就是一个块，它就是一个盒子。其实我们做网页的过程就是摆放盒子的过程
盒子模型特性：
4个组成部分：宽高、内间距、边框、外间距

1.内边距padding

示意图

注意：

• 添加了padding属性的元素，会加大盒子的宽或高，需要减去padding的大小
• 如果这个块级盒子没有width属性（从父级继承宽度）的时候，添加padding和border不会撑大盒子（盒子内容部分会自动压缩）
  
  

2.外边距margin

示意图

多学一招：margin:0 auto;可以让盒子在其父元素中居中

margin:0 auto;和text-align:center;的区别

margin:0 auto；

text-align:center;

针对的对象盒子---块元素(标签本身)标签内部的行元素
居中的范围在父盒子中居中自己内部
3.边框属性

边框有3要素：边框类型、边框颜色、边框厚度

a) 边框类型

语法：border-style:值

取值：

        （1）solid实线

        （2）dashed虚线

        （3）dotted点线

        （4）double双线