浏览器在渲染页面时，渲染引擎会把DOM看做一个个的盒子，这些盒子的宽高以及边框由css决定，一个盒模型包括 内容区(content)、内边距(padding)、边框(border)、外边距(margin)。 盒模型又分为 标准盒模型 和 怪异盒模型，在标准盒模型中通过css设置…

最近看一些前端面试题，经常有问到伪类和伪元素的作用以及两者区别，所以特意找了一些资料学习。下面是我对这一方面知识的理解和总结，可能会有遗漏或者一些出入，欢迎大家指正，相互交流～ 伪元素和伪类很像，但是伪元素类似于增添一个新的DOM节点到DOM树中，而不是改变元素的状态。注意了，…

48张图带你从0到1掌握flex布局方式。 需要本文的Xmind导图的话，移步公众号--前端UpUp,回复flex关键字即可。 从上面图来看，我们将flex布局分为两部分讲，轴和容器。 打个预防针，flex布局涉及到12个CSS属性，父容器,子容器各6个。 接下来先梳理常见的属…

当父元素不设置高度的时候靠子元素撑大，也就是说子元素有多高，父元素就有多高，当子元素浮动后，父元素就会高度塌陷。父元素高度塌陷后，父元素下面的元素就会向上移动，这样会导致整个页面的布局混乱。 可以看到父元素高度塌陷后，下面的子元素都往上移动了，脱离了文档流。 给父元素设置固定的…

1. 画三角形 然后我们可以通过给任意三边的颜色设置为 transparent 即可分别实现任一方向的三角形。 通过设置某条边的宽度比其它边宽，来调整三角形的高度。 通过设置某条边的宽度比其它边窄，来调整三角形的宽度。 2. 画梯形 梯形也是基于 border 来绘制的，只不过…