CODE大全
版权声明:本文为博主原创文章,未经博主允许不得转载。

前端布局 display、inline-block 属性使用详解

发布时间:『 2016-11-17 17:54』  博客类别:WEB前端  阅读(1785) 评论(0)

    前端和后台最大的区别在于业务逻辑。前端基本上没什么业务逻辑,后台普遍都是业务逻辑。因此有人喜欢前端,有人喜欢后端。觉得前端难的人,在于对 CSS 的不理解。本系列文章将带领大家从最基本的每个属性讲起,让你彻底掌握 前端布局。

css 布局之于页面就如同 ECMAScript 之于 JS 一般,细想一番,html 就如同语文,css 就如同数学,js 就是物理。 回到主题,从最开始的 css 到如今的 sass(less),开发的效率确实变得越来越高效,但是可能有时候我们还是会对页面布局产生烦恼的情绪,比如:我给他加粗了,没变化;我调整了显示位置,却不动。造成这些问题的很大原因在于我们可能没对 css 布局这块做一个系统的梳理。在此分享给大家,希望和大家共同提高!

填坑 display

display 是 CSS 中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值,这与元素的类型有关。对于大多数元素它们的默认值通常是 blockinline。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。

block:
div 是一个标准的块级元素。一个块级元素会新开始一行并且尽可能撑满容器。其他常用的块级元素包括 p 、 form 和HTML5中的新元素: header 、 footer 、 section 等等。

inline:
span 是一个标准的行内元素。一个行内元素可以在段落中<span> 像这样 </span>包裹一些文字而不会打乱段落的布局。 a 元素是最常用的行内元素,它可以被用作链接。

none:

另一个常用的display值是 none 。一些特殊元素的默认 display 值是它,例如 script。 display:none 通常被 JavaScript 用来在不删除元素的情况下隐藏或显示元素。

它和 visibility 属性不一样。把 display 设置成 none 不会保留元素本该显示的空间,但是 visibility: hidden; 还会保留。

扩展:

每个元素都有一个默认的 display 类型。不过你可以随时随地的重写它!常见的例子是:把 li 元素修改成 inline,制作成水平菜单。

*inline-block布局

把inline-block单独拎出来讲,说来惭愧,很长一段时间我都是蒙着用它的,对于block、inline、inline-block的区别我自己总结了一句话

block:有宽高,不在同一行; inline:同一行,无宽高; inline-block: 有宽高又在同一行

这算是个小插曲吧,接着我们的布局之旅;在此之前,读者需可以先阅读下文的float布局和clear的知识再回头来看这知识会容易不少,然后我们会对比inline-block布局相对于float布局的优势;

困难的方式(float布局)

.box {
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}
.after-box {
  clear: left;
}

float布局

.after-box 我在使用 clear,所以我不会浮动到上面那堆盒子的旁边。

容易的方式(使用inline-block)

你可以用 display 属性的值 inline-block 来实现相同效果。  

.box2 {
  display: inline-block;
  width: 200px;
  height: 100px;
  margin: 1em;
}

inline-block 布局

这次我可没有用 clear 。
使用inline-block布局的注意项:

①vertical-align 属性会影响到 inline-block 元素,你可能会把它的值设置为 top 。
②你需要设置每一列的宽度
③如果HTML源代码中元素之间有空格,那么列与列之间会产生空隙

你得做些额外工作来让IE6和IE7支持 inline-block 。有些时候人们谈到 inline-block 会触发叫做 hasLayout 的东西,你只需要知道那是用来支持旧浏览器的。如果你对此很感兴趣,可以在后面的链接中找到更详细的信息。


——— 全文完 ———
如有版权问题,请联系532009913@qq.com。
关键字:   HTML5     web前端     display     inline-block     浮动  
评论信息
暂无评论
发表评论
验证码: 
Powered by CODE大全 | 鄂ICP备14009759号-2 | 网站留言 Copyright © 2014-2016 CODE大全 版权所有