js学习-多栏布局、盒布局、弹性盒布局

最新推荐文章于 2024-01-07 10:28:10 发布
最新推荐文章于 2024-01-07 10:28:10 发布
阅读量312 收藏 1
点赞数
分类专栏： js学习 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48235555/article/details/106602050
版权

多栏布局

1、column-count属性

写法：

-webkit-column-count: 栏目数；

-moz-column-count: 栏目数；

2、column-width属性：指定栏目的宽度

-webkit-column-width: 值；

-moz-column-width: 值；

缩小页面时，不会像column-count属性不变栏目数，会根据页面宽度显示恰当的栏目数

3、column-gap属性：指定栏目与栏目之间的距离

-webkit-column-gap: 值；

-moz-column-gap: 值；

4、column-rule属性：栏目与栏目之间的分割线

-webkit-column-rule: solid 2px color ；

-moz-column-rule: solid 2px color ；

与设置边框相似

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>CSS3之前的布局</title>
    <style>
        #div1{
            width: 100%;
            -webkit-column-count:8;
            -moz-column-count:8;
            /*-webkit-column-width:150px;*/
            /*-moz-column-width:150px;*/
            -webkit-column-gap:50px;
            -moz-column-gap:50px;
            -webkit-column-rule:solid 1px #909090;
            -moz-column-rule:solid 1px #909090;
        }
    </style>
</head>
<body>
<div id="div1">column-width属性：指定栏目的宽度
    column-gap属性：指定栏目与栏目之间的距离
    column-rule属性：栏目与栏目之间的分割线
    column-width属性：指定栏目的宽度
    column-gap属性：指定栏目与栏目之间的距离
    column-rule属性：栏目与栏目之间的分割线
    column-width属性：指定栏目的宽度
    column-gap属性：指定栏目与栏目之间的距离
    column-rule属性：栏目与栏目之间的分割线
    column-width属性：指定栏目的宽度
    column-gap属性：指定栏目与栏目之间的距离
    column-rule属性：栏目与栏目之间的分割线
    column-width属性：指定栏目的宽度
    column-gap属性：指定栏目与栏目之间的距离
    column-rule属性：栏目与栏目之间的分割线
    column-width属性：指定栏目的宽度
    column-gap属性：指定栏目与栏目之间的距离
    column-rule属性：栏目与栏目之间的分割线
    column-width属性：指定栏目的宽度
    column-gap属性：指定栏目与栏目之间的距离
    column-rule属性：栏目与栏目之间的分割线
    column-width属性：指定栏目的宽度
    column-gap属性：指定栏目与栏目之间的距离
</div>
</body>
</html>

盒布局

1、使用float和position属性时的缺点

缺点：多栏目时，底部不能对齐

在这里插入图片描述

2、使用盒布局

display: -moz-box;

display: -webkit-box;

在这里插入图片描述

实例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Float属性布局</title>
    <style>
        #centerboy{
            width: 1000px;
            margin: 0 auto;
        }
        div#left{
            float: left;
            width: 300px;
            padding: 10px;
            background-color: green;
        }
        div#right{
            float: right;
            width: 300px;
            padding: 10px;
            background-color: #ff39ca;
        }
        div#conter{
            float: left;
            width: 400px;
            background-color: #0064ff;
        }
    </style>
</head>
    
<body>
<div id="centerboy">
    <div id="left">
        <h2>栏目列表</h2>
        <ul>
            <li><a href="index.html">栏目名称</a> </li>
            <li><a href="index.html">栏目名称</a> </li>
            <li><a href="index.html">栏目名称</a> </li>
            <li><a href="index.html">栏目名称</a> </li>
            <li><a href="index.html">栏目名称</a> </li>
            <li><a href="index.html">栏目名称</a> </li>
            <li><a href="index.html">栏目名称</a> </li>
            <li><a href="index.html">栏目名称</a> </li>
            <li><a href="index.html">栏目名称</a> </li>
            <li><a href="index.html">栏目名称</a> </li>
            <li><a href="index.html">栏目名称</a> </li>
            <li><a href="index.html">栏目名称</a> </li>
        </ul>
    </div>
    <div id="conter">
        <p> 使用盒布局

            display: -moz-box;

            display: -webkit-box;使用盒布局

            display: -moz-box;

            display: -webkit-box; 使用盒布局

            display: -moz-box;

            display: -webkit-box;使用盒布局

            display: -moz-box;

            display: -webkit-box;#### 使用盒布局

            display: -moz-box;

            display: -webkit-box;使用盒布局

            display: -moz-box;

            display: -webkit-box;使用盒布局

            display: -moz-box;

            display: -webkit-box;使用盒布局

            display: -moz-box;

            display: -webkit-box;</p>
    </div>
    <div id="right">
        <h2>推荐文章</h2>
        <ul>
            <li><a href="index.html">推荐文章</a> </li>
            <li><a href="index.html">推荐文章</a> </li>
            <li><a href="index.html">推荐文章</a> </li>
            <li><a href="index.html">推荐文章</a> </li>
            <li><a href="index.html">推荐文章</a> </li>
            <li><a href="index.html">推荐文章</a> </li>
            <li><a href="index.html">推荐文章</a> </li>
            <li><a href="index.html">推荐文章</a> </li>
            <li><a href="index.html">推荐文章</a> </li>
            <li><a href="index.html">推荐文章</a> </li>
            <li><a href="index.html">推荐文章</a> </li>
            <li><a href="index.html">推荐文章</a> </li>
        </ul>
    </div>
