2018-3-6 CSS

**清除浮动** 什么时候需要清除浮动？ 高度塌陷，清除浮动就是清除由于子元素浮动带给父元素高度塌陷的的影响 清除浮动有那些方法 1.添加一个冗余的元素

<div>
    ...
     <div style="clear:both;">
     </div> 
</div>
//该元素左侧和右侧不允许出现浮动元素。这样父元素为了包裹住这个冗余的元素就不会高度塌陷。

2.使用伪类 避免添加冗余的元素

.fix::after{
    content:"";
    display:block;
    height:0;
    visibility:hidden;
    clear:both;
}

或者

.fix::after{
    content:"";
    display:table;
    clear:both;
}

浮层居中的方式

1.绝对定位或相对定位与transform

//宽高可以是100%
.children{
background: #fff;
position:fixed;//or position:absolute
left: 50%;
top: 50%;
-webkit-transform:translate(-50%,-50%);

}

2.flexbox

//宽高可以是100%
.parent{
justify-content:center;//项目位于容器中心
align-items:center;//中心元素在容器内
display:-webkit-flex;
}

3.table
4.display；table-cell

.parent{
  width: 800px;
  height: 600px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  background: #fff;
}
.children{
  width: 150px;
  height:100px;
  display: inline-block;
  background-color: yellowgreen;
}

2017-3-7
**position和display的取值以及用法**
position:static|relative|absolute|fixed|inherit;
**static**始终处于文档流给予的位置，该属性生效时，top,bottom,left,right不生效，z-index不生效。
**relative**位于正常的文档流
**absolute**脱离文档流
**fixed**旧版IE不支持，定位原点相对于浏览器窗口
**inherit**IE不支持，从父类继承position的值

**display：none,inline,inline-block,block,flex,inheirt**
display属性规定元素生成框的类型
**none**不占据文档位置，而visibility:hidden仍然占据文档位置
**inline**行内 水平方式布局 ，竖直方向的margin和padding是无效的，宽高也是无效的
**block**块状 单独占据一行 盒子模型
**inline-block** 水平方式布局 但是可以设置宽高 margin padding
**flex** 弹性盒子布局 容器设置为弹性布局后 子元素的float,clear,vertical-align 失效
    容器的属性
    flex-direction:row|row-reverse|column|column-reverse
    flex-wrap:nowrap|wrap|wrap-reverse
    ....
**如何将一个div撑满屏幕**

1.使用绝对定位

*{
margin: 0;
padding:0;
}
.container{
position:absolute;
width: 100%;
height:100%;
background: #ccc;
}

2.通过设置html,body的宽高来让div充满屏幕。

*{
  margin: 0;
  padding:0;
}
html,body{
  width: 100%;
  height:100%;
}
.container{
  width: 100%;
  height:100%;
  background: #ccc;
}

“`