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

最新推荐文章于 2024-08-10 17:13:35 发布

ass_ace

最新推荐文章于 2024-08-10 17:13:35 发布

阅读量4.2k

点赞数 3

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

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

版权

本文介绍了CSS3的三种布局模式：多栏布局、盒布局和弹性盒布局，详细讲解了它们的特点、相关属性及使用场景。通过实例展示了如何使用这些布局模式解决页面底部不对齐问题，以及如何实现元素的自适应性。同时，还探讨了不同布局模式间的区别，如多栏布局适合显示文章内容，弹性盒布局则能更好地适应元素大小变化。

摘要由CSDN通过智能技术生成

使用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>

运行结果如下：