H5全栈_布局

页面布局

浮动布局（脱离文档流）

宽度不在占据整个屏幕，需要手动添加宽度
1、宽度如果没有手动指定那么就由内容决定
2、多个浮动元素在一个浮动流中并排显示，如果一排放不下就会自动换行
3、浮动元素失去了对父元素的支撑

元素

float： 可以使块元素脱离当前的文档流
 left
 right
 none
clear 清理左/右/左右两边的浮动元素，一般使用这个特性强制子元素换行，达到支撑父元素的目的
 left
 right
 both
overflow： 当内容溢出元素框时发生的事情
 -x (可在x轴生成滚动条）
 -y 对内容的上/下边缘进行裁剪
  visible  默认值。内容不会被修剪，会呈现在元素框之外。
  hidden  内容会被修剪，并且被修剪内容隐藏。
  scroll  内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
  auto   如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
当子元素的宽/高固定，子元素的宽/高超过了父元素就可以使用这个特性
display： 规定元素应该生成的框的类型
 block
 inline
 inline-block 行内块：可以与其他行内元素共享一行空间；可以指定宽高
 等
方法：
一行多列：
全部浮动 {float；left}
一行两列：
方法一：两列都浮动
方法二：第一个浮动，第二个不浮动，添加margin-left

定位布局

使某个元素悬挂在其他元素之上

使用

position
 非定位:
  static 静态(默认)非定位元素
 定位元素：
  relative
   相对定位 参照点：原先所在的位置
   特性：没脱离文档流(宽度默认为100%;原来在文档流的位置不会被抢占),但可以覆