vue中的横向排列_【干货】:如何让元素水平排列?
块级元素默认是垂直排列的,而行内元素是水平排列的,而在布局时基本上都是用块级元素,如div等常用块级标签,那么如何让块级元素也进行水平排列呢?我有100种方式(准确说是100-94种)让元素水平排列,你知道几种呢?
第一种:display:inline-block
首先得先了解块级元素(block elements)和行内元素(inline elements)
块级元素:块级元素包含width height,padding,border与margin,他们的排列方式是从上到下排列,常见的块级元素有div,p,form,ul等等,更多块级元素的可以去MDN上查阅https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements
行内元素:高度和宽度由内容决定,自身没法设定固定的大小,不存在垂直方向的margin和padding,排列方式是水平排列,行内元素在html所有元素占大多数,比如a,span,label,button,img,input......更多行内元素还是MDN查阅https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements
这里可能有人会产生疑问,“button和img以及input等标签可以设置宽度和高度也可以设置margin与padding,为什么它确实行内元素呢?”其实html元素主要有两种划分方式,分别是“块级元素与行内元素”,“替换元素与不可替换元素”。上面介绍了第一种划分方式,下面介绍一下第二种划分方式:
替换元素:通俗的理解就是具有width和height属性的元素。替换元素类似于display:inline-block元素,可以设置高宽与内外边距,主要包括img , input , textarea , select , object,audio和canvas在某些特定情形下为替换元素。更官方的定义https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element
不可替换元素:除了替换元素剩下的都是不可替换元素(O(∩_∩)O)
扯了一大堆,我们知道display:inline-block可以让元素横向排列,但是这种布局可能会存在一点点小问题,举栗子:
div{
display:inline-block; width:200px; height:200px;
}
.div1{
background:green;
}
.div2{
background:red;
}
这是我们发现两个div之间存在一个空隙,这是为什么呢?
浏览器会将换行符,缩进符,以及空格当做一个空格来处理,即使暗恋两次空格,或者一个换行加一个空格,等等都会解析成一个空格使用。这个空格的大小则是font-size/2大小。去除这个空隙有很多办法。
1.设置div2的margin-left:-font-size/2
2.设置两个div的父标签的font-size:0
3.设置负的word-spacing
第二种:float:left/right
float属性可以让元素脱离常规文档流,沿着容器的左侧或者右侧进行水平排列。
这种方式可以说是用的最多的,但是有个问题,在自适应布局中一般不会固定元素的高宽,会根据内容大小来自动调整,这是如果子元素都是浮动元素的话就会存在高度塌陷。
举栗子
span{
float:left; width:200px; height:200px;
}
.box1{
background:green;
}
.box2{
background:red;
}
左边
右边
这里将上一个栗子中的子元素div故意改成了span,其实想表达float可以将元素隐式的转换成block元素(position:absolute/fixed亦可),所以自然就可以设置宽度和高度。
那么盒子水平排列之后存在什么问题呢?没错!父容器高度塌陷。这时父容器div的高度为0,因为浮动元素会脱离常规文档流,它的父容器计算高度时会忽略它。这是我们不想看到的,因为这个高度塌陷的DIV后面如果还有其它常规流标签的话,那么页面就会出现错乱等不想看到的结果。
解决办法自然就是清除浮动,主要通过两种方式清除浮动:
1.clear:left/right/both,专门用来清除浮动的CSS。
2.BFC,因为BFC有一条规则“计算BFC的高度时,浮动元素也参与计算”。
说一下用clear清除浮动的几种方法:
1.最后一个子元素后面加一个空标签,然后设置其样式clear:both。
2.在最后一个浮动子元素中,利用伪元素::after,添加clear样式清除浮动
通过BFC解决高度塌陷:
为父元素创建BFC(摘自MDN),只要满足以下任何一种都会为元素创立BFC。
A block formatting context is created by one of the following:
the root element or something that contains it
floats (elements wherefloat is not none)
absolutely positioned elements (elements where position is absolute or fixed)
inline-blocks (elements with display: inline-block)
table cells (elements with display: table-cell, which is the default for HTML table cells)
table captions (elements with display: table-caption, which is the default for HTML table captions)
elements where overflow has a value other than visible
flex boxes (elements with display: flex or inline-flex)
我英语不好,上面的英文也能看懂,所以它就不需要翻译了吧,建议动手试一下。
第三种:table布局
这种布局方式其实不常用,因为它存在种种问题。
·渲染速度较慢
·增加html代码量,不易维护
·标签的名字不符合html语义化,table本来就是做表格用的,拿来布局甚是不妥
·标签结构较死,后期修改成本较高
等等,此处不作过多阐述。总之,尽量用table布局
第四种:绝对定位
这种方式日常开发中用的也较多,前面提到float可以让元素脱离常规文档流,这里position:absolute/fixed也具有同样的效果,处理办法在float布局中已经提到了,这里搬来即可。
这里要说一下position:absolute绝对定位,以它的第一个父级并且是position:absolute/relative/fixed等飞static定位的元素为基点进行定位,如果找不到则以根元素为基准进行定位。一般都是采用父元素position:ralative,子元素position:absolute结合使用。
第五种:css3的弹性布局
html5的新特性,由于其功能太强大,兼容性太差,我现在还没法驾驭它,所以没敢献丑,不过w3cplus有篇文章写的很好,感兴趣可以读一下http://www.w3cplus.com/css3/using-flexbox-today.html。
弹性布局因为其兼容性所以还没有得到广泛的认可,不过我觉得以后它肯定会独占鳌头,就跟我看好html的视频播放器一样,早晚都会干败flash,只是时间问题!!!
第六种:transform:translate
CSS3中用于动画的一个样式,但是他可是让两个元素横向排列,这里不多说直接上代码,请用谷歌浏览器运行一下:
}.box1{background:green;
}.box2{transform:translateX(200px) translateY(-200px);background:red;
}
左边
右边
vue中的横向排列_【干货】:如何让元素水平排列?相关推荐
- vue中headers是什么_【vue】饿了么项目-header组件开发
1.数据传递的理解 在App.vue中用到了header组件,首先注册组件 components: {'v-header': header } 然后才能引用 :seller="seller& ...
- vue 中provide的用法_聊聊Vue中provide/inject的应用详解
众所周知,在组件式开发中,最大的痛点就在于组件之间的通信.在 Vue 中,Vue 提供了各种各样的组件通信方式,从基础的 props/$emit 到用于兄弟组件通信的 EventBus,再到用于全局数 ...
- ant vue 树形菜单横向显示_快速实现一个简单可复用可扩展的Vue树组件
来源 | https://wintc.top/article/13大概因为平时工作项目的原因,写了很多次树形组件,越写越觉得可以写得更简单并且更具有复用性.扩展性.树组件的应用场景很多,比如一篇文章的 ...
- vue中级联选择器回填_浅谈Vue使用Cascader级联选择器数据回显中的坑
业务场景 由于项目需求,需要对相关类目进行多选,类目数据量又特别大,业务逻辑是使用懒加载方式加载各级类目数据,编辑时回显用户选择的类目. 问题描述 使用Cascader级联选择器过程中主要存在的应用问 ...
- html使div内部元素水平排列_实现元素水平排列的六种方法
众所周知,块级元素默认是垂直排列的,行内元素是水平排列的,而在布局时基本上都是用块级元素,如div等常用块级标签,那么如何让块级元素也进行水平排列呢?这篇文章给大家介绍六中方式,实现块级元素的水平排列 ...
- html使div内部元素水平排列_元素周期表探讨
元素周期表探讨 綦学尧 18021072025 samson.qi@163.com 摘要:本文采用混沌物理学的理论学说解释了元素周期表. 关键词:量态力学 杂化轨道 荷物质密度流形 正多面体 规则分布 ...
- vue中的横向排列_如何让div中的内容横向排列
展开全部 一.问题可能涉及到了浮动和行内元素两个知识点,首先需要div布局,写一个大的div作为父级盒子,里e5a48de588b662616964757a686964616f313333633839 ...
- vue中的横向排列_DIV横向排列_CSS如何让多个div盒子并排同行显示
如何让多个div盒子并排同行div横向排列显示呢? 我们先设置3个div盒子对象,什么css样式都不设置看看效果.代码如下: 三个div盒子均独占一行显示 div盒子本身默认样式属性是独占一行,而解决 ...
- vue中的横向排列_vue横向步骤条
v-bind:class="[stepArray.length==2 ? 'width-2' : stepArray.length==3?'width-3':'width-4', '']&q ...
- 在vue中实现picker样式_基于Vue实现timepicker
主要用到的还是Vue的基本知识而已,不过要想到的细节很多. 先放效果,点击上框,显示timepicker.而且可以根据点击的是时还是分来改变圆盘的数字. 这里我用了两个组件,和,这里的时和分的数值我挂 ...
最新文章
- Android --- RecycleView 中默认选择第一个 item,点击第 2 个 item 时改变其字体样式,其余的 item 的字体样式恢复默认
- GridView实现自动编号
- nfs配置 /etc/exports
- win7 右键增加打开 powershell选项
- mysql mvcc 隔离级别_隔离级别和MVCC
- SQL 拼接语句输出_一文了解Mybatis中动态SQL的实现
- Centos7下Yum安装PHP5.5,5.6,7.0
- ubuntu18.04 ros 使用anaconda创建虚拟环境 python3.7安装 opencv-3.4.6,TensorFlow安装,notebook
- java什么叫元素_java-什么是HTTP标头元素?
- 通​过​C​a​c​t​i​监​控​w​i​n​d​o​w​s​资​源
- “长按地址在浏览器中打开”的解决办法
- [一定要看完]住在隔壁的刚毕业的大学生小夫妻
- 数据结构面试经典问题汇总
- 1038: 绝对值最大 Python
- 逻辑学入门很简单 笔记 一些逻辑学常见概念
- sql自定义报表软件_SQL Server中的报表–自定义报表的外观
- 加贺电子发表手掌大小的小型轻量DLP放映机
- eclipse打不开,提示出现“eclipse发生了错误,请参阅日志文件”
- 设备加密有什么作用?
- excel中用正则匹配_excel 中如何使用正则表达式函数提取或替换内容