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

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。

  • 5
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值