</div>
</body>
</html>

在这里插入图片描述

出现上面这样的情况，可以使用box-sizing: border-box;

在这里插入图片描述

#centerboy{
            width: 1000px;
            margin: 0 auto;
            display: -moz-box;
            display: -webkit-box;  /*使得三个div可以底部对齐*/
        }
        div#left{
            /*float: left;*/
            width: 300px;
            padding: 10px;
            background-color: green;
        }
        div#right{
            /*float: right;*/
            width: 300px;
            padding: 10px;
            background-color: #ff39ca;
        }
        div#conter{
            /*float: left;*/
            width: 400px;
            background-color: #0064ff;
        }
        div#left,div#conter,div#right{
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
        }

显示效果：

在这里插入图片描述

弹性盒布局

1、适应窗口的弹性盒布局

box-flex属性，使得div随着浏览器窗口变化而变化

-webkit-box-flex: 1;

-moz-box-flex: 1;
在这里插入图片描述
在这里插入图片描述

2、改变元素的显示顺序

box-ordinal-group属性，可以实现改变元素的显示顺序，浏览器会根据序号的从小到大来显示这些元素

-webkit-box-ordinal-group： 序号;

-moz-box-ordinal-group：序号;

原本三个div的颜色分别是绿 蓝 红，改变序号后是红 绿 蓝。

在这里插入图片描述

3、改变元素的排列方向

-webkit-box-orient：值；

-moz-box-orient：值；

值：horizontal（盒子在水平方向上从左向右排列）/ vertical（盒子从上向下垂直排列）

vertical效果（这张图没有取消前两个div的宽度）：

在这里插入图片描述

4、弹性盒布局的用处

1、在div里加入box-flex属性，可以消除容器内的空白

2、对多个元素使用box-flex属性，可以让容器中的元素的总宽度与总高度都等于容器的高度或者宽度

消除空白：

#centerboy{
            display: -moz-box;
            display: -webkit-box;
            width: 500px;
            height: 300px;
            border: solid 2px #000000;
            -webkit-box-orient: horizontal;
            -moz-box-orient:horizontal; /*盒子水平*/
        }
        div#div1{
            background-color: olivedrab;
        }
        div#div2{
            background-color: #b224ef;
        }
        div#div3{
            background-color: #f46d72;
        }
        div#div1,div#div2,div#div3{
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
        }

在这里插入图片描述

加入-webkit-box-flex: 1;

-moz-box-flex: 1;

		#centerboy{
            display: -moz-box;
            display: -webkit-box;
            width: 500px;
            height: 300px;
            border: solid 2px #000000;
            -webkit-box-orient: horizontal;
            -moz-box-orient:horizontal;
        }
        div#div1{
            background-color: olivedrab;
        }
        div#div2{
            background-color: #b224ef;
            -webkit-box-flex: 1;
            -moz-box-flex: 1;  /*弹性盒布局*/
        }
        div#div3{
            background-color: #f46d72;
        }
        div#div1,div#div2,div#div3{
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
        }

在这里插入图片描述

控制容器高宽度：

#centerboy{
            display: -moz-box;
            display: -webkit-box;
            width: 500px;
            height: 300px;
            border: solid 2px #000000;
            -webkit-box-orient: vertical;
            -moz-box-orient: vertical;
        }
        div#div1{
            background-color: olivedrab;
        }
        div#div2{
            background-color: #b224ef;
        }
        div#div3{
            background-color: #f46d72;
        }
        div#div1,div#div2,div#div3{
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-flex: 1;
            -moz-box-flex: 1;  /*弹性盒布局*/
        }

