-
13-盒子模型
一、怪异盒模型&标准盒模型
**怪异盒模型：**在设置的宽度和高度范围内减去内边距、边框得到内容宽高
box-sizing:border-box;- 1
盒子内容所占宽高会因设置的内边距和边框而压缩
**标准盒模型：**在宽度和高度之外绘制元素的内边距和边框
box-sizing: content-box;- 1
盒子内容所占宽高为自定义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:垂直方向盒子反转- 1
- 2
- 3
- 4
- 5
5、修改主轴对齐方式
justify-content:flex-start/flex-end/center/space-between/space-around; 靠左对齐/靠右对齐/中间对齐/两端对齐/距离环绕- 1
- 2
如图主轴方向为水平方向，对齐方式是靠左对齐:
6、修改侧轴位置
align-items:flex-start/flex-end/center- 1
如果内容过多，会挤压内部盒子的长或宽，保持一行排列，不会出现折行。
此时，引出折行显示属性7、折行显示
flex-wrap:wrap;- 1
折行后会等间距显示，行距很大，控制折行后行间距
8、折行后行间距
align-content:flex-start; 紧挨在一起，处于父盒子上方 flex-end 紧挨在一起，处于父盒子下方 center 紧挨在一起，处于父盒子中间 space-around 等间距环绕 space-between 中间等间距，两边贴着父盒子- 1
- 2
- 3
- 4
- 5
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：元素被定位到父盒子的基线- 1
- 2
- 3
- 4
- 5
- 6
- 7
例如：对五个子盒子设置如下属性
效果：
10、内部子盒子排列顺序
（设置在项目上，即子盒子上）
order:0/1/2/... 值越小越靠前- 1
例如：设置盒子5权重最小：
11、内部盒子设置宽度/高度占满
（在项目上加）
flex:1;- 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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
注：不写高度的情况下默认使用align-self:stretch;高度占满
-
相关阅读:
P1040 [NOIP2003 提高组] 加分二叉树
10.26 来 CNCC 2023 T16 展位，TDengine 精美周边等你来领！
LLM应用实战：当KBQA集成LLM
线性代数学习笔记3-4：描述线性变换的空间压缩情况（列空间、秩）
低代码平台选型，你一定要知道以下5点
MySQL条件查询
修timing中的SI-noise问题
centos7安装erlang23.3.4.11及rabbitmq3.9.16版本
从零开始，开发一个 Web Office 套件（7）：新的问题—— Click 事件的 z-index
C++：为什么析构函数一般写为虚函数
- 原文地址：https://blog.csdn.net/CapejasmineY/article/details/126201902
