技术最前端,专注 Web 技术学习与总结。JavaScript, JS, ES6, TypeScript, Vue, PHP, CSS3, Html5, Node, Git, Markdown 等技术文章。
水平居中的页面布局中最为常见的一种布局形式,多出现于标题,以及内容区域的组织形式,下面介绍四种实现水平居中的方法(注:下面各个实例中实现的是child元素的对齐操作,child元素的父容器是parent元素)
使用 inline-block 和 text-align 实现
.parent {
text-align: center;
}
.child {
display: inline-block;
}
优点:兼容性好; 不足:需要同时设置子元素和父元素
经典的三列布局,也叫做圣杯布局 Holy Grail of Layouts,是Kevin Cornell在2006年提出的一个布局模型概念,在国内最早是由淘宝UED的工程师传播开来,在中国也有叫法是双飞翼布局,它的布局要求有几点:
三列布局,中间宽度自适应,两边定宽
中间栏要在浏览器中优先展示渲染
允许任意列的高度最高
是 W3C CSS2.1 规范中的一个概念,它决定了元素如何对其元素进行定位,以及与其它元素的关系和相互作用。
在创建了 Block Formating Context 的元素中,其子元素会一个接一个地放置。垂直方向上他们的起点是一个包含块的顶部,两个相邻的元素之间的垂直距离取决于 margin 特性。在 Block Formating Context 中相邻的块级元素的垂直边距会折叠(collapse)。
在 Block Formating Context 中,每一个元素左外边距与包含块的左边相接触(对于从右到左的格式化,右外边接触右边),即使存在浮动也是如此(尽管一个元素的内容区域会由于浮动而压缩),除非这个元素也创建了一个 Block Formating Context。
瀑布流的布局方式展现的内容通常是扁平化、琐碎的东西。首先吸引人的应该是图片,并且图片是那种参差不齐的,如果瀑布流中文字过多,会给人很杂乱的感觉,所以瀑布流更适合单纯的图片浏览。
目前主流的瀑布流布局都是采用定位的方式,对每个单元格计算定位值,如下图: