移动互联网网站建设,高端网站定制建设公司哪家好,WordPress建站要花钱,怎么在网上接网站开发的工作多列布局
概念#xff1a;在CSS3之前#xff0c;想要设计类似报纸那样的多列布局#xff0c;有两种方式可以实现#xff1a;一种是浮动布局#xff0c;另一种是“定位布局”。
这两种方式都有缺点#xff1a;浮动布局比较灵活#xff0c;但不容易控制在CSS3之前想要设计类似报纸那样的多列布局有两种方式可以实现一种是浮动布局另一种是“定位布局”。
这两种方式都有缺点浮动布局比较灵活但不容易控制定位布局可以精准定位但是不够灵活
为了解决这多列布局的难题CSS3新增了一种布局方式-多列布局。多列布局提供了一种多列组织内容的方式可以简单的实现类似报纸格式的布局。
在CSS3中多列布局常用的属性有以下属性
属性值说明column-count定义元素的列数column-width定义每一列的宽度column-gap定义两列之间的距离column-rule定义两列之间的边框样式column-span定义跨列样式
列数column-count
概念column-count属性用来定义多列布局的列数
语法
column-count:auto|number;属性值
属性值说明auto默认值表示列数由column-width属性决定number表示自动划分几列
实例
!DOCTYPE html
htmlheadmeta charsetutf-8title列数/titlestylediv{width:400px;padding:10px;border:1px solid blueviolet;column-count:2;}h1{height:60px;line-height:60px;text-align:center;background-color:rgba(83,199,86,0.6);}p{font-family:仿宋;font: size:16px;}/style/headbodydivh1顾城/h1p命运不是风来回吹命运是大地走到哪里你都在命中。从叶到花或从花到叶于科研是一个过程而于生命自身则永远只在此刻。花和叶都是一种记忆方式果子同时也是种子。生命是闪耀的此刻不是过程就像芳香不需要道路一样。诗是树叶比秋天短比世界长。/ph1史铁生/h1p于是得有一种道路你愿2意为之生也愿意为之死愿意为之累愿意在它的引力下耗尽生命。不是强言不悔是清醒地从命。死亡来临时有一个仪式灰和土都好看往日轻轻地蒸发但同时明白有什么东西沉沉地还在。不求还在现实中但愿还在美丽的位置上。于爱者而言爱情怎么会是悲剧对春天而言秋天是它的悲剧吗/p/div/body
/html运行结果
列宽column-width
概念column-width属性用来定义多列布局中每一列的宽度
语法
column-width:auto|number;属性值
属性值说明auto默认值表示列数由column-count属性决定number表示每列的宽度。值为正数否则属性会无效。单位可以为px、em和百分比等
实例
!DOCTYPE html
htmlheadmeta charsetutf-8title列宽/titlestylediv{width:400px;padding:10px;border:1px solid blueviolet;/* 每一列宽度为100px */column-width:100px;}h1{height:60px;line-height:60px;text-align:center;background-color:rgba(83,199,86,0.6);}p{font-family:仿宋;font: size:16px;}/style/headbodydivh1顾城/h1p命运不是风来回吹命运是大地走到哪里你都在命中。从叶到花或从花到叶于科研是一个过程而于生命自身则永远只在此刻。花和叶都是一种记忆方式果子同时也是种子。生命是闪耀的此刻不是过程就像芳香不需要道路一样。诗是树叶比秋天短比世界长。/ph1史铁生/h1p于是得有一种道路你愿2意为之生也愿意为之死愿意为之累愿意在它的引力下耗尽生命。不是强言不悔是清醒地从命。死亡来临时有一个仪式灰和土都好看往日轻轻地蒸发但同时明白有什么东西沉沉地还在。不求还在现实中但愿还在美丽的位置上。于爱者而言爱情怎么会是悲剧对春天而言秋天是它的悲剧吗/p/div/body
/html运行结果
间距column-gap
概念column-gap属性用于定义元素列与列之间的间距大小
语法
column-gap:normal|number;属性值
属性值说明normal默认值表示浏览器默认长度值number定义列之间的间隔大小。属性值必须是正数。单位可以是px、em和百分比等
实例
!DOCTYPE html
htmlheadmeta charsetutf-8title列宽/titlestylediv{width:400px;padding:10px;border:1px solid blueviolet;/* 定义列数目为2*/column-count:2;/* 定义列间距为100px */column-gap:100px;}h1{height:60px;line-height:60px;text-align:center;background-color:rgba(83,199,86,0.6);}p{font-family:仿宋;font: size:16px;}/style/headbodydivh1顾城/h1p命运不是风来回吹命运是大地走到哪里你都在命中。从叶到花或从花到叶于科研是一个过程而于生命自身则永远只在此刻。花和叶都是一种记忆方式果子同时也是种子。生命是闪耀的此刻不是过程就像芳香不需要道路一样。诗是树叶比秋天短比世界长。/ph1史铁生/h1p于是得有一种道路你愿2意为之生也愿意为之死愿意为之累愿意在它的引力下耗尽生命。不是强言不悔是清醒地从命。死亡来临时有一个仪式灰和土都好看往日轻轻地蒸发但同时明白有什么东西沉沉地还在。不求还在现实中但愿还在美丽的位置上。于爱者而言爱情怎么会是悲剧对春天而言秋天是它的悲剧吗/p/div/body
/html运行结果
边框column-rule
概念column-rule属性定义列与列之间的边框样式
语法
column-rule:width style color;属性值
属性值说明width定义边框的宽度style定义边框的样式color定义边框的颜色
column-rule属性是一个复合属性由3个子属性组成。
column-rule-width定义边框的宽度。column-rule-style定义边框的样式。column-rule-color定义边框的颜色。 说明用法跟border属性基本上是一样的 实例
!DOCTYPE html
htmlheadmeta charsetutf-8title边框/titlestylediv{width:400px;padding:10px;border:1px solid orange;/* 定义列数目为2*/column-count:2;/* 定义列间距为100px */column-gap:100px;/* 定义列之间的边框样式 */column-rule:1px solid blueviolet;}h1{height:60px;line-height:60px;text-align:center;background-color:rgba(83,199,86,0.6);}p{font-family:仿宋;font: size:16px;}/style/headbodydivh1顾城/h1p命运不是风来回吹命运是大地走到哪里你都在命中。从叶到花或从花到叶于科研是一个过程而于生命自身则永远只在此刻。花和叶都是一种记忆方式果子同时也是种子。生命是闪耀的此刻不是过程就像芳香不需要道路一样。诗是树叶比秋天短比世界长。/ph1史铁生/h1p于是得有一种道路你愿2意为之生也愿意为之死愿意为之累愿意在它的引力下耗尽生命。不是强言不悔是清醒地从命。死亡来临时有一个仪式灰和土都好看往日轻轻地蒸发但同时明白有什么东西沉沉地还在。不求还在现实中但愿还在美丽的位置上。于爱者而言爱情怎么会是悲剧对春天而言秋天是它的悲剧吗/p/div/body
/html运行结果
跨列column-span
概念column-span属性来实现多列布局的跨列效果
语法
column-span:none|all;属性值
属性值说明none表示元素不跨多个列。all表示元素横跨所有列。元素出现之前出现在元素之前的正常流中的内容在所有列之间自动平衡。该元素建立一个新的区块格式化上下文。
实例
!DOCTYPE html
htmlheadmeta charsetutf-8title跨列/titlestylediv{width:400px;padding:10px;border:1px solid orange;column-count:2;column-gap:100px;column-rule:1px solid blueviolet;}h1{height:60px;line-height:60px;text-align:center;background-color:rgba(83,199,86,0.6);/* 该元素横跨所有列 */column-span:all;}p{font-family:仿宋;font: size:16px;}/style/headbodydivh1顾城/h1p命运不是风来回吹命运是大地走到哪里你都在命中。从叶到花或从花到叶于科研是一个过程而于生命自身则永远只在此刻。花和叶都是一种记忆方式果子同时也是种子。生命是闪耀的此刻不是过程就像芳香不需要道路一样。诗是树叶比秋天短比世界长。/ph1史铁生/h1p于是得有一种道路你愿2意为之生也愿意为之死愿意为之累愿意在它的引力下耗尽生命。不是强言不悔是清醒地从命。死亡来临时有一个仪式灰和土都好看往日轻轻地蒸发但同时明白有什么东西沉沉地还在。不求还在现实中但愿还在美丽的位置上。于爱者而言爱情怎么会是悲剧对春天而言秋天是它的悲剧吗/p/div/body
/html运行结果 在该实例中column-span:all属性使得标题h1跨越所有的列。
