526互联

CSS进阶2-弹性布局-弹性盒子

发布时间 2023-12-01 16:46:30作者: 学Java的`Bei

 

　　　　本节重点：

      • 弹性布局（弹性盒子）
      • BFC布局/规范
      • CSS新属性，不包含边框和内边距
      • CSS3的拓展：普通盒模型，怪异盒子模型(IE)

 

 在学习弹性布局前，我们学过Float 浮动 和 Position 定位，浮动会出现一些 ‘诡异’ 的事情，定位则用起来相对麻烦，弹性布局用起来就会很舒服。

1.弹性布局

　　介绍：

　　弹性布局、弹性盒子：让容器有能力来改变项目的宽度和高度。

　　属性：

  • 　　display：flex; 弹性布局 

　　　　属性： justift-content (重点) 

　　　　　　justift-content：space-between；向两端对齐，中间自适应  

代码：

/* 定义三个盒子嵌套 box1->box2->box3*3 */
/* 定义盒子1 */
.box1{
    width: 1500px;
    height: 750px;
    border: 5px solid black;
    background-color: #f0f0f0;
}

/* 定义盒子2 */
.box2{
    width: 700px;
    height: 720px;
    border: 5px solid black;
    margin: 0px auto; /* 盒子1居中页面 */

    /* 给盒子2设置为 弹性 */
    display: flex;
    /* 向两端对齐，中间自适应 */
    justify-content: space-between;
}

/* 定义盒子2 */
.box3{
    width: 200px;
    height: 200px;
    border: 5px solid purple;

    /* 使字体醒目一点 */
    font-size: 22px;
    color: red;

    /* 导入背景 */
    background-image: url(https://img0.baidu.com/it/u=827880900,1079603570&fm=253&fmt=auto&app=120&f=JPEG?w=200&h=200);

}

视图：

 

　　　　　　justift-content：space-around；均匀分布，两边空出的距离等于中间距离  

代码：

  /* 均匀分布，边上空出的距离等于中间的距离 */ justify-content: space-around; 

视图：

 

　　　　　　justift-content：space-evenly；平等均匀分布，距离完全一样一样  

代码：

 /* 平等均匀分布，距离完全一样 */ justify-content: space-evenly; 


　　　　　　justift-content：flex-start/end；默认分布 从弹性 开始的地方/结束的地方分布  

代码：

　　/* 默认分布 从弹性 开始的地方分布 */
    /* justify-content: flex-start; */

    /* 默认分布 从弹性 结束的地方 分布 */
    /* justify-content: flex-end; */

 

 

　　RGBA（红，绿，蓝，透明度(1-0)）0为透明，1为不透明；

代码：

/* color盒子 */
.color{
    width: 500px;
    height: 400px;
    border: 10px solid red;

    /* alpha：1-0（0为透明，1为不透明） */
    /* background-color: rgba(red, green, blue, alpha);  */
     background-color: rgba(10, 55, 100, 0);
}

 

视图：

 

 

 

  • 　　排列顺序：-reverse(反转布局)

　　　　　　   flex-direction:column(纵)--reverse
　　　　　　flex-direction:row(横-默认)--reverse

代码：  /* 反转排列--> 纵向排列 */ flex-direction: column-reverse;　

/* 反转排列--> 纵向排列 */ flex-direction: row-reverse; 

视图：

 

 

  • 　　换行 ：
    • 　多个盒子多行均匀分布时，可用换行。

　　　　　　flex-wrap：nowrap--默认不换行；
　　　　　 flex-wrap：wrap--换行
代码：  /* 默认不换行 */ flex-wrap: nowrap;　　 /* 换行 */ flex-wrap: wrap; 

 

视图：

 

  • 　　竖向排列方式：（当前盒子必须有一定高度）

　　　　

　　　　① aling-items：center；居中 * 两边空出间距等于中间间距

　　　　　　　　　　　　：flex-start/end--竖向排列默认弹性开始

　　　　② align-content：center；---与竖向排列剧中同样的效果

　　　　　　　　　　　　　　不同1. 搭配换行(wrap)使用，垂直方向紧密排列
　　　　　　　　　　　　　　不同2. aling-items-垂直方向排列居中，有间距

　　　　代码：  /* 居中 * 两边空出间距等于中间间距 */ align-items: center; align-content: center; 

　　　　视图：

　　　　

 

 

　　流体定位布局：相对、绝对、粘性（会受滚动条影响）
　　固定定位布局：（不会随滚动条影响）

 

 

2.多列布局：column

　　属性：

　　　　column-count：值；（此处值为列数）
　　　　column-rule：style(线条样式)；--设置线条样式。
　　　　column-rule-width：值px;-设置线条粗细。

代码：

.column{
    width: 700px;
    height: 200px;
    border: 5px ridge brown;/* 盒子设置边框 */
    font-family: 隶书;
    font-size: 20px;

    /* 自适应--滚动条 */
    overflow: auto;


    /* 多列布局 */
    /* 设置为6列 */
    column-count: 6;

    /* 可设置线条样式 */
    column-rule: dotted;

    /* 设置线条样式粗细 */
    column-rule-width: 3px;
}

 

视图：

 

 

3.BFC布局/规范 (面试重点)

　　出现/触发BFC：
　　　　1. 浮动 floa，不包含none。
　　　　2. 绝对定位 ：position（absolute、fixed）
　　　　3. display -inline-block、flex、table-cells
　　　　4. overflow--hidden、auto、scroll

 

 

 

　　BFC应用：

      • 解决 margin 叠加问题

　　　　　　　　　　　　例如：盒子1下边距为20px和盒子2的边距20px重叠

　　　　　　　解决：给盒子1和盒子2同时嵌套一个盒子

代码：

/* box1 和 box2 外的盒子 */
/* 注意：是每个box外都套一个盒子 */
.tao{
    border: 1px solid black;

    /* 解决margin 边距问题 */
    overflow: hidden;
}

/* box1 */
.box1{
    width: 200px;
    height: 200px;
    border: 5px solid red;
    /* box1 下外边距为20px */
    margin-bottom: 20px;
}

/* box2 */
.box2{
    width: 200px;
    height: 200px;
    border: 5px solid blue;

    /* box2 上外边距为60px */
    margin-top: 60px;
}

视图：

 

 

 

4.响应式：根据用户页面大小不同自适应

　　　　　　@media screen and (max-width：值 px){  （如果页面到达这个 值 ，则响应下面的盒子）
　　　　　　　　　　　　盒子1,2,3...
　　　　　　　　}

 

代码：

/* html里定义一个div就好 */
/* 设置属性 */
div{
  width: 600px;
  height: 600px;
  background-color: pink;
  border: 1px solid black;
}

/* 响应式写法 */
/* 此时当页面最大适应度到达600px时，会响应下面的属性 */
/* max与min */
@media screen and (max-width: 600px) {
    div{
        width: 500px;
        height: 500px;
        background-color: red;
        border: 1px solid black;
      }
}

视图：

 

 


　　 普通盒子模型：受影响--加 box-sizing
　　怪异盒子模型：不受影响--不加 box-sizing  可下载不同浏览器尝试 

 

 

5.CSS3新增属性 ： box-sizing

　　　　属性：
　　　　　　问题：content-box(默认值：元素的宽高包含边框和内边距)
　　　　　　解决：border-box（元素的宽高不包含边框和内边距）

代码：

.box1{
    width: 300px;
    height: 200px;
    border: 5px solid blue;
    padding: 20px;
    margin: 10px;

    /* 解决元素的宽高包含边框和内边距 */
    box-sizing: border-box;
}

 

视图：