CSS3学习笔记——多栏布局、盒布局、弹性盒布局

最新推荐文章于 2021-02-09 11:41:42 发布

ass_ace

最新推荐文章于 2021-02-09 11:41:42 发布

阅读量4.2k

点赞数 3

分类专栏：前端之CSS3 文章标签：多栏布局盒布局弹性盒布局

本文链接：https://blog.csdn.net/baidu_39067385/article/details/81979134

版权

使用float或position属性进行页面布局的缺点

两个块区域是各自独立的，如果在其中一个区域加入一些内容，将会使两个元素的底部不对齐，导致页面多出一块空白区域。

如下例所示，第一个DIV中有图像元素，篇幅比较大：

多栏布局

使用多栏布局可以将一个元素中的内容分为两栏或多栏显示，并且确保各栏中内容底部对齐；

多栏布局的相关属性：

1）column-count：将一个元素中的内容分为多栏进行显示。

2）column-width：单独设置每一栏的宽度而不设定元素的宽度；（需要在元素外面单独设立一个容器元素，指定容器元素的宽度）

3）width：元素的宽度，即，多个栏目的总宽度；

4）column-gap：设定多栏之间的间隔距离；

5）column-rule：在栏与栏之间增加一条间隔线，并且设定该间隔线的宽度、颜色等；

以上的各个属性，在Firefox浏览器中要添加前缀 “-moz-”;

在Safair、chrome或Opera浏览器中需要添加前缀 “-webkit-”;

在IE浏览器中，不需要添加浏览器供应商前缀；

<style type="text/css">
div#container{
    width:42em;
}
div#div1{
    /* 栏数 */
    column-count: 2;
    -moz-column-count: 2;        
    -webkit-column-count: 2;
    /*每栏宽度  column-width需要有容器元素并设置宽度 */
    column-width:20em;
    -moz-column-width:20em;
    -webkit-column-width:20em;
    /* 栏与栏之间的距离 */
    column-gap:2em;
    -moz-column-gap:2em;
    -webkit-column-gap:2em;
    /* 栏的间隔线 */
    column-rule: 1px dashed blue;
    -moz-column-rule: 1px dashed blue;
    -webkit-column-rule: 1px dashed blue;
}
div#div3{
    width:100%;
    background-color:yellow;
    height:200px;
}
</style>
</head>
<body>
<div id="container">
<div id="div1">
<img src="test.jpg">
<p>示例文字1。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。</p>
<p>示例文字2。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。</p>
</div>
<div id="div3">
页面中其他内容
</div>
</div>

运行结果如下：

盒布局

同样可以解决页面布局时底面不对齐的问题；

通过box属性来使用盒布局，在Firefox浏览器中，需要书写成：“-moz-box”，在Safari、Chrome、Opera浏览器中需要书写成：“-webkit-box”；

<style type="text/css">
#container{
	display: box;
	display: -moz-box;
	display: -webkit-box;
}
#left-sidebar{
	width: 200px;
	padding: 20px;
	background-color: orange;
}
#cont

最低0.47元/天解锁文章

ass_ace

关注

3
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
CSS3学习笔记——多栏布局、盒布局、弹性盒布局

使用float或position属性进行页面布局的缺点两个块区域是各自独立的，如果在其中一个区域加入一些内容，将会使两个元素的底部不对齐，导致页面多出一块空白区域。如下例所示，第一个DIV中有图像元素，篇幅比较大：多栏布局使用多栏布局可以将一个元素中的内容分为两栏或多栏显示，并且确保各栏中内容底部对齐；多栏布局的相关属性： 1）column-count：将...
复制链接

扫一扫