css问题

一、浮动

1.浮动特点：脱离文档流，向左/向右浮动直到遇到父元素或者别的浮动元素，浮动会导致父元素高度坍塌。

2.清除浮动：clear和bfc

/* clearfix方案(clear属性不允许被清除浮动的元素的左边/右边挨着浮动元素，底层原理是在被清除浮动的元素上边或者下边添加足够的清除空间) */
.clearfix:after{
    content: '';display: block;clear: both;
}

/* overflow不为none会触发bfc,具有bfc特性的元素的子元素不会受外部元素影响，也不会影响外部元素 */
.box{
    overflow:hidden;
}

二、Flex布局

1，意为弹性布局，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

2，容器的属性（其中ios9以下需要添加-webkit-前缀）：

flex-direction：row | row-reverse | column | column-reverse；决定主轴的方向（即项目排列方向）；

flex-wrap：nowrap | wrap | wrap-reverse；如果一条轴线排不下，如何换行；

flex-flow：<flex-direction> || <flex-wrap>；

justify-content：flex-start | flex-end | center | space-between | space-around；主轴上的对齐方式；

align-items：flex-start | flex-end | center | baseline | stretch;交叉轴上如何对齐；

3，项目的属性：

order：排列顺序；

flex-grow：放大比例，默认为0；

flex-shrink：缩小比例，默认为1；

flex-basis：项目占得主轴空间；默认auto；

flex：默认为0 1 auto；

align-self：允许单个项目有与其他项目不一样的对齐方式，默认为auto；

4，布局种类：

1，骰子布局

2，网格布局

3，圣杯布局

4，输入框布局

5，悬挂式布局

6，固定底栏

7，流式布局

三、box-sizing（盒子模型）：

content-box（默认，边框在已设定的宽高外绘制）

border-box（边框在已设定的宽高内绘制）

四、background-clip（背景的绘制区域）：

border-box（默认，背景用于边框）

padding-box（背景用于内边框）

content-box（背景只用于内容）

五、border-radius：

百分比是基于元素本身，大于50%，最后的效果都会等同于50%，这是因为如果两个相邻角的半径和超过了对应的盒子的边的长度，那么浏览器要重新计算保证它们不会重合。

六、判断进入区域：

原生方法：document.getElementById('target').offsetTop - document.documentElement.scrollTop < document.documentElement.clientHeight

jQuery：$('#target').offset().top - $(window).scrollTop() < $(window).height()

七、判断滚到底部

document.documentElement.scrollHeight - document.documentElement.scrollTop === document.documentElement.clientHeight

八、pointer-events：auto | none；

为none时可以穿透上层，去触发下层操作，使用场景为上层为动画效果，下层为实际需要触发的事件操作

九、水平垂直居中：

/* 方案1 */
.box{
  position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}

/* 方案2 */
.parent{
  display: flex;height: 100vh;
}
.child{
  margin: auto;
}

/* 方案3 */
.parent{
  display: flex;
  align-items: center;
  justify-content: center;
}

十. 高度根据宽度等比显示

/* 方案1 */
.element{width: 50vw;height: 50vw;border: 1px solid #000}
/* 方案2 padding％是基于父元素的宽度的百分比的内边距*/
.father{width:100%;height:100%;background:#ccc}
.child{width:50%;height:0;padding-bottom:50%;background:#eee;}