css 深入进阶之定位和浮动三栏布局

---【查看元素的兼容浏览器情况】 https://www.caniuse.com/

--=根元素（html）也称为初始包含块，在大多数浏览器中根元素是一个视窗大小的矩形

--=top/left/right/bottom / width/ heihgt 默认值都为auto

--=margin/padding 默认值为0

---【百分比参照谁】：=子元素宽高参照父元素的宽高 ，子元素margin的百分比参照父元素的宽度/子元素padding的百分比参照父元素的宽度

---【浮动】： 图片浮动后，文字会环绕图片

　=当一个元素浮动了要考虑元素的层级分为两层 （一层为文字，一层为盒子模型）/-上边的浮动，下边的会进去，但文字会在外边

---【三列布局之定位实现】：

　　=上中下结构 上下相对定位 中间padding为宽度： 中间指定最小宽度，200*3=600

---【三列布局之浮动实现】：

--左右中结构 左右分别左浮动，右浮动 ，OK完成 中间内容自动适应了

---【圣杯布局】：

---content>middle-left-right

　　 left,right=float,left

　　 middle=width:100%; float:left

　　 left=margin-left:-100%; right=margin-left=-2oopx;

　　　content=padding:0 200px

　　　left,right={posittion,relative;left-200,right:-200}

--【FQ工具】 赛风 PSIPHON

--【双飞翼布局】“

　　 left,right=float,left

　　 middle=width:100%; float:left

　　 left=margin-left:-100%; right=margin-left=-2oopx 以上和圣杯布局一样

　　　在middle中加入一个.mymiddle容器 .mymiddle{padding:0 200px};