摘要：头部主要内容左边栏右边栏尾部显示为头部主要内容左边栏右边栏尾部圣杯布局和双飞翼布局的原理这篇文章讲解得比较清楚，我就不再赘述。
====== 样例代码不能显示，请看原文https://magicly.me/css-layout/ ======
布局是CSS中一个很重要的部分，甚至我觉得是最重要也是最难的部分，其他诸如字体大小、颜色等等都是很容易的。最近总结一下使用过的CSS常用布局，包括水平居中、垂直居中、单列布局、多列布局等，以及最新的flex布局，希望能给前端小伙伴一些帮助，也作为自己的知识总结。
在后面的例子中，我特意将各个块背景颜色调出来方便大家“欣赏”。
水平居中 子元素为inline直接对父元素设置
text-align: center
如：
显示为：
对子元素设置左右margin为auto
margin: 0 auto;
如：
magicly
显示为：
magicly
设置子元素
display: inline
以及设置父元素
text-align: center;
如：
显示为：
设置父元素的height和line-height相等， 如：
显示为：
设置子元素position:absolute 并设置top、bottom为0（如果还要左右居中的话，可以设置left: 0; right: 0;），父元素要设置定位为static以外的值（如relative），margin:auto;
如：
显示为：
主要有两种:
header, content, footer宽度相同，有一个max-width
header和footer占满浏览器100%宽度，content有一个max-width
第一种：
头部 内容
显示为：
第二种：
头部 内容
显示为：
用float将边栏与主要内容拉到一行，然后设置主要内容的margin。
左边栏:
主要内容
右边栏
主要内容
左边栏:
主要内容
右边栏
主要内容
比较经典有圣杯布局，以及据说是淘宝UED（玉伯）提出的双飞翼布局。
圣杯布局头部 主要内容 尾部
显示为：
传统的双飞翼布局不是这样的， 只是我发现直接在section用padding也可以达到效果。
头部 主要内容 尾部
显示为：
圣杯布局和双飞翼布局的原理这篇文章讲解得比较清楚，我就不再赘述。
flex布局flex布局目前已经很常用了，浏览器支持得也很好，甚至连[React Native]()也是用flex布局的，这么重要想想也觉得应该多带带成篇啦。后续再写，有兴趣的可以看看阮老师的下面两篇文章。
http://www.ruanyifeng.com/blo...
http://www.ruanyifeng.com/blo...
refershttps://zhuanlan.zhihu.com/p/...
http://www.cnblogs.com/star91...
http://www.zhangxinxu.com/wor...绝对定位-水平垂直居中/
https://www.w3schools.com/htm...
http://coolshell.cn/articles/...
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/112283.html
摘要：布局涉及到的属性常用属性值此元素不会被显示它和属性不一样。当所有父元素中的所有元素脱离文档流之后，父元素将失去原有默认的内容高度浮动塌陷配合使用属性规定元素的哪一侧不允许其他浮动元素。 @(CSS技巧)[CSS, 布局] 深入学习CSS布局系列（一）布局常用属性 一直感觉自己对CSS的各个属性很了解，可是在前几天一次面试后发现自己真的很多地方感觉自己知道，可是实际上自己并不是真的理解了...
摘要：常用布局在小程序中的应用所有布局的根本都是个基本概念定位浮动外边距操纵我们其他的布局实现方式，都是基于正常的文档流来进行的。具体实现，可以使用微信小程序的单位，以及使用定位浮动布局来实现。 CSS 常用布局在小程序中的应用 所有css布局的根本都是3个基本概念：定位、浮动、外边距操纵 我们其他的布局实现方式，都是基于正常的文档流来进行的。所以我们先来看看什么是正常的文档流。 正常文...
摘要：常用布局在小程序中的应用所有布局的根本都是个基本概念定位浮动外边距操纵我们其他的布局实现方式，都是基于正常的文档流来进行的。具体实现，可以使用微信小程序的单位，以及使用定位浮动布局来实现。 CSS 常用布局在小程序中的应用 所有css布局的根本都是3个基本概念：定位、浮动、外边距操纵 我们其他的布局实现方式，都是基于正常的文档流来进行的。所以我们先来看看什么是正常的文档流。 正常文...
摘要：与常人的直觉不符的是，实际上表示视口宽度的，而不是。与类似，表示视口高度的。存在问题它只适用于在视口中居中的场景基于的解决方案伸缩盒是专门针对这类需求所设计的。 相关基础知识 1.内部与外部尺寸模型：（w3c草案）亲测google可支持。（http://w3.org/TR/css3-sizing ） 基于原有CSS尺寸特性，可以使CSS更容易描述内容自适应以及适应固定上下文的盒模型： ...
摘要：常用模式片段之摘要第一次看到这个字眼是在中，即。之后也见到一些别人的代码里有，它和页面的有什么关系，以及和有何渊源。以前都见过这些词，但都似懂非懂，今天查了些资料收集了些代码，做个完整的理解。 CSS篇 常用模式片段之CSS布局篇 http://jsorz.cn/blog/2016/08/code-patterns-of-css-layout.html 摘要：position 拉伸性质...
阅读 1263·2021-11-17 09:33
阅读 3631·2021-09-10 11:22
阅读 2147·2021-09-03 10:30
阅读 3415·2019-08-30 15:55
阅读 1612·2019-08-30 15:44
阅读 735·2019-08-30 15:44
阅读 430·2019-08-30 14:04
阅读 2928·2019-08-29 17:18
