摘要：三栏布局，面试与工作中的常见布局。分左中右三部分，其中左右宽度已知，中间宽度自适应。根据不同的顺序与处理，这里写下了五类布局方式。用了它，内外部元素渲染互不影响，就不会蔓延到两侧了。网格布局网格布局好了，后续再来说一下各自的优缺点。
三栏布局，面试与工作中的常见布局。分左中右三部分，其中左右宽度已知，中间宽度自适应。
根据不同的DOM顺序与CSS处理，这里写下了五类布局方式。
L：“我问你，你就是我的Master吗？”
……
圣杯布局
圣杯布局
2 双飞翼布局
双飞翼布局
双飞翼布局
3 浮动布局
Float布局
中间部分的内容
这样会有个问题，就是center高度大于两侧的时候，会duang的蔓延到两侧，像这样：
相应的，为了让页面成为我们需要的样子，引入了两个解决方案。
BFC修正
L：“我问你，你这里是不是有什么问题？(指着脑袋)”
……
BFC(Block Fromatting Context),直译就是块级格式化上下文。
先知其然吧，概念差不多又需要整理一篇文章。用了它，内外部元素渲染互不影响，center就不会蔓延到两侧了。
具体代码：
.center{
overflow:hidden;
background-color: gray;
}
Margin修正
.center{
margin: 0 200px;
background-color: gray;
}
二、Flex布局
Flex布局
Flex布局
三、绝对定位布局
绝对定位布局
绝对定位布局
四、Table布局
现在很少人用的table标签
Table布局
| Table布局 |
display:table-cell与上面一个意思
table-cell
table-cell
五、网格布局
如果说flex用于一维，grid就是用于二维的。
网格布局
网格布局
好了，后续再来说一下各自的优缺点。
你一赞，我一赞，开开心心去吃饭~
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/52490.html
摘要：三栏布局，面试与工作中的常见布局。分左中右三部分，其中左右宽度已知，中间宽度自适应。根据不同的顺序与处理，这里写下了五类布局方式。用了它，内外部元素渲染互不影响，就不会蔓延到两侧了。网格布局网格布局好了，后续再来说一下各自的优缺点。 三栏布局，面试与工作中的常见布局。分左中右三部分，其中左右宽度已知，中间宽度自适应。根据不同的DOM顺序与CSS处理，这里写下了五类布局方式。 一、浮动布...
摘要：浮动代码如下注意元素次序代码如下左栏左浮动中间自适应右栏右浮动这种方式代码足够简洁与高效，也容易理解后记四种方法其实只有圣杯布局和双飞翼布局较难理解，但实际上理解了圣杯布局，双飞翼布局自然就理解了。 前言 总括： 不管是三栏布局还是两栏布局都是我们在平时项目里经常使用的，也许你不知道什么事三栏布局什么是两栏布局但实际已经在用，或许你知道三栏布局的一种或两种方法，但实际操作中也只会依赖那...
摘要：经典方法三栏布局的方法有很多种，其中最经典的方法莫过于圣杯布局和双飞翼布局。而双飞翼布局方法无需相对位置属性，而是采用为中栏内容创建的方式，通过来实现布局。文章第二部分阐述了流行的圣杯布局方法和双飞翼布局方法的细节和异同。 三栏是CSS布局中常见的一种布局模式，顾名思义，就是将网页内容以三列的形式呈现。通常，三栏布局中的左栏和右栏是固定宽度的，中栏随着窗口宽度的变化而变化。本文探讨栏三...
摘要：经典方法三栏布局的方法有很多种，其中最经典的方法莫过于圣杯布局和双飞翼布局。而双飞翼布局方法无需相对位置属性，而是采用为中栏内容创建的方式，通过来实现布局。文章第二部分阐述了流行的圣杯布局方法和双飞翼布局方法的细节和异同。 三栏是CSS布局中常见的一种布局模式，顾名思义，就是将网页内容以三列的形式呈现。通常，三栏布局中的左栏和右栏是固定宽度的，中栏随着窗口宽度的变化而变化。本文探讨栏三...
摘要：先让它们浮动，并给和一个固定宽度，宽度，清除浮动流，结果变成上面这样。工作的越久，有些基础知识我们可能就逐渐淡忘了，今天我们来回顾一下css的圣杯布局和双飞翼布局， 这两个名词你可能不熟， 那三栏布局你肯定就非常熟悉了， 就是两边定宽， 中间自适应 的 布局 1 ， 圣杯布局 !--三栏布局-- header 三栏布局 /header div div cent...
阅读 3771·2021-10-12 10:12
阅读 1422·2021-10-11 10:58
阅读 2229·2021-10-09 10:01
阅读 2512·2021-09-24 09:48
阅读 2680·2021-09-09 11:38
阅读 3501·2019-08-30 15:44
阅读 1707·2019-08-30 14:22
阅读 500·2019-08-29 12:42
