常用前端布局、CSS技巧介绍常用前端布局汇总，以及性能、兼容性等方面的介绍可变尺寸绘制常用CSS技巧squares1：如果通过设置宽度为百分比，则高度无法通过百分比控制。这个地方可以使用padding。首先，元素的高度=height+padding*2+border*2；所以我们可以将width设置为0，然后使用padding来实现盒子的高度（如果元素padding的值是百分比，则根据其父元素的宽度来计算）width:50%;高度：0；背景：红色；底边距：50%；2：通过给元素添加一个正方形图片来实现，设置图片宽度为100%，高度为auto，元素不设置高度。（不推荐，尤其是九宫格）3：通过vw，vh实现。（存在一定的兼容性问题）元素的高度是可变的，要求元素内部元素水平居中，垂直居中（主要是垂直居中）。方案一：通过display:table实现，给最外层元素display:table，同时添加一个二级外层元素设置display:table-cell,vertical-align:middle;这时候第三层的元素就可以垂直居中了。
