CSS传统布局效果CSS3多列布局CSS3弹性伸缩布局

Posted 2021-04-09 Lazy的笔记

一．布局模型
在早期没有平板和智能手机等移动设备大行其道的时期，Web 页面的设计主要是面向
PC 端电脑分辨率展开的。这种分辨率比例比较单一，基本上只要满足最低分辨率设计即可。
一般来说有 4:3、16:10、16:9 这样的主要分辨率。那么，从这种比例上来看，长度总是
大于宽度的。从最低分辨率 1024 * 768 设计即可。为了使浏览器底部不出现滚动条，需要
减去适当的宽度，比如减去 28，最终固定长度设置为 996 即可。当然，也有一些网站在近
两年讲最低分辨率设置为 1280 减去滚动条宽度，因为大显示器逐步主流。
除了刚才所说的固定长度的布局，还有一种是流体布局，就是布局的长度为百分比，比
如 100%。不管你是什么分辨率，它都能全屏显示，当然，局限性也特别大，只适合一些单
一页面，复杂的页面，会随着不同浏览器产生各种阅读障碍。
我们创建一个三行两列模型。 并采用表格布局和浮动布局， 构建固定和流体布局的方式，
模型图如下：
二．表格布局
表格布局，就是通过设定固定的单元格，去除表格边框和填充实现的布局。当然这个布
局非常不建议使用，只是教学了解。表格应该用它最为语义的地方，就是二维表的数据显示。
1.固定布局
//html 部分
<table border="0">
<tr>
<td colspan="2" class="header">header</td>
</tr>
<tr>
<td class="aside">aside</td>
<td class="section">section</td>
</tr>
<tr>
<td colspan="2" class="footer">footer</td>
</tr>
</table>
//CSS 部分
body {
margin:0;
}
table {
margin:0 auto;
width: 960px;
border-spacing: 0;
}
.header {
height: 120px;
background-color: olive;
}
.aside {
width: 200px;
height: 500px;
background-color: purple;
}
.section {
width: 760px;
height: 500px;
background-color: maroon;
}
.footer {
height: 120px;
background-color: gray;
}
2.流体布局
表格的固定布局改成流体布局非常简单，只需要设置 table 为 100%即可。
//修改 table
table {
width: 100%;
}
三．浮动布局
浮动布局主要采用 float 和 clear 两个属性来构建。
1.固定布局
//HTML 部分
<header>
header
</header>
<aside>
aside
</aside>
<section>
section
</section>
<footer>
footer
</footer>
//CSS 部分
body {
width: 960px;
margin: 0 auto;
color: white;
}
header {
height: 120px;
background-color: olive;
}
aside {
width: 200px;
height: 500px;
background-color: purple;
float: left;
}
section {
width: 760px;
height: 500px;
background-color: maroon;
float:right;
}
footer {
height: 120px;
background-color: gray;
clear:both;
}
2.流体布局
流体布局只要更改 body 元素的限定长度为 auto 或 100%。然后左右两列分别设置 20%
和 80%即可。
//CSS 部分
body {
width: auto;
}
aside {
width: 20%;
}
section {
width: 80%;
}

---

一．定位布局
在使用定位布局前，我们先了解一下定位属性的用法。CSS2 提供了 position 属性来实现元素的绝对定位和相对定位。

属性	说明
static	默认值，无定位。
absolute	绝对定位，使用 top、 right、 bottom、 left 进行位移。
relative	相对定位，使用 top、 right、 bottom、 left 进行位移。
fixed	以窗口参考定位， 使用 top、 right、 bottom、 left 进行位移。

//绝对定位，脱离文档流，以窗口文档左上角 0,0 为起点
header {
position: absolute;
top: 100px;
left: 100px;
}
所谓脱离文档流的意思，就是本身这个元素在文档流是占位的。如果脱离了，就不占有文档的位置，好像浮在了空中一般，有了层次感。
由于绝对定位脱离了文档流，出现层次概念。那么每个元素到底在那一层，会不会冲突覆盖。这时通过 z-index 属性来判定它们的层次关系。

属性	说明
auto	默认层次
数字	设置层次，数字越大，层次越高

