当前位置：首页 > news >正文

css学习盒模型：

news 2025/11/4 13:36:08

css盒模型

弹性盒模型（flex box)

1.display属性

2.flex_direction属性

3.align-items属性

4.flex-grow/flex

css盒模型

CSS 把每个元素看作一个矩形“盒子”，由四层构成：内容区 content、内边距 padding、边框 border、外边距 margin。其中外边距是透明的，用于与其他元素拉开距离。

可以点开一个网页右键’检查‘，右侧看到

先只设置内容content

		div{width: 100px;height: 100px;background-color: red;}

添加一个padding :50px 10px;可以看到他相对四周边框在变化（margin/padding/border-width：四值顺序为 上右下左；三值：上左右下；两值：上下左右；单值：四边相同。)

添加一个border: 5px solid black;

增加一个margin:50px 10px;四周会是透明的

弹性盒模型（flex box)

是css3的一种新的布局模式，弹性盒模型就是为了适应不同屏幕大小，可以更好的调整布局。(一个大盒子里面有很多小盒子）

组成：弹性容器和弹性项目

弹性容器（Flex Container）：通过 display: flex或 display: inline-flex定义的父元素，其直接子元素自动成为 弹性项目（Flex Items）。
弹性项目（Flex Items）：容器的子元素，可以灵活调整大小、顺序和对齐方式。

#弹性项目设置了3个<div class="flex-container"><div class="flex-item1">flex item1</div><div class="flex-item2">flex item2</div><div class="flex-item3">flex item3</div></div>
#弹性容器<style>.flex-container{display: flex;width: 600px;height: 600px;background-color: black;}</style><style>.flex-item1{width: 100px;height: 100px;background-color: red;}</style><style>.flex-item2{width: 100px;height: 100px;background-color: blue;}</style><style>.flex-item3{width: 100px;height: 100px;background-color: green;}</style>

1.display属性

display: flex开启弹性盒，默认水平放置

2.flex_direction属性

可以指定子元素在父容器的位置（小盒子在大盒子里面怎么摆放）

语法：

.flex-container {
flex-direction: row; /* 默认：水平（左→右） */
flex-direction: row-reverse; /* 水平（右→左） */
flex-direction: column; /* 垂直（上→下） */
flex-direction: column-reverse; /* 垂直（下→上） */
}

3.align-items属性

控制 子元素在交叉轴（默认垂直方向）上的对齐方式：

.flex-container {align-items: stretch;     /* 默认：拉伸填满容器高度（若未设高度） */align-items: flex-start;  /* 交叉轴起点对齐（顶部对齐）（就是居左摆放） */align-items: flex-end;    /* 交叉轴终点对齐（底部对齐）（居右摆放） */align-items: center;      /* 交叉轴居中（上下左右都居中） */align-items: baseline;    /* 按文本基线对齐（较少用） */
}