前言 今天给大家分享一个圣杯布局和双飞翼布局及他们之间的区别，这两个三行布局一直是一些大厂前端面试的高频考点，带你走进大厂面试题，活不多说，冲冲冲~ 布局的效果 这两个种三行布局效果是一样的，实现的效

圣杯和双飞翼布局介绍最近正好碰到了写这种布局，一直没有总结过正好借这次机会总结一波，同时加强一下自己的理解。博客链接：http://www.xluos.com/index.ph...圣杯布局和双飞翼布

最近我朋友在群里发了一张图，说为什么main的宽度100%了，sub还是可以覆盖它呢？看来是时候带他回忆一波经典的圣杯布局和双飞翼布局了。正好最近看到好多面试题都有提到。 /笑哭 通俗的来说就是左右两栏固定宽度，中间部分自适应的三栏布局。 双飞翼布局和圣杯布局很类似，不过是在m…

绝对定位是以父元素的左上角原点为定位基准点，absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。 假如其他具有不同 z-index 属性的对象已经占据了给定的位置，他们之间不会相互影响，而会在同一位置层叠。 如果父级（无限）设定position属性，那…

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

所谓‘伪元素’，就是本身不存在的页面元素，HTML代码里并没有这样的元素，但在页面显示时，你却能看到这些本来不存在的元素发挥着作用。本文主要探究伪元素beforce和after的常用使用场景。 :before 选择器向选定的元素前插入内容。 使用content 属性来指定要插入…

本文解决两个痛点：1.伪类和伪元素傻傻分不清楚的问题，2. 太多伪类和伪元素导致我裂开的问题~~快来看看吧~

以上是 CSS 水平居中的 8 种方法。 注：① 子元素 line-height 值为父元素 height 值。② 单行文本。 适应 IE7。 元素高度可以动态改变, 不需再CSS中定义, 如果父元素没有足够空间时, 该元素内容也不会被截断。 IE6~7, 甚至IE8 beta…