1.01.21盒子模型，浮动，定位

1.01.21盒子模型，浮动，定位

1.盒子模型

1. 标准文档流

• 网页在排版布局时,遵循的从上到下，从左到右的顺序
• 正常的元素是会占据页面的空间大小的
• 脱离文档流：不再遵循从上往下，从左往右的顺序（元素不再占据页面空间）
  • 脱离文档流的元素可以直接设置宽高（不管他本身是什么元素类型）

2. 盒子模型概念

• 网页中的元素可以看成一个一个的盒子
• 盒子模型是由：
  • 外边距margin
  • 边框border
  • 内边距padding
  • 内容connent
• 给盒子定义宽高只是给他内容定义宽高，而盒子的整体大小得加上内边距与边框的尺寸，所以盒子可以由内边距和边框撑大

3. 盒子调整

1. 外边距：

   • 属性margin-方向：
     • margin-left:5px 左外边距
     • margin-right:5px 右外边距
     • margin-top:5px 顶部外边距
     • margin-bottom:5px 底部外边距
   • 属性margin:(不带方向)：
     • margin：5px 上下左右
     • margin:5px 6px 上下 左右
     • margin:5px 6px 7px 上 左右 下
     • margin：5px 6px 7px 8px 上 右 下 左
     • margin: 0 auto 上下0 左右自动 （可以让元素左右居中）

2. 内边距

   • 属性padding-方向：
     • padding-left:5px 左内边距
     • padding-right:5px 右内边距
     • padding-top:5px 顶部内边距
     • padding-bottom:5px 底部内边距
   • 属性padding:(不带方向)：
     • padding：5px 上下左右
     • padding:5px 6px 上下 左右
     • padding:5px 6px 7px 上 左右 下
     • padding：5px 6px 7px 8px 上 右 下 左

3. 边框

   • 属性border-style

     • none值：无边框（默认值）
     • solid值：实线
     • dashed值：虚线边框
     • dotted值：点状线边框
     • do