前端开发之格式布局

目录

1、float布局：

2、内联块级元素布局：

3、弹性盒子模型：

配套属性：

---

如何实现横向布局？？

1、float布局：

需要向横向布局的元素添加float属性：其值：left（左浮动） right（右浮动）

存在问题：父级元素高度坍塌，元素重叠

解决办法：

1、父级元素添加高度height（不推荐）

2、父级元素使用overflow:hidden;

存在问题：无法均分

原html要布局的代码如下：

index.css

2、内联块级元素布局：

转为内联块级元素：横向布局的元素添加 display:inline-block;

存在问题：子元素之间有间隙

解决办法：1、子元素收尾连接（不回车换行）（不推荐）

                 2、父级元素设置 font-size:0; 自己元素font-size大小不为0

存在问题：无法均分

内联块级盒子 特征：不独占一行，对宽度高度支持 如：图片img 输入框input

index.css

3、弹性盒子模型：

在父级元素上添加 display:flex;

弹性盒子 特征：一个父级元素设置成弹性盒子，其子元素默认始终横向布局

此时，父级高度随子级最高高度变化而变化

配套属性：

配套属性都放在父级元素内

1、控制弹性盒子模型子元素的排列方向: flex-direction 值: row(默认横向） column(竖着) row-reverse (反向横着) colum-reverse;(反向竖着）

例如：

flex-direction:row-reverse; (反向横着)最先出现的出现在最右边

flex-direction: column;（竖着）

2、设置弹性盒子内元素是否换行:flex-wrap值: wrap（换行）nowrap(不换行)

父级元素内多个元素时，要求换行

3、设置弹性盒子内部子元素的排列顺序

order作用在子元素身上

order 值是数字，值越小越靠前

4、控制弹性盒子内部子元素的缩放比例 [复合属性] flex-grow 拉伸因子 flex-shrink 压缩因子 flex-basis基准因子；

拉伸因子设置为0表示不参与分家，大小不变

拉伸因子，按比例拉伸

拉伸因子作用在子元素上

5、控制弹性盒子内子元素的分布方式: justify-content : flex-start(开端） flex-end(结束端) center(居中) space-between (空白分布在元素中间) space-around (空白放到元素周围) space-evenly(空自均匀分布)

6、控制弹性盒子内子元素在垂直方向上的对齐方式 align-items: flex-start(开端) flex-end(结束端) center(居中) baseline(首行底端对齐);

7、设置弹性盒子内多行元分布方式: align-content flex-start(开端） flex-end(结束端) center(居中)

space-between (空白分布在行中间) space-around (空白放到行周围) space-evenly（空白均匀分布)