布局以及float

1.盒子模型

• Margin(外边距) - 清除边框外的区域，外边距是透明的。
• Border(边框) - 围绕在内边距和内容外的边框。
• Padding(内边距) - 清除内容周围的区域，内边距是透明的。
• Content(内容) - 盒子的内容，显示文本和图像。

应用：

• margin 0 auto可以实现水平居中效果注意该元素要未脱离文档流
• 溢出：若子元素的大小超过父元素的大小则会溢出
• 在进行竖直布局中可以在父元素中设置overflow来解决溢出效果
  • overflow的特殊值：
    (1)visible：（默认值）让子元素溢出，不做处理
    (2)hidde ：将溢出的部分进行裁剪，不显示
    (3)scroll ：生成两个滚动条
    (4)auto ：根据需要生成滚动条
• display(用来设置元素的显示类型)可选择值：
  (1)inline:：将元素设置为行内元素
  (2)block：将元素设置为块元素
  (3)inline-block：将元素设置为行内块元素（既能设置高度也能设置宽度）但不推荐使用
  (4)table：将元素设置为一个表格
  (5)none：使元素不在页面中显示
• 行内元素不支持设置宽度和高度
• visibility(用来设置元素的显示状态)可选值：
  (1)visible：默认值，是元素在页面中正常显示
  (2)hidden：元素在页面中隐藏不显示 ，但是依然占据页面的位置

float的用法和注意事项

• 可选值：
  (1)none：元素不浮动
  (2)left：元素向右浮动
  (3)right：元素向左浮动
• 注意事项及特点：
  (1)使用float后该元素脱离文档流，不在占用文档流的位置。而所以元素下面的还在文档流的元素 向上移动
  (2)设置浮动后元素回向父元素左移或右移
  (3)对于设置浮动的元素，它并不会遮盖住文字。文字会自动环绕其周围。因此，可以利用这个特点设置文字环绕图片的效果
  (4)脱离文档流后，则元素将不再区分块元素和行内元素

、