526互联

CSS（四）盒子模型

发布时间 2023-07-03 19:18:18作者: huiyii

盒子模型box model

CSS盒子模型本质上是一个盒子，封装周围的HTML元素。它包括：

margin（外边距）、border（边框）、padding（内边距）、content（内容）

 

弹性盒子模型flex box

felx box是CSS3的一种新的布局模式。是为了让页面适应不同的屏幕大小和设备类型，提供了一种更加有效的方式对容器中的子元素进行排列、对齐和分配空白空间。

CSS3弹性盒子

弹性盒子由弹性容器（flex container）和弹性子元素（flex item）组成。容器内包含了一个或多个弹性子元素

弹性容器通过设置 display="flex" 定义为弹性容器，设置后 盒子里的子元素是水平排列的

# css
.flex_container{
            width: 500px;
            height: 500px;
            display: flex;
        }
.box{
            width: 100px;
            height: 100px;
            flex: 1;
        }
# html        
<div class="flex_container">
    <div class="box"></div>
    <div class="box"></div>
</div>

父元素(弹性盒)的css属性

  • flex-direction，指定子元素在容器中的排列方式

    • row，从左到右，默认值

    • row-reverse，从右到左

    • column，纵向从上到下

    • column-reverse，从下到上

  • justify-content，指定子元素在容器中的垂直对齐方式

    • flex-start，默认值，靠容器上边对齐

    • flex-enf，靠容器下边对齐

    • center，在容器中垂直居中对齐

  • align-items。指定子元素在容器中的水平对齐方式

    • flex-start，靠容器左边对齐

    • flex-end，靠容器右边对齐

    • center，在容器中水平居中对齐

子元素(弹性盒内子元素)的css属性

  • flex，根据弹性盒子所设置的扩展因子作为比率分配剩余空间，默认0，如果存在剩余空间，也不放大

    • 如果父元素（弹性盒）为水平排列，子元素设置了flex，子元素的宽度width无效，纵向同理