文章目录
一、怪异盒模型&标准盒模型
**怪异盒模型:**在设置的宽度和高度范围内减去内边距、边框得到内容宽高
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>
注:不写高度的情况下默认使用align-self:stretch;高度占满