全球最热门网站,学编程要什么电脑,百度词条搜索排行,品牌设计理念float 横向布局
float 实现横向布局#xff0c;需要向横着布局的元素添加float 其值left right 存在问题 如果使用float 所在父级五高度#xff0c;会导致下方的元素上移 top的高度被吞了
解决方法#xff1a; 给父级元素设置高度#xff1a;不推荐#xff0c;需要给父级…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-directioncolumn 纵向从上到下
flex-directionreserve 纵向从下到上
flex-direction row 横向从左到右
flex-directionrow-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 代表空白均匀放到各个间隙
