一、浮动
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;}
原文地址：https://www.cnblogs.com/colima/p/5973280.html