这篇文章将为大家详细讲解有关实现元素水平排列的方法有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
<强>第一种:显示:inline-block
首先得先了解块级元素(块元素)和行内元素(内联元素)
块级元素:块级元素包含宽度高度,填充、边界与保证金,他们的排列方式是从上到下排列,常见的块级元素有div, p,形式,ul等等。
行内元素:高度和宽度由内容决定,自身没法设定固定的大小,不存在垂直方向的保证金和填充,排列方式是水平排列,行内元素在html所有元素占大多数,比如,跨度,标签、按钮,img,输入……
这里可能有人会产生疑问,“按钮和img以及输入等标签可以设置宽度和高度也可以设置保证金与填充,为什么它确实行内元素呢?”其实html元素主要有两种划分方式,分别是“块级元素与行内元素”,“替换元素与不可替换元素”。上面介绍了第一种划分方式、下面介绍一下第二种划分方式:
替换元素:通俗的理解就是具有宽度和高度属性的元素。替换元素类似于显示:inline-block元素,可以设置高宽与内外边距,主要包括img,输入,文本区域,选择对象,音频和帆布在某些特定情形下为替换元素。
不可替换元素:除了替换元素剩下的都是不可替换元素(O (∩_∩) O)
扯了一大堆,我们知道显示:inline-block可以让元素横向排列,但是这种布局可能会存在一点点小问题,举栗子:
这是我们发现两个div之间存在一个空隙,这是为什么呢?
浏览器会将换行符,缩进符,以及空格当做一个空格来处理,即使暗恋两次空格,或者一个换行加一个空格,等等都会解析成一个空格使用。这个空格的大小则是字体大?2大小。去除这个空隙有很多办法。
1。设置div2的margin-left:字体大?2
2。设置两个div的父标签的字体大小:0
3。设置负的词间距
<强>第二种:浮动:左/右
浮动属性可以让元素脱离常规文档流,沿着容器的左侧或者右侧进行水平排列。
这种方式可以说是用的最多的,但是有个问题,在自适应布局中一般不会固定元素的高宽,会根据内容大小来自动调整,这是如果子元素都是浮动元素的话就会存在高度塌陷。
举栗子
这里将上一个栗子中的子元素div故意改成了,其实想表达浮动可以将元素隐式的转换成块元素(位置:绝对/固定亦可),所以自然就可以设置宽度和高度。
那么盒子水平排列之后存在什么问题呢?没错!父容器高度塌陷。这时父容器div的高度为0,因为浮动元素会脱离常规文档流,它的父容器计算高度时会忽略它。这是我们不想看到的,因为这个高度塌陷的div后面如果还有其它常规流标签的话,那么页面就会出现错乱等不想看到的结果。
解决办法自然就是清除浮动,主要通过两种方式清除浮动:
1.明确:左/右/两个,专门用来清除浮动的CSS。
2.黄东海,因为均有一条规则“计算黄东海的高度时,浮动元素也参与计算”。
说一下用清晰的清除浮动的几种方法:
1。最后一个子元素后面加一个空标签,然后设置其样式清楚:。
2。在最后一个浮动子元素中,利用伪元素::之后,添加清楚样式清除浮动
<强>第三种:表布局
这种布局方式其实不常用,因为它存在种种问题。
渲染速度较慢
增加html代码量,不易维护
标签的名字不符合html语义化,表本来就是做表格用的,拿来布局甚是不妥
标签结构较死,后期修改成本较高
等等,此处不作过多阐述。总之,尽量用表布局
<强>第四种:绝对定位
这种方式日常开发中用的也较多,前面提到浮动可以让元素脱离常规文档流,这里位置:绝对/固定也具有同样的效果,处理办法在漂布局中已经提到了,这里搬来即可。
