CSS基础知识介绍——CSS 3新增的多列布局

最新推荐文章于 2024-05-27 07:00:00 发布
最新推荐文章于 2024-05-27 07:00:00 发布
阅读量266 收藏
点赞数
分类专栏： DIV+CSS 文章标签： colum-role colum-span column-width column-gap column-count
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37196494/article/details/98510068
版权

1.column-count属性：用于设置或检索对象的列数，设置等高的文本列

语法如下：
column-count：auto | 整数

2. column-width属性：用于定义分列布局中每列的固定宽度

语法如下：
column-width：auto | length

3. column-gap属性：用于定义分列布局中每列之间的间隔宽度

语法如下：
column-gap：normal | length

4.column-span属性：定义元素跨列显示，也可以设置元素单列显示

语法如下：
column-span：1 | all

5. column-role属性：用来定义列与列之间的边框宽度、样式、颜色的属性

语法如下：
column-role：length | style | color

 

混吃混喝的废物
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS—新增标签标签
qq_43599049的博客
03-23 791
1 语义化标签 以前的布局基本用div来做，div对于搜索引擎来说，是没有语义的。HTML5新增语义化标签： header头部标签 nav导航标签 article内容标签 section定义文档某个区域 aside侧边栏标签 footer尾部标签 在IE9中需要将这些元素转换为块级元素 2 新增多媒体标签 新增的多媒体标签主要包含两个： 1、音频：<audio> 2、视频：<video> 使用它们可以很方便的在页面中嵌入音频和视频，而不再去使用flash和其他浏览器插件。 (
CSS3基础知识个人总结
ZeroTwoZRX的博客
04-18 541
权重，选择器，边框，边框圆角，背景，浮动，盒子模型，文本溢出，伪类，定位，表格，自适应，元素隐藏，满屏布局，阴影，渐变，浏览器前缀，过渡，动画，transition，transform，animation。
css3新增属性：多列(column)
weixin_33976072的博客
04-12 181
css3多列能够创建多个列来对文本进行布局，就想报纸那样。 关于多列的相关属性及属性值如下： column-count: number|auto;：指定元素应分为的列数。column-fill: 指定如何填充列balance：(默认)列的高度尽量均衡auto： 顺序填充内容高度可能差距很大。 column-gap: 指定列之间的间距。length： 一个指定的长度，将设置列之间的差距...
CSS3新增布局效果
Missy_xw2018的博客
06-20 301
盒模型：box-sizing （1）content-box：设置的width属性值仅仅是内容的宽度。 （2）border-box：设置的width属性值就是盒子最终的宽度，包含了border、padding和内容。 颜色： rgb(红,绿,蓝);//取值都在0~255 hsl(颜色[0~360],饱和度[0%~100%],明度[0%~100%]) opacity：透明度，取值0~1，子元素会继...
HTML5+css3新增布局元素整理
pshdhx的博客
07-10 161
HTML5新增的语义化标签 <head>：头部标签 <nav>：导航标签 <article>：内容标签 <section>：定义文档某个区域 <aside>：侧边栏标签 <footer>：尾部标签 注意： 这种语义化标准主要是针对搜索引擎的； 这些新标签页面中可以使用多次； 在IE9中，需要把这些元素转换为块级元素； 其实，我们移动端更喜欢这些标签 HTML5还新增了很多其他标签 例如：视频<audi.
CSS3多列布局columns相关属性
尐轩web前端网络日志
11-20 3714
CSS3中增加了可以实现多列布局的属性 在此之前的实现很麻烦可能需要各种定位 现在我们只需要一个属性就可以实现 多列布局类似于我们的报纸布局 这样可以方便读者观看多列数量与多列宽度如果一行文字太长的话，我们可能会没有读下去的欲望像这样<div class="demo">......</div>.demo { width: 600px; height: 200px; b
CSS3基础知识
最新发布
厚积薄发
05-27 364
一段动画，就是一段时间内连续播放 n 个画面。每一张画面，我们管它叫做“帧”。一定时间内连续快速播放若干个帧，就成了人眼中所看到的动画。同样时间内，播放的帧数越多，画面看起来越流畅。关键帧指的是，在构成一段动画的若干帧中，起到决定性作用的 2-3 帧。2009 年， W3C 提出了一种新的盒子模型 —— Flexible Box （伸缩盒模型，又称：弹性盒子）。它可以轻松的控制：元素分布方式、元素对齐方式、元素视觉顺序 .......截止目前，除了在部分 IE 浏览器不支持，其他浏览器均已全部支持。
css——之三行三列等高布局图文教程
10-30
本文将详细介绍如何使用CSS实现三行三列等高布局，并提供了详细的图文教程。 一、创建结构 首先，我们需要创建一个基本的HTML结构，包括header、container和footer三个部分。 ```html <div id="header"></div> ...
使用CSS3实现多列布局与多背景的技巧
09-24
主要介绍了使用CSS3实现多列布局与多背景的技巧,包括多列栏目的高度平衡和多间隙等一些细节方面的调整方法讲解,需要的朋友可以参考下
css设置多列等高布局的方法示例
09-22
Flexbox是CSS3引入的一种布局模式，特别适合处理多列等高布局。通过设置`display: flex`，我们可以将容器转换为弹性盒子容器，其子元素成为flex项。`flex-direction`属性用于定义主轴的方向，默认为`row`，即水平...
CSS 多列布局问题简单解决方案
09-25
纯 CSS 打造多列等高并不像想象中那么...本文着重讲述多列布局出现的问题，之后提供一个在所有浏览器都正常工作的简单解决方案。这个方法 100% 无 CSS hack，无图片，无 javascript，甚至可以用在最严格编码的网站上。
HTML基本常识——分区标签（div，span）
qq_37196494的博客
07-12 5765
在HTML文档中常用的分区标签有两个：div标签（主讲这个）、span标签 1.div标签：区域标签（容器标签），用来作为多种html标签组合的容器，对该区域块进行操作和设置 div标签不能嵌套在p标签对中 2.span标签：用来做为片段文字图片等简短内容的容器标签 span标签不能嵌套在其他的封闭级元素中 区别： span是文本...
CSS基础知识介绍——CSS定义图片样式
qq_37196494的博客
08-01 3401
1. 定义图片边框 语法如下： <img src="图片路径" border="数值"> border-style、border-color、border-width border-style的取值列表 参数名 含义 none 无样式 solid 实线 outset 外凸 groove 槽线 dotted ...
HTML基本常识——图像标签 img
qq_37196494的博客
07-12 840
<img src="......"> 1.alt: 指定当鼠标在图片停留时，图片将会上现实的提示性的文本。 2.align：指定图片和他周围文本的对齐方式 3.border：指定图片的边框宽度 4.width、height：指定图片在浏览器显示的宽/高度 PS：alt属性指定了替代文本，用于在图像无法显示或者用户禁用图像显示时，代替图像显示在浏览器中的...
解决CSS开发中的常见问题——浏览器不兼容
qq_37196494的博客
08-17 607
1.字体大小不兼容：各个浏览器对字体大小small的定义不同，所以效果不一样 比如：IE浏览器small定义为16px，而firefox浏览器定义为13px 解决方法：在页面中设置文字大小时，不要使用small设置大小，直接设置具体数值大小 2. div里的float悬浮问题：在网页中不同浏览器设置多个float（多块），可能浮动不一致 比如：firefox浏览器没有清除上一个float，...
CSS基础知识介绍——表单样式
qq_37196494的博客
08-04 534
表单基础元素 表单元素说明表 元素名 元素作用 input 文本输入框 textarea 可以容纳多行输入的文本输入框 select 下拉菜单 1.输入域标签——input:主要收集用户的信息 <form> <input type="filed_name" name="type_name"> &...
CSS基础知识介绍——CSS排版
qq_37196494的博客
08-16 523
1. 设计上中下版式的样式 <!DOCTYPE html> <html> <head> <title>CSS</title> <style type="text/css"> body{font-family: "宋体";font-size: 12px;} .big{width: 800px;margin: 0 au...
CSS基础知识介绍——css3新增的背景属性
qq_37196494的博客
08-02 448
1. background-size属性：控制背景图像的大小 语法如下： background-size：auto | length | percentage | cover | contain PS：如果用户使用的是Firefox浏览器，需使用“moz-background-suze”或“background-size”的形式。如果用户使用的是Webkit引擎支持的浏览器，需使用“web...
1.09 css3-布局
10-07
本章节主要讲解的是CSS3中的高级布局技术，特别是针对多列布局（Multi-column Layout），这是在网页设计中实现内容优化和阅读体验的重要工具。CSS3的多列布局模块引入了一套用于创建多列文本容器的属性，使得设计师...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值