怪异盒子及弹性盒和多列

cendy-LL

已于 2023-11-05 12:32:01 修改

阅读量427

点赞数 4

分类专栏： HTML+CSS 文章标签： css css3 前端

于 2023-11-04 19:28:09 首次发布

本文链接：https://blog.youkuaiyun.com/2301_80864686/article/details/134222091

版权

HTML+CSS 专栏收录该内容

20 篇文章

订阅专栏

怪异盒子及弹性盒和多列

怪异盒子

一、盒子模型

1、含义：主要是用来调整盒子与盒子之间间距,计算盒子所占空间的大小

2、分类：标准盒子模型、怪异盒子模型

3、组成部分

（1）content===内容区域(width,height)

（2）padding===内边距(边框和文本之间的间距)

（3）border====盒子的边缘,边界线

（4）margin====外边距

二、标准盒子模型

1、属性：box-sizing

2、属性值：content-box

3、标准盒子模型计算大小:

（1）实际宽度=width+2×padding+2×border+2×margin (左右)

（2）实际高度=height+2×padding+2×border+2×margin (上下)

三、怪异盒子模型

1、属性：box-sizing

2、属性值：border-box

3、怪异盒子模型计算大小:

（1）实际宽度=CSS.width(内容+padding)+2×margin (左右)

（2）实际高度=CSS.height(内容+padding)+2×margin (上下)

备注：怪异盒子即为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制；通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度

弹性盒子相关属性

一、弹性盒子基础

1、概念：是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式

2、如何触发：给父元素添加display属性, 并且将取值设置成:flex，影响的是子元素

display:flex;

3、触发弹性盒子的特点：

（1）子元素默认横向显示

（2）子元素会默认变成块级元素, 能设置宽度高度

（3）如果只有一个子元素的话, 则给子元素添加margin:auto的时候，会让子元素直接实现水平垂直居中显示

二、弹性盒子概念

1、容器:父元素;给父元素触发弹性盒子

2、项目:子元素,父元素触发弹性盒子之后,影响的都是子元素

3、横轴:水平方向的轴线

4、纵轴:垂直方向的轴线

5、主轴(重点):触发弹性盒子之后,子元素的排列方向

6、侧轴(重点):触发弹性盒子之后,与主轴对立的方向

备注：

1、触发弹性盒子之后, 项目默认沿主轴排列

2、移动端布局里面/flex布局/弹性盒子布局里面最主要的就是按照轴线进行布局

三、容器中的属性

1、触发弹性盒子

（1）属性：display

（2）属性取值：flex

（3）注意:触发弹性盒子之后,子元素默认横向排列，因此主轴是横向、侧轴是纵向

（4）示例：

.box{
    width: 500px;
    height: 500px;
    border:5px solid gray;
    margin:100px auto;
    /* 触发弹性盒子 */
    display: flex;        
}

2、修改主轴方向（即项目的排列方向）

（1）属性：flex-direction

（2）属性取值：

row----------------------横向（从左至右），默认值
column------------------纵向（从上至下）
row-reverse-------------横向（从右至左），主轴在横向，项目反方向排列
column-reverse---------纵向（从下至上），主轴在纵向，项目反方向排列

（3）示例：

/* 容器 */
.box {
    width: 500px;
    height: 500px;
    border: 5px solid gray;
    margin: 100px auto;
    /* 1.触发弹性盒子 */
    display: flex;
    /* 2.修改主轴方向 */
    flex-direction: column-reverse;
}

3、调整主轴上面的对齐方式

（1）目的：调整项目之间的间距

（2）属性：justify-content

（3）属性取值：

flex-start----------------主轴的开始位置（项目没有分开），默认位置
flex-end-----------------主轴的结束位置（项目没有分开）
center--------------------主轴的居中位置（项目没有分开）
space-around----------两端环绕（项目与项目左右都有间距，项目与项目之间的距离是贴边项目距离父元素之间距离的2倍）
space-between--------主轴两端对齐（首尾贴边，中间的距离进行均分）

（4）示例：

/* 容器 */
.box {
    width: 500px;
    height: 500px;
    border: 5px solid gray;
    margin: 100px auto;
    /* 1.触发弹性盒子 */
    display: flex;
    /* 2.调整主轴上面的对齐方式 */
    justify-content: space-around;
}

4、调整侧轴上面的对齐方式(单行侧轴对齐方式)

（1）目的：调整侧轴上面的对齐方式

（2）属性：align-items

（3）属性取值：

flex-start-------侧轴的开始位置，默认位置
flex-end--------侧轴的结束位置
center-----------侧轴的居中位置
stretch----------默认侧轴的开始位置，若没有高度的话，默认是拉伸到父元素的高度
baseline--------侧轴的基线位置，与flex-start效果一致

（4）示例：