在这里插入图片描述
在这里插入图片描述

对各个元素进行box-flex属性指定，成比例分布：

div#div1{
            background-color: olivedrab;
            -webkit-box-flex: 1;
            -moz-box-flex: 1;
        }
        div#div2{
            background-color: #b224ef;
            -webkit-box-flex: 2;
            -moz-box-flex: 2;
        }
        div#div3{
            background-color: #f46d72;
            -webkit-box-flex: 3;
            -moz-box-flex: 3;
        }
        div#div4{
            background-color: #0e92b3;
            -webkit-box-flex: 4;
            -moz-box-flex: 4;
        }

在这里插入图片描述

kaka_hikun
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css-guidebook::books: CSS 知识图谱 新特性、属性、布局、响应式、动画
05-24
弹性布局 表格布局 居中布局 水平居中 垂直居中 水平垂直居中 多栏布局 双栏布局 三栏布局 多栏布局 网格布局 网格布局 显式网格属性 隐式网格属性 网格布局术语 网格布局应用 工程化 静态资源 字体文件（WebFont or...
关于前端布局的小技巧-多栏布局（column-count），盒布局，flex布局--这可是我做的最长的文章了！
weixin_49527298的博客
12-01 1434
HTML的布局方式多的不能再多了，而博主我最近也是学了几种简单的，这不，就来分享一些了！ 多栏式布局 盒布局 弹性布局 排列方式，空间的分配 justify-content属性 align-self align-content 多栏式布局 1.为什么需要？ 在我们日常布局中，会经常使用浮动和定位进行布局，就会出现两个元素不能底部对齐的情况。 2.案例介绍。 <!DOCTYPE html> <html lang="en"> <head> <meta chars
关于column-count多列布局出现“列中间有白缝”和“一个内容被切割在两列显示”的解决方法
鸭绒的博客
09-17 2382
1.中间有白缝现象： 我在项目中使用column-count:2，进行瀑布流布局，然后误认为每列的宽度为屏幕的一半，经反复测试发现使用多列布局会有默认的column-gap:30px(值不够准确，但肯定有默认值)的列间隔，这就导致出现白缝： 只要在设置column-count的容器中，使用： -webkit-column-gap: 0px; 这时每列的宽度才是屏幕的一半。 2.内容在两列显示： 为什么会出现这样的原因？应该是它的计算原理：将所有容器的高度求和，然后再除以列数，得出每列显示的内容高度。
关于column-count多列布局内容被切割在下列的解决方法以及瀑布流实现方式
Front小思的博客
05-12 3139
问题：这部分的内容应该是第二列的，但是跑到第三列去了，陷入不合理的！
瀑布流布局之columns属性
小多的博客
09-19 511
columns 是 column-width 与 column-count 的简写属性。columns 属性是一个速记属性设置列宽和列数。
js---弹性布局
qq_39933416的博客
10-20 940
11111111
疯狂HTML 5+CSS 3+JavaScript讲义（第2版）+源代码
11-19
10.4　CSS 3新增的多栏布局 285 10.5　使用弹性盒布局 289 10.6　本章小结 306 第11章　表格、列表相关属性及media query 307 11.1　表格相关属性 308 11.2　列表相关属性 313 11.3　控制光标的属性 316 11.4　media...
水疗按摩网站CSS3滑块模板是一款适合水疗休闲会所的CSS3网站模板。_html网站模板_网页源码移动端前端_H5模板.rar
08-05
5. **多列布局（Multiple Columns）**：CSS3提供了多列布局模式，通过`column-count`、`column-gap`等属性，可以轻松创建报纸般的多栏布局，非常适合内容分隔和展示。 6. **响应式设计（Responsive Design）**：CSS...
博客
02-15
8. **多列布局**：多列布局让创建报纸般的多栏布局变得简单。 9. **颜色和透明度**：RGBA和HSLA颜色模式支持半透明效果，而色彩空间和混合模式则扩展了颜色的使用范围。 10. **3D转换**：通过3D转换，可以创建立体...
website:一个简单的 HTML5CSS3 组合
06-14
3. 多列布局（Multi-column Layout）：通过column-count和column-gap等属性实现杂志式的多栏布局。 4. 弹性盒模型（Flexbox）：提供了一种更为灵活的布局方式，自动调整元素大小和位置。 5. CSS3边框和背景：引入...
利用javascript设定listBox中各Item的上下顺序
海滨望山
11-05 1077
  今天在重写后台管理中的排序操作方式的时候，写了一段运行在客户端的更改设定listBox控件中各个项(Item)的上下顺序的脚本程序，现整理一下儿希望对初学javascript的朋友们有所帮助，当然也请各位js老鸟们不要笑话。　　在帖出代码之前先说些要注意的地方吧： 正常大家在使用此功能的时候其实纯粹的在客户端去调整listBox中Item的上下顺序是没有什么意义的（当然如果你用AJAX
