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;交叉轴上如何对齐；

        align-content：flex-start | flex-end | center | space-between | space-around | 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;}

十一. position: sticky

          粘性定位，该定位基于用户滚动的位置；它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

十二. 设备像素比

          window.devicePixelRatio = 物理像素 / dips(设备独立像素)

十三. 根据不同设备像素比显示不同图片

         <img src='128px.jpg' srcset='128px.jpg 1x, width-256px.jpg 2x'>

         当视区宽度不大于360像素时候，图片的宽度限制为340像素；其他情况下，使用128像素：

         <img src='128px.jpg' srcset='128px.jpg 128w, 256px.jpg 256w, 512px.jpg 512w' sizes='(max-width: 360px) 340px, 128px'> 

十三. Grid