HTML+CSS - 网页布局之多列布局定位
1. 多列布局
CSS中多列布局处理文本内容，特别适合对于长段落或者大量文本进行自动分栏显示
类似于grid分布，但相较之下更加简洁明了
基本语法
<div class="container">
<p>
这是一些示例文本，当我们使用 column-count 属性时，文本会被自动分成多列显示。无论是新闻文章、书籍段落，还是其他长段落内容，这种布局方式都非常实用。
</p>
</div>
以下CSS代码都是通过上述HTML文档举例
1.1 定义文本分栏
• column-count
指定文本分为几列
.container
{
column-count: 3; /*将文本分为3列*/
}• column-width
指定每一列的宽度，浏览器根据可用空间和指定宽度自动调整列数
.container
{
column-gap: 20px; /*每一列之间的间隔*/
}• column-gap
设置列之间的间距，如下代码所示，每一列之间的间距为20px
.container
{
column-count:3;
column-gap:20px;
}• column-rule
为列之间添加分割线，创建方式与border相同，涵盖粗细，线段形式，颜色
这条分割线本身并不占用宽度，它置于用 column-gap 创建的间隙内。如果需要更多空间，你需要增加 column-gap 的值。
.container
{
column-rule:4px dotted rgb(79,185,227);
}1.2 实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
width:90%;
max-width:900px;
margin:2em auto;
font:.9em/1.2 Arial, Helvetica, sans-serif;
}
.container{
column-count:2;
column-width:200px;
column-gap:20px;
column-rule:4px dotted rgb(79,185,227); /*这条分割线本身并不占用宽度。
它置于用 column-gap 创建的间隙内。如果需要更多空间，你需要增加 column-gap 的值*/
}
.card{
break-inside:avoid;
background-color: #808080;
border: 5px solid rgb(79,185,227);
padding :10px
}
</style>
</head>
<body>
<h1>Simple multicol example</h1>
<div class='container'>
<div class='card'>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.
Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus
laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra
egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam
erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare
egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum
sapien.
</p>
</div>
<div class='card'>
<p>
Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere
sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu
urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
</div>
</div>
</body>
</html>
2. 定位
2.1 静态定位
静态定位是每个元素获取的默认值——它只是意味着“将元素放入它在文档布局流中的正常位置——这里没有什么特别的。
.positioned {
position: static;
background: yellow;
}2.2 相对定位
相对定位定义元素的位置根据其默认位置相对得来
.positioned{
position:relative; /*根据初始位置进行调整*/
background:yellow;
top:30px;使用top,bottom,left,right进行定位，对于相对位置而言，具体位置与所设定元素为反方向，像一双无形的手推了过去。
这些属性的值可以采用逻辑上期望的任何单位——px、mm、rem、% 等。
2.3 绝对定位
它们指定元素应距离每个包含元素的边的距离，而不是指定元素应该移入的方向。
绝对定位的元素不再存在于正常文档布局流中。相反，它坐在它自己的层独立于一切。
.positioned {
position: absolute;
top:10px;
left:10px;
background: yellow;
}
2.4 元素重叠处理
当元素开始重叠，我们需要考虑各个元素的层级结构。
让我们想象整个网页是三维空间，网页内容代表X，Y轴，Z轴表示高度
z-index参数应运而生
值影响定位元素位于该轴上的位置；正值将它们移动到堆栈上方，负值将它们向下移动到堆栈中。默认情况下，定位的元素都具有 z-index 为 auto，实际上为 0。
z-index: 1; /*元素向上*/2.5 固定定位
绝对定位将元素固定在相对于其位置最近的祖先。（如果没有，则为初始包含它的块）而固定定位固定元素则是相对于浏览器视口本身。使用鼠标滚动，该定位将会一直保持
h1{
position:fixed;
top:0;
width:500px;
margin:0 auto;
background:white;
padding:10px;
}为了使得首行文本可以看见，定义top-margin即可
2.6 sticky定位
类似于相对位置与固定定位的混合体
它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点（例如，从视口顶部起 10 像素）为止，此后它就变得固定了。
.positioned{
position:sticky;
top:1px;
left:30px;
}top与left表示滑动界面时的固定位置
3. 参考资料
弹性盒子 - 学习 Web 开发 | MDN