标签属性
块级元素:<div>,<p>,<ul>,<ol>,<li>,<h1>~<h6>……
相邻独占一行
默认宽度为容器的100%
宽、高、margin/padding 可设置
行内元素:<span>,<a>,<strong>,<b>……
相邻行内元素同行显示
默认宽度为自身内容宽度
宽、高 不可设置
margin/padding 仅可设置水平方向,垂直方向无效
行内块元素:<img/>,<input/>,<td/>
相邻元素同行显示 中间会有空白间隙
宽、高、margin/padding 可设置
默认宽度为自身内容宽度
属性转换:
块转行内:display:inline;
行内转块:display:block;
块、行内转行内块:display:inline-block;
1、Flex概念
Flex是Flexible Box的缩写,意为弹性布局
采用Flex布局的元素,称为 ’Flex容器’,简称 ’容器’。
容器的所有子元素称为 ’容器成员’,简称 ’项目’。
.box{
display: flex;
display: inlone-flex; // (行内元素)
display:-webkit-flex; // (webkit内核浏览器需加上-webkit前缀,safari)
}
容器默认存在两根轴:
水平的称为主轴(main-axis)
垂直的称为交叉轴(cross-sxis)
2、容器属性
2.1、flex-direction设置主轴的排列方向
row: 默认值,主轴为水平方向,起点在左端
row-reverse: 主轴为水平方向,起点在右端
columu: 主轴为垂直方向,起点在上方
columu-reverse: 主轴为垂直方向,起点在下方