比float更好的页面布局inline-block

时间：2022-05-07 05:13:34

一：页面布局的发展过程

  • 桌格设计
  • 表格+css
  • div+css的浮动布局
  • div+css的内联块布局

二：流行多年的浮动布局的优劣

优势：

div+css浮动布局的优势，主要是相对于table布局来说的。主要表现为下面几个方面：

1，更快的网页呈现速度；

2，更佳的后台编程支持度；

3。更好的搜索引擎友好性。

4。更优的网页改动重构性。

劣势：

1。一行盒子的高度有出入可能导致将下一行的盒子“卡住 ”。像俄罗斯方块放错地方的时候被“卡住”后以下空出一块空间。

2。浮动元素导致其上级父盒子的“高度塌陷”，也就不能如正常文档结构所体现的那样自然包裹其下级元素。

3，浮动元素还导致其后的兄弟元素也跟着浮动元素到同一行了。

4，其它若干在IE6/7下让微软蒙羞的著名bug也多与浮动有关。


三：inline-block布局：一种更优的布局技术


1）inline-block布局：一种全新的web页面布局解决方式，其既能够充分发挥div+css浮动布局的长处。又可克服浮动盒子所带来的缺点

  • 什么是inline模式的盒子：一个盒子在一行内连续排列出来，后一个紧跟着前一个在一行中。直到碰到行尾后再自然换到下一行继续如此显示。

    行内盒子不能设置宽度和高度，也没有上下margin和padding（但左右margin和padding存在）。

    常见行内元素：span，a。img，b。i，u

  • 什么是block模式的盒子：一个盒子自身就占领其所在父盒子中的一整行，而无论其本身的宽度多少，也不会“折行”。常见块元素：div。hr，p，ul/li。ol/li。dl/dt/dd。h1-h6。pre，form

2）那么inline-block的表现又是什么呢？

  • 盒子跟外界（其兄弟元素）表现为内联（inline）模式，即能够跟其兄弟元素自然并排放置（类似img标签） ，但盒子作为总体，又表现为块模式，即该盒子本身不能“自己主动换行显示”，能够设定宽高。
  • 实际上，从总体表现上来说。inline-block盒子的表现很类似“img”元素，即多个img能够在一行中出现。但一个img本身是不会“中间折行”的（对照：span和a标签碰到了行尾都会自己主动折行）。仅仅只是img作为图片显示元素。其“内部”不能放其它内容了，而inline-block盒子却是我们最常规的可随意放置其它内容的一个“容器”。

3）各种布局本质上解决什么问题？

所谓布局。无非事实上就是解决元素放置到页面上的排布方式。从“平面区块”的角度来说，无论用哪种布局方式。无非就是解决2个问题：

  • 元素怎么从上到下排列出来：

块元素（如div）自然上下，br元素明白换到下一行。tr元素表示表格的行。可见上下排列关系中。无需额外css技术。

  • 元素怎么从左到右排列出来：
  1. 行内元素自然从左到右
  2. table中的td
  3. 盒子的浮动
  4. inline-block！
  • 布局原理：层层 划分“当前区域”
  • 划分方法有两个：
  1. 上下划分
  2. 左右划分

比float更好的页面布局inline-block

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXE2MjQyMDIxMjA=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

比float更好的页面布局inline-block

inline-block布局的特点和做法很easy：

  • 依据我们前面的inline-block的表现的介绍，和布局的本质思想，我们实现inline-block模式的布局很easy：
    1. 实现横向排列，这是inline-block盒子的自然表现（就如图片自然横向排列一样。这也是“行内块”盒子所体现的“inline”的地方。我们所要做的无非就是设定合适的宽度。
    2. 实现纵向排列：跟inline-block无关，也跟float无关，而是直接利用我们前面说的div和br，轻松搞定！

四：inline-block布局要解决的问题(实现兼容性的做法)


  • 我们非常快发现，假设页面不考虑象素级的精确设计，使用inline-block技术进行布局非常easy理解和easy实现。差点儿跟我们在地面上贴瓷砖一样。但我们也发现，被inline-block化之后的盒子。盒子跟盒子之间有几个像素的间隙。就像图片自然并排放置一起时的样子，这显然对现代像素级的设计需求来说是不够的！

    那怎么解决：

    1. 首先，间隙是什么？——空格！
    2. 其次，怎么去除间隙？——父盒子设置font-size:0px；
    3. 最后，没有最后了。这就差点儿好了——对现代浏览器来说
  • 这里将block元素转为inline-block元素有两个easy解决的兼容性问题：
  1. 将块盒子转换为行内块盒子：xxx{display:inline-block;}

xxx { *display:inline;}/*再写回“inline”模式。这是对IE6/IE7兼容，仅仅有这样IE6/7才表现为行内块盒子*/

  1. font-size:0不能消除苹果浏览器safari的盒子间隙，需再设置letter-spacing为负值，比方：letter-spacing:-4px；

此负值在font-size为0的情况下，对其它浏览器无影响。

此负值大小受字体名称和字体大小影响，需依据场合略调整。比方常见的12px的Arial字体是-4px，12px的宋体是-8px

  • 将inline元素转为inline-block元素也行，但兼容性更差些，不推荐

五：inline-block布局应用（案例演示）

最后的总结代码例如以下：

/*应用到inline-block布局的外面盒子*/

.out{

font-size:0px;/*inline-block布局的核心代码1*/

letter-spacing:-8px;/*兼容代码1：兼容苹果浏览器。负值对其它浏览器无效*/

text-align:center;/*inline-block布局的辅助代码1，能够left。center。right*/

}

/*应用到inline-block布局的里面盒子*/

.in{

display:inline-block;/*inline-block布局的核心代码2*/

vertical-align:top;/*inline-block布局的辅助代码2。能够top, middle, bottom*/

}

.in{

*display:inline;/*兼容代码2：兼容 IE6/7*/

}

參考资料：

传智播客罗弟华老师研究 inline-block布局技术 视频下载

链接:http://pan.baidu.com/s/1sjrqYfj 提取password:gh3r

CSS float浮动的深入研究、具体解释及拓展(一)

http://www.zhangxinxu.com/wordpress/?

p=583

CSS float浮动的深入研究、具体解释及拓展(二)

http://www.zhangxinxu.com/wordpress/?p=594

拜拜了,浮动布局-基于display:inline-block的列表布局

http://www.zhangxinxu.com/wordpress/?p=1194

inline-block 前世今生

http://ued.taobao.org/blog/2012/08/inline-block/

CSS浮动布局inline-block

http://www.keakon.net/2010/11/13/CSS%E6%B5%AE%E5%8A%A8%E5%B8%83%E5%B1%80%E4%B8%8Einline-block

相关文章