js的几种布局方式
最新发布
m0_73734137的博客
01-07 542
盒模型布局（Box Model Layout）：使用CSS盒模型来进行布局，通过设置元素的宽度、高度、内边距和外边距等属性来调整布局。流式布局（Flow Layout）：也称为自适应布局，它使用CSS的流式布局特性，使元素根据窗口或父容器的大小自动调整位置和大小。网格布局（Grid Layout）：使用CSS的网格布局特性，通过将元素放置在网格容器中，并定义行和列的大小和位置来进行布局。弹性盒子布局（Flexbox Layout）：使用CSS的弹性盒子布局特性，通过设置容器的。属性来控制元素的排列方式。
弹性布局，网格布局，JavaScript
weixin_59310112的博客
08-03 379
弹性盒子布局（Flexbox Layout）：通过display: flex;设置容器为弹性盒子，可以实现更复杂的自适应和响应式布局。 网格布局（Grid Layout）：通过display: grid;设置容器为网格布局，可以将元素划分为一个个网格，并定义网格在容器中的位置和大小。 display属性主要用来决定元素的呈现方式 display:block;/*以块级元素的方式显示*/ display:inline-block;/*在一行中以块级元素的方式显示*/ display:inline;
[JS]列表布局的几种方式
Gamin
12-16 2209
目录 1、监控浏览器宽度即时更新布局 2、浮动布局 document.body.style.margin = "0px"; document.body.style.padding = "0px"; document.body.style.overflow = "auto"; var navView = document.createElement("div"); navView.style.backgroundColor = "blue"; navView.style.width = "10...
JQuery Datatables Columns API 参数详细说明
liuwei890624的博客
06-28 2818
Data Tables: http://datatables.net/ Version: 1.10.0   Columns说明 虽然我们可以通过DOM直接获取DataTables元素的信息，但是DataTables提供了更方便的方法，可以自定义列的属性。下边就让我们一起来学习DataTables是怎么来定义列属性的。 DataTables提供了两个参数来定义列属性：columns ...
JS之弹性盒模型详解
qq_41260655的博客
10-13 2042
弹性盒模型 作用 :用于页面的布局 对于布局之前知道哪些？ 1、display:inline:缺点：文本极限对齐，解析空格 2、浮动：flow（本质：图文混排）：缺点：高度塌陷 3、定位：相对，绝对 弹性布局是父元素控制子元素的布局方案，不需要计算，自动分配 父元素：display:flex //开启弹性盒模型（默认子元素，从左向右排列，（无论块级还是行内元素）） 我们平时： display：block；块级元素本身本质是display:block-block(对外，对内都是表现块级元素) display
Flex弹性盒布局以及JS基础
WJJ_991027gg的博客
08-16 408
以上是我整理的flex弹性盒布局以及js基础知识点
js-div-flex布局-弹性布局-元素居中-盒子水平垂直居中
插件开发
04-04 1083
flex眼中，标签不再分类。简单说就是没有块级元素，行内元素和行内块元素。任何一个元素都可以直接给宽度和高度一行显示。Flex不存在脱标的情况：也就是基本淘汰了浮动，更不用清除浮动。当然存在兼容性问题，如果不考虑兼容性可以大量使用，如果是移动端则不用考虑直接flex。
columns属性——多列布局
热门推荐
MOONCOM的博客
01-15 1万+
columns[ˈkɑ:ləm]                    多列布局 与之相关的属性或子属性如下所示 一、columns             集成column-width和column-count两个属性 二、column-width        定义每列列宽度 属性值如下所示： 1、auto             默认值，自适应 2、长度值           设
js-Flexbox盒子布局
05-24
Flexbox（Flexible Box）是CSS3中的新特性，是一种用于页面布局的模型，它可以让我们更加简单和高效地进行页面布局。下面是使用Flexbox实现盒子布局的步骤： 1. 父容器设置为flex布局 在父容器中，我们需要将其...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值