摘要：二双列布局一列固定宽度，另外一列自适应宽度。如果先执行，由于有左，就正好可以放的下注意使用后清除浮动三三列布局两侧两列固定宽度，中间列自适应宽度。
一、单列布局
单列布局长这个样子，主要有两种：普通单栏，通栏的单栏布局
比较简单，设置 定宽 + 水平居中即可
头部内容
执行结果链接描述
浏览器宽度超过960px时，外margin出现。
当收缩浏览器宽度，小于960px时，margin为0，出现滚动条。
headercontent
执行结果链接描述
在header 和footer上再包裹一层div，在外层的div上添加背景颜色，设置内层layout上设置左右margin：auto，就出现了通栏的效果。实际上layout占据的位置是固定的，如下图border框出的位置。
当浏览器宽度收缩的时候，也会出现滚动条。
一列固定宽度，另外一列自适应宽度。通过float+margin实现
#content:after{
content: "";
display: block;
clear: both;
}
.aside{
width: 200px;
height: 500px;
background: yellow;
float: left;
}
.main{
margin-left: 210px;
height: 400px;
background: red;
}
#footer{
background: #ccc;
}
aside
content
执行结果链接描述
1、最重要布局的时候浮动元素要放在前面，要先放aside，再写content。因为content是普通的块级元素，如果先执行content，就会占据一整行，aside就只能向下浮动。
如果先执行aside，由于有左margin，就正好可以放的下
2、注意使用后清除浮动
两侧两列固定宽度，中间列自适应宽度。通过设置aside 左右float+左右margin实现
asideaside2main
执行结果：链接描述
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
执行结果链接描述
左右没有margin
关于flex这三篇文章，写得比较好
Flex 布局教程：实例篇
Flex 布局教程：语法篇
深入理解 flex-grow & flex-shrink & flex-basis
三列布局中，一般两边是广告，中间是实际内容。要求中间内容元素在 dom 元素次序中处于优先位置。所以普通的三栏布局就用不了，必须要用更复杂的方式来实现。
2、原理（浮动+负margin+绝对定位）1、给main，aside，extra都设置为浮动，main设置宽度为100%
2、设置aside负margin-left为100%（相当于向左移动一个父元素的宽度），将aside移动到main的左边
3、设置extra负margin-left为150px（extra的宽度），将extra移动到main的右边
4、为了避免main的内容被extra和aside遮挡。给content设置左padding为100px，右padding为150px，给extra和aside腾出位置
5、最后使用position：relative，将extra和aside分别移动到两边
3、遇到的坑设置负margin和width为百分比，计算的基数都是父元素的宽度
负margin使用较难掌握，使用前可以看一下这篇负margin的原理的文章
mainasideextra
执行结果链接描述
七、双飞翼布局（浮动+左右margin+负margin）demo
原理：双飞翼的布局和圣杯是很相似的，不同的是双飞翼在main内部再嵌套了一层wrap。用wrap设置左右margin，代替content设置padding和绝对定位。
mainasideextra
执行结果
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/114213.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 拉伸性质...
阅读 916·2021-11-25 09:43
阅读 1282·2021-11-17 09:33
阅读 2998·2019-08-30 15:44
阅读 3300·2019-08-29 17:16
阅读 471·2019-08-28 18:20
阅读 1624·2019-08-26 13:54
阅读 546·2019-08-26 12:14
阅读 2165·2019-08-26 12:14
