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};