前端和后台最大的区别在于业务逻辑。前端基本上没什么业务逻辑,后台普遍都是业务逻辑。因此有人喜欢前端,有人喜欢后端。觉得前端难的人,在于对 CSS 的不理解。本系列文章将带领大家从最基本的每个属性讲起,让你彻底掌握 前端布局。
css 布局之于页面就如同 ECMAScript 之于 JS 一般,细想一番,html 就如同语文,css 就如同数学,js 就是物理。 回到主题,从最开始的 css 到如今的 sass(less),开发的效率确实变得越来越高效,但是可能有时候我们还是会对页面布局产生烦恼的情绪,比如:我给他加粗了,没变化;我调整了显示位置,却不动。造成这些问题的很大原因在于我们可能没对 css 布局这块做一个系统的梳理。在此分享给大家,希望和大家共同提高!
display
是 CSS 中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值,这与元素的类型有关。对于大多数元素它们的默认值通常是 block
或 inline
。一个 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单独拎出来讲,说来惭愧,很长一段时间我都是蒙着用它的,对于block、inline、inline-block的区别我自己总结了一句话
block:有宽高,不在同一行; inline:同一行,无宽高; inline-block: 有宽高又在同一行
这算是个小插曲吧,接着我们的布局之旅;在此之前,读者需可以先阅读下文的float布局和clear的知识再回头来看这知识会容易不少,然后我们会对比inline-block布局相对于float布局的优势;
.box { float: left; width: 200px; height: 100px; margin: 1em; } .after-box { clear: left; }
.after-box 我在使用 clear,所以我不会浮动到上面那堆盒子的旁边。
你可以用 display
属性的值 inline-block
来实现相同效果。
.box2 { display: inline-block; width: 200px; height: 100px; margin: 1em; }
这次我可没有用 clear
。
使用inline-block布局的注意项:
①vertical-align 属性会影响到 inline-block 元素,你可能会把它的值设置为 top 。 ②你需要设置每一列的宽度 ③如果HTML源代码中元素之间有空格,那么列与列之间会产生空隙
你得做些额外工作来让IE6和IE7支持 inline-block
。有些时候人们谈到 inline-block
会触发叫做 hasLayout
的东西,你只需要知道那是用来支持旧浏览器的。如果你对此很感兴趣,可以在后面的链接中找到更详细的信息。