1、css
盒模型：
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距margin，边框border，填充padding，和实际内容content。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
box-sizing: content-box（W3C盒模型，又名标准盒模型）：元素的宽高大小表现为内容的大小。box-sizing: border-box（IE盒模型，又名怪异盒模型）：元素的宽高表现为内容 + 内边距 + 边框的大小。背景会延伸到边框的外沿。transition和animation的区别：
animation 和 transition 大部分属性是相同的，他们都是随时间改变元素的属性值，
他们的主要区别是 transition 需要触发一个事件才能改变属性，
而animation不需要触发任何事件的情况下才会随时间改变属性值，
并且transition为2帧，从from .... to，而animation可以一帧一帧的。
BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器
子盒子：
父盒子：
clear:both 的空 div 元素，overflow:hidden 或者 auto 样式，触发BFC。calc函数是css3新增的功能，可以使用calc()计算border、margin、pading、font-size和width等属性设置动态值。
#div1 { position: absolute; left: 50px; width: calc( 100% / (100px * 2) ); //兼容写法 width: -moz-calc( 100% / (100px * 2) ); width: -webkit-calc( 100% / (100px * 2) ); border: 1px solid black; }
注意点：
/* 半圆 */ .half-circle{ height: 50px; border-radius: 50px 50px 0 0; } /* 扇形 */ .sector{ border-radius: 100px 0 0; } /* 三角 */ .triangle{ width: 0px; height: 0px; background: none; border: 50px solid red; border-color: red transparent transparent transparent; } /* 梯形 */ .ladder{ width: 50px; height: 0px; background: none; border: 50px solid red; border-color: red transparent transparent transparent; }
原文：https://www.cnblogs.com/ZXH-null/p/12033285.html