display:inline-block不独占一行的块级元素

最新推荐文章于 2024-05-23 07:58:38 发布

coodingcc

最新推荐文章于 2024-05-23 07:58:38 发布

阅读量4.4k

点赞数 5

分类专栏：前端文章标签： inline-block float 定位

本文链接：https://blog.csdn.net/cristina_song/article/details/93754690

版权

前端专栏收录该内容

93 篇文章 1 订阅

订阅专栏

display的几个常用的属性值，inline ， block， inline-block
inline（行内元素）:

使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行(行内元素设置了position属性或float属性或display后属性默认变成inline-block，所以可以设置宽高)
不能更改元素的height，width的值，大小由内容撑开.
可以使用padding上下左右都有效，margin只有left和right产生边距效果，但是top和bottom就不行.
block（块级元素）:
使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度.
能够改变元素的height，width的值.
可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果
inline-block:结合了上述inline的第1个特点和block的第2,3个特点.
inline-block布局 vs 浮动布局
inline-block布局(图一)

浮动布局(图二)

使用浮动布局,若要元素排满一行，换行后还要整齐排列，就要子元素的高度一致才行，不然就会出现图二的效果，而inline-block就不会。
inline-block存在的小问题：
用了display:inline-block后，存在间隙问题，这个问题产生的原因是换行引起的，因为我们写标签时通常会在标签结束符后顺手打个回车，而回车会产生回车符，回车符相当于空白符，通常情况下，多个连续的空白符会合并成一个空白符，而产生“空白间隙”的真正原因就是这个让我们并不怎么注意的空白符。
去除空隙的方法：
　　1.对父元素添加，{font-size:0}，即将字体大小设为0，那么那个空白符也变成0px，从而消除空隙
　　2.浏览器兼容性：ie6/7是不兼容 display：inline-block的所以要额外处理一下：
　　在ie6/7下：
　　对于行内元素直接使用{dislplay:inline-block;}
　　对于块级元素：需添加{display:inline;zoom:1;}
总结:
　　display：inline-block的布局方式和浮动的布局方式，究竟使用哪个，我觉得应该根据实际情况来决定的：
　　a.对于横向排列东西来说，我更倾向与使用inline-block来布局，因为这样清晰，也不用再像浮动那样清除浮动，害怕布局混乱等等。
　　b.对于浮动布局就用于需要文字环绕的时候，毕竟这才是浮动真正的用武之地，水平排列的是就交给inline-block了。
　　
W3C规定出来的浮动实际并不是为了布局所用，当时是为了做文字环绕才使用了浮动，只是后来人发现用它做布局也挺不错的，故至此float就担任了CSS中布局的任务，但float起初就是为了做文字环绕的。

<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>浮动</title>
	<style type="text/css">
		div{
			width:100px;
			height:100px;
		}
		#box1{
			background-color:red;
		}
		#box2{
			/* background-color:green; */
		    float:left;
		}
		#box3{
			background-color:yellow;
		}
	</style>
</head>
<body>
	<div id="box1">div1</div>
	<!-- 将下面的盒子挤下去了 -->
	<div id="box2">div2</div>
	<div id="box3">div3</div>
</body>
</html>

文字会给脱离文档流的flaot让出位置

<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>绝对定位</title>
	<style type="text/css">
		div{
			width:100px;
			height:100px;
		}
		#box1{
			background-color:red;
		}
		#box2{
			/* background-color:green; */
            position: absolute;
		}
		#box3{
			background-color:yellow;
		}
	</style>

</head>

<body>
    <div id="box1">div1</div>
    <!-- 将下面的盒子挤下去了 -->
	<div id="box2">div2</div>
	<div id="box3">div3</div>
</body>
</html>

文字不会给脱离文档流的绝对定位让出位置

两行左对齐，一行居中对齐

  <style type="text/css">
        div{
            width: 80px;
            height: 100px;
            border: 1px solid red;
        }
		.ps {
             text-align: center;
        }
        .ps span {
            display: inline-block;
            text-align: left;
        }
	</style>

</head>
<body>
   <div class="ps"><span>的测</span></div>
</body>

vertical-align 的默认值是baseline,两个div 都设置 display：inline-block，正常显示；但是在第二个div中加一个块级元素或者内联元素，显示就变了个样，解决方案：给第二个div加上：vertical-align:top。

coodingcc

关注

5
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
display:inline-block不独占一行的块级元素

display的几个常用的属性值，inline ， block， inline-blockinline（行内元素）:使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行(行内元素设置了position属性或float属性或display后属性默认变成inline-block，所以可以设置宽高)不能更改元素的height，width的值，大小由内容撑开.可以使...
复制链接

扫一扫

专栏目录