盒模型(Box Model)
所有的HTML元素都可以看作一个盒子
盒模型就是用来设计和布局时使用的
盒子包括:
margin(外边距)边框外的区域,外边框也是透明的
border(边框) 围绕内边距和内容的边框
padding(内边距) 内容周围的区域,内边距跟内容区一个颜色
content(内容)显示文本和图像
padding和margin可以单方向设定left、right、bottom、top。
Flex Box(弹性盒模型)
一种更加弹性的布局方式,更有效
弹性盒子由弹性容器(flex container)和弹性子元素(flex item)组成
容器通过display属性的值flex将其定义为弹性容器
父元素属性(对container操作):
display:flex
开启弹性盒子
flex-direction:row | column
定义子弹性子元素排列方式
row横向排列
column纵向排列
justify-content:flex-start | flex-end | center
垂直方向上定义居上、居下和居中
align-items:flext-start | flex-end | center
水平方向上定义居上、居下和居中
子元素属性(对item操作):
flex
组合使用,里面写数字,比例,比重,可以理解为权重,优先级比宽高的优先级高