CSS之display:block布局

本文详细介绍了CSS中display:inline-block属性的应用技巧及其与浮动布局的区别。通过对比两种布局方式的特点,阐述了inline-block布局的优势及适用场景。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

转载自http://www.cnblogs.com/Ry-yuan/p/6848197.html)

CSS之使用display:inline-block来布局

css之display:inline-block布局

1.解释一下display的几个常用的属性值,inline , block, inline-block

  • inline(行内元素):
    1. 使元素变成行内元素,拥有行内元素的特性,即可以与其他行内元素共享一行,不会独占一行. 
    2. 不能更改元素的height,width的值,大小由内容撑开. 
    3. 可以使用padding上下左右都有效,margin只有left和right产生边距效果,但是top和bottom就不行.
  • block(块级元素):
    1. 使元素变成块级元素,独占一行,在不设置自己的宽度的情况下,块级元素会默认填满父级元素的宽度. 
    2. 能够改变元素的height,width的值. 
    3. 可以设置padding,margin的各个属性值,top,left,bottom,right都能够产生边距效果.
  •  inline-block(融合行内于块级):
    1. 结合了inline与block的一些特点,结合了上述inline的第1个特点和block的第2,3个特点.
    2. 用通俗的话讲,就是不独占一行的块级元素。如图:

图一:

图二:

两个图可以看出,display:inline-block后块级元素能够在同一行显示,有人这说不就像浮动一样吗。没错,display:inline-block的效果几乎和浮动一样,但也有不同,接下来讲一下inline-block和浮动的比较。

 

2.inline-block布局 vs 浮动布局

    a.不同之处:对元素设置display:inline-block ,元素不会脱离文本流,而float就会使得元素脱离文本流,且还有父元素高度坍塌的效果

    b.相同之处:能在某程度上达到一样的效果

  我们先来看看这两种布局:
图一:display:inline-block

图二:对两个孩子使用float:left,我在上一篇浮动布局讲过,这是父元素会高度坍塌,所以要闭合浮动,对box使用overflow:hidden,效果如下:

>>乍一看两个都能做到几乎相同的效果,(仔细看看display:inline-block中有间隙问题,这个留到下面再讲)

  c.浮动布局不太好的地方:参差不齐的现象,我们看一个效果:
图三:

图四:

>>从图3,4可以看出浮动的局限性在于,若要元素排满一行,换行后还要整齐排列,就要子元素的高度一致才行,不然就会出现图三的效果,而inline-block就不会。

 

3.inline-block存在的小问题:

  a.上面可以看到用了display:inline-block后,存在间隙问题,间隙为4像素,这个问题产生的原因是换行引起的,因为我们写标签时通常会在标签结束符后顺手打个回车,而回车会产生回车符,回车符相当于空白符,通常情况下,多个连续的空白符会合并成一个空白符,而产生“空白间隙”的真正原因就是这个让我们并不怎么注意的空白符。

 

  b.去除空隙的方法:
  1.对父元素添加,{font-size:0},即将字体大小设为0,那么那个空白符也变成0px,从而消除空隙
  现在这种方法已经可以兼容各种浏览器,以前chrome浏览器是不兼容的
图一:

 

  c.浏览器兼容性:ie6/7是不兼容 display:inline-block的所以要额外处理一下:
  在ie6/7下:
  对于行内元素直接使用{dislplay:inline-block;}
  对于块级元素:需添加{display:inline;zoom:1;}

 

4.总结:

  display:inline-block的布局方式和浮动的布局方式,究竟使用哪个,我觉得应该根据实际情况来决定的:
  a.对于横向排列东西来说,我更倾向与使用inline-block来布局,因为这样清晰,也不用再像浮动那样清除浮动,害怕布局混乱等等。
  b.对于浮动布局就用于需要文字环绕的时候,毕竟这才是浮动真正的用武之地,水平排列的是就交给inline-block了。

### CSS `display: inline-block` 的使用方法及特性 #### 特性概述 `display: inline-block` 是一种 CSS 显示模式,它融合了行内元素 (`inline`) 和块级元素 (`block`) 的部分特性。具体来说,这种显示方式允许元素拥有块级元素的宽度和高度控制能力,同时也保留了行内元素在同一行排列的特点[^1]。 #### 主要特点 - **可设置宽高**: 虽然该元素表现为行内元素,但它支持定义宽度 (`width`) 和高度 (`height`) 属性,这通常只有块级元素才具备的能力[^2]。 - **不独占整行**: 不同于标准的块级元素(如 `<div>`),`inline-block` 元素不会强制占据一整行,而是能够和其他相邻的 `inline-block` 或者其他行内元素并列展示。 - **垂直对齐功能**: 支持通过 `vertical-align` 属性调整其相对于周围内容的垂直位置,比如顶部、中部或者底部对齐等[^3]。 #### 基本语法结构 以下是应用此样式的简单 HTML 和 CSS 示例: ```html <div style="border: 1px solid black;"> <span style="display: inline-block; width: 100px; height: 50px; background-color: lightblue;">Item</span> <span style="display: inline-block; width: 100px; height: 50px; background-color: salmon;">Another Item</span> </div> ``` 在这个例子中,两个 `<span>` 元素被赋予了 `inline-block` 样式,因此它们可以在同一行上呈现,并且各自具有指定的高度和宽度。 #### 解决常见问题 当运用 `display: inline-block` 时可能会遇到一些间距问题,这是因为浏览器默认会在这些元素之间处理空白字符作为间隙。可以通过移除 HTML 中的实际空格或利用负边距等方式消除不必要的间隔。 #### 实际应用场景举例 - 创建水平导航菜单:每个菜单项都可以设为 `inline-block` 来实现横向布局的同时还能单独设定尺寸大小。 - 图片画廊设计:让图片容器既能按需调整大小又能紧密排列在一起形成网格效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值