HTML+CSS - 网页布局之多列布局定位

news/2024/12/22 11:29:17/
htmledit_views">

1. 多列布局

CSS中多列布局处理文本内容,特别适合对于长段落或者大量文本进行自动分栏显示

类似于grid分布,但相较之下更加简洁明了

基本语法

html"><div class="container"><p>这是一些示例文本,当我们使用 column-count 属性时,文本会被自动分成多列显示。无论是新闻文章、书籍段落,还是其他长段落内容,这种布局方式都非常实用。</p>
</div>

以下CSS代码都是通过上述HTML文档举例

 

1.1 定义文本分栏 

• column-count

指定文本分为几列

css">.container
{column-count: 3; /*将文本分为3列*/
}

• column-width

指定每一列的宽度,浏览器根据可用空间和指定宽度自动调整列数

css">.container
{column-gap: 20px; /*每一列之间的间隔*/
}

• column-gap

设置列之间的间距,如下代码所示,每一列之间的间距为20px

css">.container
{column-count:3;column-gap:20px;
}

• column-rule

为列之间添加分割线,创建方式与border相同,涵盖粗细,线段形式,颜色

这条分割线本身并不占用宽度,它置于用 column-gap 创建的间隙内。如果需要更多空间,你需要增加 column-gap 的值。

css">.container
{column-rule:4px dotted rgb(79,185,227);
}

1.2 实例

html"><!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 telluslaoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverraegestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquamerat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornareegestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentumsapien.</p></div><div class='card'><p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posueresit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamustristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus euurna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoquepenatibus et magnis dis parturient montes, nascetur ridiculus mus.</p></div></div></body>
</html>

2. 定位

2.1 静态定位

静态定位是每个元素获取的默认值——它只是意味着“将元素放入它在文档布局流中的正常位置——这里没有什么特别的。

css">.positioned {position: static;background: yellow;
}

2.2 相对定位

相对定位定义元素的位置根据其默认位置相对得来

css">		.positioned{position:relative; /*根据初始位置进行调整*/background:yellow;top:30px;

使用top,bottom,left,right进行定位,对于相对位置而言,具体位置与所设定元素为反方向,像一双无形的手推了过去。

这些属性的值可以采用逻辑上期望的任何单位——px、mm、rem、% 等。

2.3 绝对定位

它们指定元素应距离每个包含元素的边的距离,而不是指定元素应该移入的方向。

绝对定位的元素不再存在于正常文档布局流中。相反,它坐在它自己的层独立于一切。

html">.positioned {position: absolute;top:10px;left:10px;background: yellow;
}

2.4 元素重叠处理

当元素开始重叠,我们需要考虑各个元素的层级结构。

让我们想象整个网页是三维空间,网页内容代表X,Y轴,Z轴表示高度

z-index参数应运而生

值影响定位元素位于该轴上的位置;正值将它们移动到堆栈上方,负值将它们向下移动到堆栈中。默认情况下,定位的元素都具有 z-index 为 auto,实际上为 0。

css">z-index: 1; /*元素向上*/

2.5 固定定位

绝对定位将元素固定在相对于其位置最近的祖先。(如果没有,则为初始包含它的块)而固定定位固定元素则是相对于浏览器视口本身。使用鼠标滚动,该定位将会一直保持

css">		h1{position:fixed;top:0;width:500px;margin:0 auto;background:white;padding:10px;}

为了使得首行文本可以看见,定义top-margin即可

2.6 sticky定位

类似于相对位置与固定定位的混合体

它允许被定位的元素表现得像相对定位一样,直到它滚动到某个阈值点(例如,从视口顶部起 10 像素)为止,此后它就变得固定了。

css">		.positioned{position:sticky;top:1px;left:30px;}

top与left表示滑动界面时的固定位置

3. 参考资料

弹性盒子 - 学习 Web 开发 | MDN


http://www.ppmy.cn/news/1527293.html

相关文章

Python 中常见的数据结构(三)

Python 中常见的数据结构&#xff08;三&#xff09; 9. Heap&#xff08;堆&#xff09; 堆是一种特殊的树形数据结构&#xff0c;Python 中&#xff0c;可以使用 heapq 模块创建一个堆&#xff0c;例如&#xff1a; import heapq numbers [1, 3, 5, 7, 9] heap [] for n…

async Lifetimes

async Lifetimes (Jin Qing’s Column, Sep., 2024) From: https://rust-lang.github.io/async-book/03_async_await/01_chapter.html The Future’s lifetime is bounded by the parameter’s. // This function: async fn borrow_x(x: &u8) -> u8 { *x }// Is equ…

手机、平板电脑编程———未来之窗行业应用跨平台架构

一、平板编程优点 1. 便携性强 - 可以随时随地携带平板进行编程&#xff0c;不受地点限制&#xff0c;方便在旅行、出差或休息时间进行学习和开发。 2. 直观的触摸操作 - 利用触摸屏幕进行代码编辑、缩放、拖动等操作&#xff0c;提供了一种直观和自然的交互方式。 …

codeup:将已有文件夹推送到已有仓库

codeup&#xff1a;将已有文件夹推送到已有仓库 总流程git initgit remote add origin https://codeup.aliyun.com/xxx/xxx.gitgit add .git commit &#xff08;会遇到很多问题&#xff09;git push -u origin master &#xff08;会遇到很多问题&#xff09;成功在仓库中添加…

C++数据结构:以不多于3n/2的平均比较次数在顺序表中找出最大值最小值

题目描述&#xff1a;以不多于3n/2的平均比较次数&#xff0c;在一个有n个整数的顺序表中找到最大值和最小值。要求使用的空间尽可能的少。&#xff08;C实现&#xff09; 从本篇文章开始&#xff0c;我们使用C来实现数据结构的相关问题&#xff0c;本题即是C数据结构的一个基…

C++笔记之类间传参的方法

C++笔记之类间传参的方法 参考笔记: 1.C++笔记之静态成员函数可以在类外部访问私有构造函数吗? 2.C++笔记之设计模式:setter函数、依赖注入 3.C++笔记之两个类的实例之间传递参数——通过构造函数传递类对象的方法详细探究 4.C++笔记之智能指针和单例、依赖注入结合使用 5.…

使用streaming-json-py插件处理JSON数据流:详细指南

目录 一、streaming-json-py简介 二、安装与配置 三、基本使用 示例1:处理不完整的JSON对象 示例2:处理不完整的JSON数组 四、高级用法 实时数据流分析 日志处理 五、性能优化与错误处理 六、总结与展望 在数据驱动的现代社会,实时处理数据流已成为许多应用和服务…

Job定时自动执行SQL日志记录脚本

数据库类型&#xff1a; SQL Server 用途&#xff1a; 用于自动记录SQL当天运行的SQL语句及相关事务&#xff0c;对于DB及业务系统维护人员来说还是很有用的 可解决相关问题&#xff1a; 1、当业务数据表中一条重要数据误删之后&#xff0c;要找回该条数据的插入记录用于恢…