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;，它会固定在目标位置。

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

         <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'>