//设置在 100 层上
header {
z-index: 100;
}
//以窗口参考定位，脱离文档流，会随着滚动条滚动而滚动
header {
position: fixed;
top: 100px;
left: 100px;
}
//相对定位，不脱离文档流，占位偏移
header {
position: relative;
top: 100px;
left: 100px;
}
这三种分别都在各自的情况下使用，均比较常用。但还有一种情况，就是：1.既要脱离文档流（这样元素之间不会相互冲突）；2.以父元素，比如 body 或其他父元素为参考点（这样可以实现区域性绝对定位）；3.还必须是绝对定位。
//第一步，将需要设置参考点的父元素设置为相对，且不设置坐标
body {
position: relative;
}
//第二步，如果父元素设置了参考点，子元素的绝对定位将以它为基准
header {
position: absolute;
top: 0px;
left: 0px;
}
1.固定布局
//CSS 部分
body {
width: 960px;
margin: 0 auto;
position: relative;
}
header {
width: 960px;
height: 120px;
background-color: olive;
position: absolute;
top: 0;
left: 0;
}
aside {
width: 200px;
height: 500px;
background-color: purple;
position: absolute;
top: 120px;
left: 0;
}
section {
width: 760px;
height: 500px;
background-color: maroon;
position: absolute;
top: 120px;
/*left: 200px;*/
right: 0;
}
footer {
width: 960px;
height: 120px;
background-color: gray;
position: absolute;
top: 620px;
}
在上面，基本都用了定位来进行固定布局。但细心的可以发现，其实只有右侧需要实行绝对定位，其他就按照普通的摆放即可。对于设计成流体布局，只要将长度设置成百分比即可。
二．box-sizing
在盒模型那个章节，我们了解到元素盒子如果加入了内边距 padding 和边框 border后，它的总长度会增加。那么如果这个元素用于非常精确的布局时，我们就需要进行计算增减。这其实是比较烦人的操作，尤其是动态设置页面布局的时候。
CSS3 提供了一个属性 box-sizing，这个属性可以定义元素盒子的解析方式，从而可
以选择避免掉布局元素盒子增加内边距和边框的长度增减问题。

属性	说明
content-box	默认值，border 和 padding 设置后用于元素的总 长度。
border-box	border 和 padding 设置后不用于元素的总长度。

//设置 border-box 让 border 和 padding 不在额外增加元素大小
aside {
width: 200px;
height: 500px;
background-color: purple;
padding: 10px;
border: 5px solid red;
box-sizing: border-box;
float: left;
}
box-sizing 是 CSS3 推出的，各个厂商在实现时设置了私有前缀。

Opera	Firefox	Chrome	Safari	IE
支持需带前缀	无	2 ~ 28	4 ~ 9	3.1 ~ 5	8.0+
支持不带前缀	10.1+	29+	10+	6+	9.0+

//完整形式
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
三．resize
CSS3 提供了一个 resize 属性，来更改元素尺寸大小。

属性	说明
none	默认值，不允许用户调整元素大小。
both	用户可以调节元素的宽度和高度。
horizontal	用户可以调节元素的宽度。
vertical	用户可以调节元素的高度。

一般普通元素，默认值是不允许的。但如果是表单类的 textarea 元素，默认是允许的。而普通元素需要设置 overflow:auto，配合 resize 才会出现可拖拽的图形。
//允许修改
aside {
resize: both;
overflow:auto;
}

---

一．早期多列问题
我们有时想布局成报纸、杂志那样的多列方式（至少两列，一般三列以上），但早期CSS 提供的布局方式都有着极大的限制。如果是固体布局，那么使用浮动或定位布局都可以完成。但对于流体的多列，比如三列以上，那只能使用浮动布局进行，而它又有极大的限制。因为它是区块性的，对于动态的内容无法伸缩自适应，基本无能力。
//五段内容，分为三列
<div>
<p>我是第一段内容....省略的部分复制大量文本</p>
<p>我是第二段内容....省略的部分复制大量文本</p>
<p>我是第三段内容....省略的部分复制大量文本</p>
<p>我是第四段内容....省略的部分复制大量文本</p>
<p>我是第五段内容....省略的部分复制大量文本</p>
</div>
//带标题的五段内容，分为三列
<div>
<h4>第一段标题</h4>
<p>我是第一段内容....省略的部分复制大量文本</p>
<h4>第二段标题</h4>
<p>我是第二段内容....省略的部分复制大量文本</p>
<h4>第三段标题</h4>
<p>我是第三段内容....省略的部分复制大量文本</p>
<h4>第四段标题</h4>
<p>我是第四段内容....省略的部分复制大量文本</p>
<h4>第五段标题</h4>
<p>我是第五段内容....省略的部分复制大量文本</p>
</div>
上门两组内容，如果想用浮动和定位实现流体三列，基本不可能。并且实际应用中，需求可能多变，要更改成四列或者五列呢？所以，CSS3 提供了多列布局属性 columns 来实现这个动态变换的功能。
二．属性及版本
CSS3 提供了 columns 多列布局属性等 7 个属性集合，具体如下：

