当前位置：网站首页>13-盒子模型

13-盒子模型

2022-08-11 11:51:00 【CapejasmineY】

文章目录

一、怪异盒模型&标准盒模型
二、弹性盒模型

一、怪异盒模型&标准盒模型

**怪异盒模型：**在设置的宽度和高度范围内减去内边距、边框得到内容宽高

box-sizing:border-box;

盒子内容所占宽高会因设置的内边距和边框而压缩

**标准盒模型：**在宽度和高度之外绘制元素的内边距和边框

box-sizing: content-box;

盒子内容所占宽高为自定义width及height，盒子整体会因增加内边距、边框的增加而增加

二、弹性盒模型

1、使用

在外部盒子上加display:flex;

2、作用

改变内部元素(子元素)的排列方式
是一种布局方式，非常适合移动端

3、影响

1、子元素默认横向排列(不是浮动)
2、让行内元素变成块级元素
3、只有一个子元素时，子元素上加margin:auto实现在父盒子自动居中

4、修改主轴方向

默认的盒子并排方向为主轴方向

flex-direction:row/column/row-reverse/column-reverse
row:水平方向为主轴，水平排列
column：垂直方向为主轴，垂直排列
row-reverse：水平方向盒子顺序反转
column-reverse:垂直方向盒子反转

5、修改主轴对齐方式

justify-content:flex-start/flex-end/center/space-between/space-around;
靠左对齐/靠右对齐/中间对齐/两端对齐/距离环绕

如图主轴方向为水平方向，对齐方式是靠左对齐:

6、修改侧轴位置

align-items:flex-start/flex-end/center

如果内容过多，会挤压内部盒子的长或宽，保持一行排列，不会出现折行。
此时，引出折行显示属性

7、折行显示

flex-wrap:wrap;

折行后会等间距显示，行距很大，控制折行后行间距

8、折行后行间距

align-content:flex-start; 紧挨在一起，处于父盒子上方
flex-end  紧挨在一起，处于父盒子下方  
center 紧挨在一起，处于父盒子中间
space-around 等间距环绕
space-between 中间等间距，两边贴着父盒子

align-content:flex-start;

9、内部子盒子设置对齐方式

（设置在项目上，即子盒子上）

align-self：auto/flex-start/flex-end/center/baseline/stretch;
auto：默认，继承父容器的align-items属性，如果没有父盒子，则为"stretch" 属性
stretch:元素撑开整个盒子的高度
center：元素位于父盒子中央
flex-start：元素位于父盒子开头
flex-end:元素位于父盒子的末尾
baseline：元素被定位到父盒子的基线

例如：对五个子盒子设置如下属性

效果：

10、内部子盒子排列顺序

（设置在项目上，即子盒子上）

order:0/1/2/...      值越小越靠前

例如：设置盒子5权重最小：

11、内部盒子设置宽度/高度占满

（在项目上加）

flex:1;

1、弹性盒布局情况下，水平方向所有盒子设置长宽。给一个盒子设置flex=1；其余盒子不设置，默认会把其余水平空间占满

2、所有盒子都设置flex，flex的值可以任意，会按照值的大小平分盒子。

实现三栏布局

*{
    margin:0;
    padding:0;
}
html,body{
    height:100%;
}
body{
    display:flex;
}
.div1,.div3{
    width:20px;
}
.div2{
    flex:1;
}

<body>
<div></div>
<div></div>
<div></div>
</body>