css学习笔记 布局方案整理

两栏 右边自适应布局

左浮动 + 右新建bfc

右左排列，右浮动 + 左（浮动 + margin-x:-100%）

<div> <!--float:left;width:100%-->
  <div></div><!--margin-left:下面浮动框的宽度-->
</div>
<div class="left"></div> <!--float:left; margin-left:100%-->
<!--浮动是让容器尽量向一个方向浮动直到它的外边缘碰到包含框或另一个浮动框的边框为止，当left框-->

左浮动 + 右（浮动 + width: cal(100vw-左边box宽度)

• 运算符前后要有空格
• 1vw = viewport 宽度的 1%, 100vw = viewport width

  右flex-grow

• 对于剩余空间，按数值评分。若只有一个设置了正值，那么它会占据剩下所有空间

三栏 中间自适应布局

flex布局，自适应块设置flex-grow值

左右中排序，左右浮动，中间生成新bfc/定位/margin

<div class="left"></div> <!--float:left-->
<div class="right"></div><!--float:right-->
<div class="middle"></div> <!--overflow:hidden-->
                            <!--position:absolute;left:xx;right:xxx-->
                            <!--margin:0 xxx 0 xxx-->

左中右排序，父table，左中右table-cell

左中右排序，grid布局

grid-template-rows: 100px;  /*设置行高*/
grid-template-columns: 100px auto 200px;  /*设置列数属性*/

圣杯布局

<div class="container">
  <div class="main col">Main</div>
  <div class="left col">Left</div>
  <div class="right col">Right</div>
</div>

.col{
  float: left;   
  position:relative;
}
.container{
  padding:0 200px 0 100px;/*父元素空出左右栏位子,否则中间栏的内容会被遮盖住*/
  /* 方案二 给main外包裹一个100%宽度的容器，main设置margin空出左右栏位子*/
}
.main{
  width:100%;
}
.left{
  margin-left: -100%;/* 通过负值margin-left为100% 使其移到与中间box左边框重合 */
  width: 100px;
  left:-100px;/* 设置left使其移动到父元素的左边padding处 */
  
}
.right{
  margin-left: -200px;/* 通过margin-right为宽度的负值 使其移到与中间box右边框重合 */
  width:200px;
  right:-200px;/* 设置right使其移动到父元素的右边padding处 */
}

多栏等高布局

table布局

父元素display:table;子元素display:table-cell

负margin+正padding

.parent{
  overflow:hidden
}
.child{
  margin-bottom:-3000px; 
  padding-bottom:3000px;
}

inline-block（仅视觉上，不考虑背景色和border）

linebox的默认高度为被所包含的最大高度的inlinebox

.demo{
	display:inline-block;
  width:100px;
  word-break: break-all; /*换行*/
  vertical-align: top; /*改变基线，使文字在块的顶部排列*/
}

垂直水平居中

margin负间距 + absolute

div{
  position: absolute;
  left:50%;
  top:50%;
  margin-left:-100px;/*width的一半*/
  margin-top:-100px;/*hight的一半*/
}

margin auto + absolute

兼容性：IE7及之前版本不支持

div{
  position:absolute;
  left:0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

Transform

兼容性：IE8及之前不支持

div{
  position: absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%); /*自己的50% */
}

flex

兼容性：IE9及之前不支持

.container{
  display:flex;
  justify-content:center;
  align-items:center;
}

table

兼容性：IE7及之前版本不支持

• 方案一：子元素会换行

  .container{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }
  .child{
    display:inline-block; /*若不够空间，下个box会自动换行*/
  }

• 方案二 ：子元素均在同一行并平分空间

  .container{
    display: table;
  }
  .child {
    display: table-cell; /*均会在同一行，并自动平分空间*/
    vertical-align: middle;
    text-align: center;
  }

absolute + calc

兼容性：IE8及之前不支持
局限性：子元素必须固定宽高，而且

.parent{
  position:relative;
}
.child{
  position:absolute;
  top: calc(50% - 30px);
  left: calc(50% - 50px);
  width: 100px; /*必须固定宽高*/
  height: 60px;
}