属性	说明
columns	集成 column-width 和 column-count 两个属性
column-width	定义每列列宽度
column-count	定义分分列列数
column-gap	定义列间距
column-rule	定义列边框
column-span	定义多列布局中子元素跨列效果，firefox 不支持
column-fill	控制每列的列高效果，主流浏览器不支持

由于 column 属性集尚未纳入标准，大多数浏览器必须使用厂商前缀才能访问，好在主流的浏览器都可以很好的支持了。下面是主流浏览器的支持和前缀情况。

Opera	Firefox	Chrome	Safari	IE
支持需带前缀	11.5 ~ 29	2 ~ 40	4 ~ 45	3.1 ~ 8	无
支持不带前缀	无	无	无	无	10.0+

通过上面的表格，我们可以了解到，要想让最新的浏览器全部实现效果，都必须使用前缀。//完整形式
-webkit-columns: 150px 4;
-moz-columns: 150px 4;
columns: border-box;
三．属性解释
为了方便演示，我们在 Firefox 火狐浏览器测试，只用-moz-前缀演示。
1.columns
columns 是一个复合属性，包含 columns-width 和 columns-count 这两种简写。意为同时设置分列列数和分列宽度。
//分成四列，每列宽度自适应
-moz-columns: auto 4;
2.column-width
column-width 属性，用于设置每列的宽度。
//设置列宽
-moz-column-width: 200px;
这里设置了 200px，有点最小宽度的意思。当浏览器缩放到小于 200 大小时，将变成 1列显示。而如果是 auto，则一直保持四列。

属性值	说明
auto	默认值，自适应。
长度值	设置列宽。

3.column-count
column-count 属性，用于设置多少列。
//设置列数
-moz-column-count: 4;

属性值	说明
auto	默认值，表示就 1 列。
数值	设置列数。

4.column-gap
column-gap 属性，用于设置列间距
//设置列间距
-moz-column-gap: 100px;

属性值	说明
auto	默认值，表示就 1 列。
数值	设置列数。

5.column-rule
column-rule 属性，设置每列中间的分割线
//设置列边线
-moz-column-rule: 2px dashed gray;

属性	说明
column-rule	<宽度> <样式> <颜色>的边框简写形式。
column-rule-width	单独设置边框宽度。
column-rule-style	单独设置边框的样式。
column-rule-color	单独设置边框的颜色。

列边线不会影响到布局，它会根据布局的缩放自我调整是否显示。如果我们把页面缩放到只能显示一列时，它自动消失了。
6.column-span
column-span 属性，设置跨列大标题。
//跨列标题，由于火狐尚未支持，固使用 webkit
-webkit-column-span: all;

属性值	说明
none	默认值，表示不跨列。
all	表示跨列

---

一．新版本
新版本的 Flexbox 模型是 2012 年 9 月提出的工作草案，这个草案是由 W3C 推出的最新语法。这个版本立志于指定标准，让新式的浏览器全面兼容，在未来浏览器的更新换代中实现了统一。
首先，设置伸缩盒的 display 有如下两个属性值：

属性值	说明
flex	将容器盒模型作为块级弹性伸缩盒显示（新版本）
inline-flex	将容器盒模型作为内联级弹性伸缩盒显示（新版本）

//大部分不需要前缀
div {
display: flex;
}

属性	IE	Firefox	Chrome	Opera	Safari
带前缀	无	无	21 ~ 28	无	7.0
不带前缀	11+	20+	29+	12.1	无

从这张表可以看出，只有 webkit 引擎的浏览器 Chrome 和 Safari 的版本需要添加-webkit-，而 Chrome 浏览器 29 版本以后可以省略了。

1.flex-direction
flex-direction 属性和旧版本 box-orient 属性一样，都是设置伸缩项目的排列方
式。
//设置从上往下排列
div {
flex-direction: column;
}

属性值	说明
row	设置从左到右排列
row-reverse	设置从右到左排列
column	设置从上到下排列
column-reverse	设置从下到上排列

2.flex-wrap
flex-wrap 属性类似与旧版本中的 box-lines，但是 box-lines 我们没有讲解，原因
是没有浏览器支持它。
//设置无法容纳时，自动换行
div {
-ms-flex-wrap: wrap;
}

属性值	说明
nowrap	默认值，都在一行或一列显示
wrap	伸缩项目无法容纳时，自动换行
wrap-reverse	伸缩项目无法容纳时，自动换行，方向和 wrap 相反

3.flex-flow
flex-flow 属性是集合了排列方向和控制换行的简写形式。
//简写形式
div {
flex-flow: row wrap;
}
4.justify-content
justify-content 属性和旧版本中的 box-pack 一样，设置伸缩项目的对其方式。
//按照中心点对齐
div {
justify-content: space-around;
}

