CSS系列-伸缩布局与过渡(CSS3)

最新推荐文章于 2025-07-11 22:26:45 发布

少年请慢走

最新推荐文章于 2025-07-11 22:26:45 发布

阅读量488

点赞数

CC 4.0 BY-SA版权

分类专栏：前端基础文章标签： css flex

本文链接：https://blog.youkuaiyun.com/qq_39823114/article/details/99888723

前端基础专栏收录该内容

18 篇文章

订阅专栏

本文详细介绍了CSS3的伸缩布局，包括主轴和侧轴的概念、flex-direction等属性的应用。接着讨论了2D变形如何实现元素的位移、旋转和缩放。此外，还探讨了CSS3背景属性，特别是background-size在移动适配中的作用，以及如何创建和利用BFC来清除浮动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、伸缩布局(CSS3)

CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。

主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向

侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的

方向：默认主轴从左向右，侧轴默认从上到下

主轴和侧轴并不是固定不变的，通过flex-direction可以互换。

2、各属性详解

a、flex-direction调整主轴方向（默认为水平方向）

b、justify-content调整主轴对齐

c、align-items调整侧轴对齐

d、flex-wrap控制是否换行

e、align-content堆栈（由flex-wrap产生的独立行）对齐

f、flex-flow是flex-direction、flex-wrap的简写形式

g、flex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配

h、order控制子项目的排列顺序，正序方式排序，从小到大

例1: 伸缩布局三等饭

  <style>
            section {
                width: 80%;
                height: 200px;
                border: 1px solid pink;
                margin: 100px auto;
                /*父盒子添加 flex*/
                display: flex;  /*伸缩布局模式*/  /*这个盒子就会拥有弹性  弹性布局（弹性盒子）*/
            }
            section div {
    
                height: 100%;
    
            }
            section div:nth-child(1) {
                background-color: pink;
                flex: 1;  /*子盒子添加分数 flex:1 不加单位*/
            }
            section div:nth-child(2) {
                background-color: purple;
                margin: 0 5px;
                flex: 2;/*子盒子添加分数*/
            }
            section div:nth-child(3) {
                background-color: pink;
                flex: 3;/*子盒子添加分数*/
            }
        </style>
    </head>
    <body>
    <section>
        <div></div>
        <div></div>
        <div></div>
    </section>

例2:九等分

   .aa ul{
                display: flex;
                width: 100%;
                flex-wrap: wrap;
                position: absolute;
                top:30%;
            }
    
            .aa li {
                flex-basis: 30%;
                /*padding: 7% 0 7%;*/
                padding: 1.7vh 0 2.5vh;
                margin: 0 0 2.296vw 2.518vw;
                background-color: #1667CE;
                border-radius:3px;
                position: relative;
    
            }
    <ul>
                    <li >
                        <div class="NslistImg" style=""></div>
                    </li>
     <li >
                        <div class="NslistImg" style=""></div>
                    </li>
     <li >
                        <div class="NslistImg" style=""></div>
                    </li> <li >
                        <div class="NslistImg" style=""></div>
                    </li> <li >
                        <div class="NslistImg" style=""></div>
                    </li> <li >
                        <div class="NslistImg" style=""></div>
                    </li> <li >
                        <div class="NslistImg" style=""></div>
                    </li>
    </ul>

3、2D变形(CSS3)

转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式，

配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。

例1

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
        img {
            margin: 200px;
            transition: all 0.6s;/* 过度*/
            transform-origin: 20px 30px; /* 旋转点*/
        }
        img:hover {
    
            transform: rotate(360deg); /* deg 度数*/
        }
    
        </style>
    </head>
    <body>
    <img src="images/pk1.png"  width="200"  alt=""/>
    </body>
    </html>

.one 类选择器 a:hover 伪类选择器 ::after 伪元素选择器

类选择器伪类选择器就是选取对象

伪元素选择器本质上是插入一个元素(标签盒子) 只不过是行内元素 span a

4、 CSS 背景(background)

##背景简写

background属性的值的书写顺序官方并没有强制标准的。为了可读性，建议大家如下写：

background:背景颜色背景图片地址背景平铺背景滚动背景位置

background: transparent url(image.jpg) repeat-y scroll 50% 0 ;

##背景缩放(CSS3)

通过background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。

其参数设置如下：

a) 可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）

b) 设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。我们平时用的cover 最多

c) 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。

 background-image: url('images/gyt.jpg');
                background-size: 300px 100px;
                /* background-size: contain; */
                /* background-size: cover; */

    .top{
                background:url('${ctx}/mobile/images/top.png')  no-repeat ;
                background-size: 100% auto;
                width: 100%;
                height: 100%;
                position: absolute;
    
            }

**使用技巧**：在一行内的盒子内，我们设定行高等于盒子的高度，就可以使文字垂直居中。

## 那些元素会具有BFC的条件

不是所有的元素模式都能产生BFC，w3c 规范：

display 属性为<font face="黑体" color=red> block, list-item, table 的元素，</font>会产生BFC.

大家有么有发现这个三个都是用来布局最为合理的元素，因为他们就是用来可视化布局。

### 什么情况下可以让元素产生BFC

以上盒子具有BFC条件了，就是说有资质了，但是怎样触发才会产生BFC，从而创造这个封闭的环境呢？

同样，要给这些元素添加如下属性就可以触发BFC。

-float属性不为none

-position为absolute或fixed

-display为inline-block, table-cell, table-caption, flex, inline-flex

-overflow不为visible。