【前端技术】CSS基本语法（二）-CSDN博客

本文链接：https://blog.csdn.net/qq_45538572/article/details/138228550

一、 flex布局

flex布局称之为弹性布局
给父元素设置display:flex，子元素可以自动挤压或拉伸内容，主轴方向默认为水平方向（从左至右）

<!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>
        .box {
            /* flex弹性布局 */
            display: flex;

            /* justify-content主轴对齐方向：
                flex-start：默认值，弹性盒子从起点开始依次排序
                flex-end：弹性盒子从终点开始依次排序
                center：弹性盒子沿主轴居中排序
                space-berween：弹性盒子沿主轴均匀排序，空白间距分布在弹性盒子之间
                space-around：弹性盒子沿主轴均匀排序，空白间距分布在弹性盒子两侧，弹性盒子之间的空白距离是两侧的2倍
                space-evenly：弹性盒子沿主轴均匀排序，弹性盒子与容器之间间距相等
            */
            justify-content: space-between;

            /* align-items修改侧轴对齐方向：当前弹性容器内所有弹性盒子的侧轴对齐方式，在弹性容器中设置
                stretch：弹性盒子沿着侧轴线被拉伸至铺满容器，弹性盒子没有设置，则默认就是拉伸
                center：弹性盒子沿侧轴居中排列
                flex-start：弹性盒子从起点开始依次排列
                flex-end：弹性盒子从终点开始依次排列    
            */

            align-items: center;

            /* flex-direction修改主轴方向:
                row：水平方向，从左向右，默认就是这个
                column：垂直方向，从上向下
                row-reverse：水平方向，从右向左
                column-reverse：垂直方向，从下至上
            */
            flex-direction: column;

            /* 弹性盒子换行 
                nowrap不换行默认为这个
                wrap：换行显示
            */
            flex-wrap: wrap;

            /* align-content修改行对齐方式 
                flex-start：默认值，弹性盒子从起点开始依次排序
                flex-end：弹性盒子从终点开始依次排序
                center：弹性盒子沿主轴居中排序
                space-berween：弹性盒子沿主轴均匀排序，空白间距分布在弹性盒子之间
                space-around：弹性盒子沿主轴均匀排序，空白间距分布在弹性盒子两侧，弹性盒子之间的空白距离是两侧的2倍
                space-evenly：弹性盒子沿主轴均匀排序，弹性盒子与容器之间间距相等
            */
            align-content: center;
            border: 1px solid #000;
            width: 800px;
            height: 300px;
        }

        .box div {
            background-color: aqua;
            width: 220px;
            height: 100px;

            /* align-self某个弹性盒子侧轴对齐方向：单独控制某个弹性盒子的侧轴对齐方式，在弹性盒子中设置
                stretch：弹性盒子沿着侧轴线被拉伸至铺满容器，弹性盒子没有设置，则默认就是拉伸
                center：弹性盒子沿侧轴居中排列
                flex-start：弹性盒子从起点开始依次排列
                flex-end：弹性盒子从终点开始依次排列   
            */
            align-self: center;

            /* flex设置弹性伸缩比，所占用的是弹性容器中所剩余的空间：
                flex:1;
                flex:auto;
                在弹性盒子中设置
            */
            flex: auto;
        }
    </style>
</head>

<body>

    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>

</html>

二、定位技术

使用定位技术一般是子级绝对定位，父级相对定位

absolute特点：

脱离原来位置进行定位（也就是说当有两块容器时，第一块容器被赋予定位元素（absolute），第二块容器会在第一块容器之上，这是绝对路径定位，只针对边框对浏览器边框定位，不和容器边框进行定位（不把第一块容器边框作为定位点），但是当最近的父级有定位时相对于父级进行定位）
相对于最近的有定位的父级进行定位，如果，那么相对于文档进行定位

relative特点：

保留原来位置进行定位（也就是说当有两块容器时，第一块容器被赋予定位元素（relative），第二块容器会在原位置，第一块路径加上“top和left”的属性值后，到了第二块容器的位置时，是重叠状态，也是层模型，这是相对路径定位，都是针对浏览器边框进行定位的一个过程）
这个定位元素是相对于自己原来的位置进行定位的，也就是在原位置，我要向右移动50px时，就是像左边走了50像素
在企业开发中多数使用relative作为参照物，absolute为定位技术，如果将absolute作为参照物容易影响元素的使用

fixed特点
fixed固定定位（不论滚动条滚动的有多长，这个定位内容都处在那个位置不变）
将广告居中显示不动（只能采用这种方法，必须牢记）：

margin塌陷的解决方法：

父子嵌套的元素，在进行垂直定位时（父级：top:100px;子级：top:200px;），取最大值（在这情况下就是取子级元素200px;但是会带着父级一起移动，这种现象叫做margin塌陷）
解决方法
- 给顶部加上线条（这种方法禁止使用，因为在网页中线条太明显）： boder-top:1px solid red;
- BFC（block format context）：块级格式上下文（每一个HTML元素都有一个盒子，这个盒子都有一套完全一样的渲染规则）将bfc设置完成后，将会执行另一套语法规则如何触发一个盒子的bfc（在元素css中写下面任意一条代码，都能触发bfc，解决margin塌陷，但是前提条件是不影响需求的情况下使用）：
  - position:absolute;绝对定位
  - display:inline-block;将元素变为行级块元素
  - float:left/right;浮动（左浮动/右浮动）
  - overflow:hidden;溢出盒子部分要隐藏展示在兄弟元素时，两个元素的垂直方向是不变的

<!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;
        }

        .demo1 {
            /* Position: relative;相对定位 */
            position: relative;
            /* Position定位有四个定位属性：
                1.left:100px; 左边框线距离左边100px
                2.top:100px; 上边框线距离上边100px
                3.right:100px; 右边框线距离右边100px
                4.bottom:100px;下边框线距离下边100px */
            left: 38%;
            width: 500px;
            height: 800px;
            background-color: rgb(0, 255, 234);
        }

        .demo2 {
            /* Position: absolute绝对定位 */
            position: relative;
            left: 50%;
            top: 50%;
            /* 设置为自身宽高的一半 */
            transform: translate(-50%, -50%);
            width: 100px;
            height: 100px;
            background-color: rgb(35, 235, 125);
        }

        .demo3 {
            position: absolute;
            width: 200px;
            height: 200px;
            left: 20%;
            background-color: coral;
            /* z-index表示显示的层数，是在最上方显示还是在背部显示，数字越大越在前显示，其中的1表示在position定位元素的第几层，这个属性只能用于podition定位 */
            z-index: 1;

        }

        .demo4 {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: rgb(22, 116, 170);
        }
    </style>
</head>

<body>
    <div class="demo1">
        <div class="demo2"></div>
        <div class="demo3">demo3</div>
        <div class="demo4">demo4</div>
    </div>
</body>

</html>