属性值	说明
flex-start	伸缩项目以起始点靠齐
flex-end	伸缩项目以结束点靠齐
center	伸缩项目以中心点靠齐
space-between	伸缩项目平局分布
space-around	同上，但两端保留一半的空间

5.align-items
align-items 属性和旧版本中的 box-align 一样，处理伸缩项目容器的额外空间。
//处理额外空间
div {
align-itmes: center;
}

属性值	说明
flex-start	伸缩项目以顶部为基准，清理下部额外空间
flex-end	伸缩项目以底部为基准，清理上部额外空间
center	伸缩项目以中部为基准，平均清理上下部额外空间
baseline	伸缩项目以基线为基准，清理额外的空间
stretch	伸缩项目填充整个容器，默认

6.align-self
align-self 和 align-items 一样，都是清理额外空间，但它是单独设置某一个伸缩
项目的。所有的值和 align-itmes 一致。
//单独设置清理额外空间
p:nth-child(2) {
align-self: center;
}
7.flex
flex 属性和旧版本中的 box-flex 类似，用来控制伸缩容器的比例分配。
//设置比例分配
p:nth-child(1) {
flex: 1;
}
p:nth-child(2) {
flex: 3;
}
p:nth-child(3) {
flex: 1;
}
8.order
order 属性和 box-ordinal-group 属性一样控制伸缩项目出现的顺序。
//设置伸缩项目顺序
p:nth-child(1) {
order: 2;
}
p:nth-child(2) {
order: 3;
}
p:nth-child(3) {
order: 1;
}

---

一．混合过渡版
混合版本的 Flexbox 模型是 2011 年提出的工作草案，主要是针对 IE10 浏览器实现的伸缩布局效果，其功能和旧版本的属性大同小异。我们还是采用上一节课的文件，然后使用混合过渡代码，实现 IE10 的伸缩布局。
首先，设置伸缩盒的 display 有如下两个属性值：

属性值	说明
flexbox	将容器盒模型作为块级弹性伸缩盒显示（混合版本）
inline-flexbox	将容器盒模型作为内联级弹性伸缩盒显示（混合版本）

//需要 IE 前缀-msdiv {
display: -ms-flexbox;
}
1.flex-direction
flex-direction 属性和旧版本 box-orient 属性一样，都是设置伸缩项目的排列方
式。
//设置从上往下排列
div {
-ms-flex-direction: column;
}

属性值	说明
row	设置从左到右排列
row-reverse	设置从右到左排列
column	设置从上到下排列
column-reverse	设置从下到上排列

2.flex-wrap
flex-wrap 属性类似与旧版本中的 box-lines，但是 box-lines 我们没有讲解，原因
是没有浏览器支持它。
//设置无法容纳时，自动换行
div {
-ms-flex-wrap: wrap;
}

属性值	说明
nowrap	默认值，都在一行或一列显示
wrap	伸缩项目无法容纳时，自动换行
wrap-reverse	伸缩项目无法容纳时，自动换行，方向和 wrap 相反

3.flex-flow
flex-flow 属性是集合了排列方向和控制换行的简写形式。
//简写形式
div {
-ms-flex-flow: row wrap;
}
4.flex-pack
flex-pack 属性和旧版本中的 box-pack 一样，设置伸缩项目的对其方式。
//按照中心点对齐
div {
-ms-flex-pack: center;
}

属性值	说明
start	伸缩项目以起始点靠齐
end	伸缩项目以结束点靠齐
center	伸缩项目以中心点靠齐
justify	伸缩项目平局分布

5.flex-align
flex-align 属性和旧版本中的 box-align 一样，处理伸缩项目容器的额外空间。
//处理额外空间
div {
-ms-flex-align: center;
}

属性值

说明

start	伸缩项目以顶部为基准，清理下部额外空间
end	伸缩项目以底部为基准，清理上部额外空间
center	伸缩项目以中部为基准，平均清理上下部额外空间
baseline	伸缩项目以基线为基准，清理额外的空间
stretch	伸缩项目填充整个容器，默认

6.flex
flex 属性和旧版本中的 box-flex 类似，用来控制伸缩容器的比例分配。
//设置比例分配
p:nth-child(1) {
-ms-flex: 1;
}
p:nth-child(2) {
-ms-flex: 3;
}
p:nth-child(3) {
-ms-flex: 1;
}
7.flex-order
flex-order 属性和 box-ordinal-group 属性一样控制伸缩项目出现的顺序。
//设置伸缩项目顺序
p:nth-child(1) {
-ms-flex-order: 2;
}
p:nth-child(2) {
-ms-flex-order: 3;
}
p:nth-child(3) {
-ms-flex-order: 1;
}