关于前端布局的基础知识

float 横向布局

float 实现横向布局,需要向横着布局的元素添加float 其值left right

存在问题 如果使用float 所在父级五高度,会导致下方的元素上移

top的高度被吞了

解决方法: 给父级元素设置高度:不推荐,需要给父级一直调高度

我们父级设置overflow:hidden

第二种:给父级设置overflow:hidden 达到父级元素高度随子集元素自适应的变化(推荐)

无法解决的问题:元素均分父级,需要计算而且不一定均分

元素之间的间距均匀分布:需要计算而且不一定均分

书写比较繁琐,代码繁琐

内敛块级元素实现横向布局 需要向横向布局的元素添加display: inline-block ,让其变成内敛块级元素,内敛块级元素特点:不独占一行,对宽高支持

问题: 使用display: inline-block;元素之间有空隙

产生原因,浏览器会把空格换行都当成空白

解决办法:把元素首尾相连不推荐

第二种: 对文字大小处理,给使用display: inline-block的父级元素设置字体大小为0,并且该元素要设置字体大小

无法解决的问题:元素均分父级,需要计算而且不一定均分

元素之间的间距均匀分布:需要计算而且不一定均分

书写比较繁琐,代码繁琐

弹性盒子布局 给要横着布局的父级元素添加display:flex

把内联块级布局的问题直接解决,而且代码也很简便

flex-direction控制弹性盒子内部子元素的排列方式

flex-direction:column 纵向从上到下

flex-direction:reserve 纵向从下到上

flex-direction: row 横向从左到右

flex-direction:row-reserve 横向从右到左

flex-wrap;控制弹性盒子内子元素是否换行

flex-wrap: nowrap 不换行

flex-wrap: wrap 换行

order 设置弹性盒子内子元素排列顺序

值越小越靠前

flex-grow 拉伸

根据比例平分父级(前提是每块的宽度是一样的)

改成宽度800px

自动压缩了,不需要操作默认按宽度比例压缩

flex-shrink也可以用这个来设置压缩的比例

justify-content:控制弹性盒子内元素的分布方式

justify-content: flex-start 代表在排列方向上的开始位置分布

justify-content: flex-end 代表在排列方向上的开结束位置分布

justify-content: center 代表在排列方向上的开中间位置分布

space-between 代表空白均匀放到元素元素之间

space-evently 代表空白均匀放到各个间隙

space- around 代表空白分布元素周围

align-items 控制弹性盒子内在垂直方式上的对齐方式

flex-start顶部对齐

flex-end底部对齐

center 居中对齐

baseline 首行底部对齐

align -content 设置弹性盒子内多行的分布方式

flex-start 所有行靠近顶部,左边

flex-end 所有行在底部,右边

center 所有行剧中

space-between代表空白均匀放到元素元素之间

space- around代表空白分布元素周围

space-evently 代表空白均匀放到各个间隙

相关推荐
老猿讲编程13 分钟前
一个例子来说明Ada语言的实时性支持
开发语言·ada
王哈哈^_^1 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
Chrikk1 小时前
Go-性能调优实战案例
开发语言·后端·golang
幼儿园老大*1 小时前
Go的环境搭建以及GoLand安装教程
开发语言·经验分享·后端·golang·go
canyuemanyue1 小时前
go语言连续监控事件并回调处理
开发语言·后端·golang
杜杜的man1 小时前
【go从零单排】go语言中的指针
开发语言·后端·golang
cs_dn_Jie1 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic2 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿2 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具2 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端