/* 容器 */
.box {
    width: 500px;
    height: 500px;
    border: 5px solid gray;
    margin: 100px auto;
    /* 1.触发弹性盒子 */
    display: flex;
    /* 2.调整侧轴上面的对齐方式 */
    align-items: center;
}

5、项目折行

（1）起因：如果子元素或者是项目过多的话，当父元素（容器）触发弹性盒子之后，子元素横向显示，不会溢出盒子，但是会失去宽度被挤压（默认效果不折行）

（2）属性：flex-wrap

（3）属性取值：

nowrap-------不折行
wrap----------折行

（4）示例：

/* 容器 */
.box {
    width: 500px;
    height: 500px;
    border: 5px solid gray;
    margin: 100px auto;
    /* 1.触发弹性盒子 */
    display: flex;
    /* 2.折行 */
    flex-wrap: wrap;
}

备注：

1、添加折行之前:

默认不折行，是有挤压效果的，且会失去宽度

2、添加折行之后:

（1）默认是高度均分的；----显示很多留白的原因是因为给子元素设置了高度

（2）不给项目高度的话，默认是拉伸的，高度均分

（3）折行之后，如果子元素有高度的话，则会产生一个比较大的间距(行间距)

6、项目折行后的行间距(多行侧轴对齐方式)

（1）目的：调整多行侧轴中的对齐方式

（2）属性：align-content

（3）属性取值：

flex-start-----------------侧轴的开始位置（没有行间距），经常使用
flex-end------------------侧轴的结束位置（没有行间距）
center--------------------侧轴的中间位置（没有行间距）
space-around----------行间距环绕（行与行之间的距离，是贴边行与父元素之间距离的2倍）
space-between--------侧轴的两端对齐（第一行和最后一行贴边显示，中间行间距自动分配）

（4）示例：

/* 容器 */
.box {
    width: 500px;
    height: 500px;
    border: 5px solid gray;
    margin: 100px auto;
    /* 1.触发弹性盒子 */
    display: flex;
    /* 2.折行 */
    flex-wrap: wrap;
    /* 3.调整行间距 */
    align-content: space-between;
}

四、项目中的属性

1、调整顺序

（1）目的：调整显示顺序，更改位置

（2）属性：order

（3）属性取值：数值，无单位

（4）示例：

/* 容器 */
.box{
    width: 500px;
    height:500px;
    border:10px solid gray;
    margin:100px auto;
    /* 触发弹性盒子 */
    display: flex;
    /* 调整主轴位置 */
    flex-direction: row-reverse;
}
/* 项目 */
p{
    width: 50px;
    height:50px;
    border:2px dashed red
}
/* 调整位置 */
p:nth-child(1){
    order: 1;
} 
p:nth-child(2){
    order:-1
}
p:nth-child(6){
    order:-2
}

（5）备注：

order取值越大，位置越靠后面（取值可以为正数也可以为负数）
默认的排列的顺序为order:auto-----等价于0，即从左向右显示
以主轴最开始位置算起

2、占剩余宽度剩余高度所有

（1）目的：调整剩余宽/高的长度

（2）属性：flex

（3）属性取值：1

（4）示例：

.box {
    width: 500px;
    height: 500px;
    border: 10px solid gray;
    /* 触发弹性盒子 */
    display: flex;
    flex-direction: column;
}
p {
    width: 50px;
    border: 2px dashed red;
}
        
/* 占剩余高度的所有 */
p:nth-child(1) {
    flex: 1;
}
p:nth-child(2) {
    flex: 2;
}
p:nth-child(3) {
    flex: 3;
}

注意事项:
1、主轴在横向:项目不设置高度的话,则高度是拉伸的
2、主轴在纵向:项目不设置宽度的话,则宽度是拉伸的
3、调整剩余宽高时，若要使得项目均分，则各项目中flex取值一样即可

3、不挤压不折行

（1）目的：弹性盒子中项目太多时，默认会进行挤压，该属性可实现不挤压不折行

（2）属性：flex-shrink

（3）属性取值：

0-----实现不挤压不折行
1-----默认值，默认被挤压不折行

（4）示例：

.box {
    width: 500px;
    height: 500px;
    border: 10px solid gray;
    margin: 100px auto;
    /* 触发弹性盒子 */
    display: flex;
    overflow: auto;
}
p {
    width: 50px;
    height: 50px;
    border: 2px dashed red;
    /* 不挤压不折行 */
    flex-shrink: 0;
}

应用场景：移动端横向滚动条

4、单独项目侧轴对齐方式

（1）目的：调整每个项目侧轴上面的对齐方式

（2）属性：align-self

（3）属性取值：

flex-start--------侧轴的开始位置，默认位置
flex-end---------侧轴的结束位置
center-----------侧轴的居中位置
stretch-----------默认侧轴的开始位置，若没有高度的话，默认是拉伸到父元素的高度
baseline---------侧轴的基线位置，与flex-start效果一致

（4）示例：

/* 容器 */
.box {
    width: 500px;
    height: 500px;
    border: 10px solid gray;
    margin: 100px auto;
    /* 触发弹性盒子 */
    display: flex;
}
/* 项目 */
p {
    width: 50px;
    /* height: 50px; */
    border: 2px dashed red;
}
p:nth-child(1) {
    /* 侧轴的开始位置 */
    align-self: flex-start;
}
p:nth-child(2) {
    /* 侧轴的居中位置 */
    align-self: center;
}
p:nth-child(3) {
    /* 侧轴的结束位置 */
    align-self: flex-end;
}
p:nth-child(4) {
    /* 侧轴的拉伸 */
    align-self: stretch;
}
p:nth-child(5) {
    /* 侧轴的基线位置 */
    align-self: baseline;
}

多列布局

一、多列布局概念

1、含义：多列布局以列数进行划分，类似于多栏布局

2、实现效果：报纸,、杂志等

二、多列布局属性

1、父元素相关属性

（1）划分列数— column-count：分栏的个数

（2）调整列宽— column-width：分栏的宽度

（3）调整列间距— column-gap：分栏的间距

（4）设置列间隔线— column-rule：分栏的边框

（5）检索列的高度— column-fill：balance(均分)/auto(自动撑满)

备注：

1、列宽如果设置的过小的话，不会影响列数，但是列宽如果设置的较宽的话会影响列数

2、列间距一般不调整,使用默认值（系统自动分栏的列间距基本是最合适的）

3、列间隔线类似于边框,相当于是一个复合属性

4、默认列的高度是均分的，column-fill有两个取值，一个是balance，即列高均分；一个是auto，即撑满整个父元素

2、子元素相关属性

（1）跨列显示— column-span：all(跨列)/none(不跨列)

（2）定义页面、列或区域发生中断时候的元素该如何表现— break-inside

break-inside: auto;--------------元素可以中断
break-inside: avoid;-------------元素不能中断（即子元素不能折行显示）

3、代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .bigbox {
            height: 500px;
            text-align: justify;
            border: 10px solid gray;
            /* 划分列数 */
            column-count: 4;
            /* 调整列宽 */
            /* 如果设置的过小的话,不会影响列数,但是你的列宽如果设置的较宽的话会影响列数 */
            /* column-width: 200px; */
            /* 调整列间距 */
            /* 注释: 列间距一般不调整,使用默认值 */
            column-gap:100px;
            /* 设置列间隔线 */
            /* 列间隔线类似于边框,相当于是一个复合属性 */
            column-rule: 2px dashed red;
            /* 检索列的高度 */
            /* 默认的列的高度是均分的 */
            /* column-fill检索列的高度是否均分,或者是占父元素的所有的高度 */
            /* balance==均衡,登高;  auto===自动,会撑满整个父元素 */
            /* column-fill: balance; */
        }
        /* 设置跨列====子元素上面的属性 */
        h1{
            column-span: all;
            text-align: center;
            background-color: orange;        }
    </style>
</head>
<body>
    <!-- 划分多列布局:
            按照区块进行划分,可以理解成按照列数进行布局
    -->
    <div class="bigbox">
        <h1>我是该模块的主题</h1>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste amet repellendus recusandae? Odio quisquam magnam eius reprehenderit quaerat harum deleniti praesentium accusantium exercitationem voluptate consequatur, repudiandae minus unde non inventore.Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste amet repellendus recusandae? Odio quisquam magnam eius reprehenderit quaerat harum deleniti praesentium accusantium exercitationem voluptate consequatur, repudiandae minus unde non inventore.Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste amet repellendus recusandae? Odio quisquam magnam eius reprehenderit quaerat harum deleniti praesentium accusantium exercitationem voluptate consequatur, repudiandae minus unde non inventore.Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste amet repellendus recusandae? Odio quisquam magnam eius reprehenderit quaerat harum deleniti praesentium accusantium exercitationem voluptate consequatur, repudiandae minus unde non inventore.Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste amet repellendus recusandae? Odio quisquam magnam eius reprehenderit quaerat harum deleniti praesentium accusantium exercitationem voluptate consequatur, repudiandae minus unde non inventore.Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste amet repellendus recusandae? Odio quisquam magnam eius reprehenderit quaerat harum deleniti praesentium accusantium exercitationem voluptate consequatur, repudiandae minus unde non inventore.Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste amet repellendus recusandae? Odio quisquam magnam eius reprehenderit quaerat harum deleniti praesentium accusantium exercitationem voluptate consequatur, repudiandae minus unde non inventore.Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste amet repellendus recusandae? Odio quisquam magnam eius reprehenderit quaerat harum deleniti praesentium accusantium exercitationem voluptate consequatur, repudiandae minus unde non inventore.Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste amet repellendus recusandae? Odio quisquam magnam eius reprehenderit quaerat harum deleniti praesentium accusantium exercitationem voluptate consequatur, repudiandae minus unde non inventore.
    </div>
</body>
</html>