[Web] HTML 和CSS 开发基要

前言

任何讲HTML 和 CSS 的书没有不超过500 页的。数量繁多的html tag 和使用灵活(诡异)的css 让web 开发时常无所适从,本文试图用比较简短的篇幅来涵盖html 和 css 开发的骨干知识。

1. Box Model - 每个html元素都是一个盒子

这个二维的平面的盒子,如下图所示,除了盒子中间的Content, 从内往外有Content, Padding, Border, 和Margin. 其中 Margin 和 padding 是透明的。left 和top 决定了盒子的位置。此外, 还有一个图中没有展现出来的 z-index 来确定盒子的层次顺序。

2. Display – 给盒子确定显示方式

常见的Display 方式有Block 和 Inline. 当元素display 声明为block 时,block 与block 之间总是上下关系。 当元素display 声明为inline 时, inline从左到右水平铺过去。 如下图所示。

当display 设置为none 的时候,元素在页面上不显示不占位。而设置 Visibility为 hidden 的时候,元素虽然不显示,位置还是占着的。

Html tag 有自己的默认display 方式,比如 <div> 的默认display是 block, <span>的默认display方式是 inline-block.

这里列出了所有 display 方式的解释。

这里列出了所有html tag 的默认display 方式。

目前出现了一种新的display 方式: flex. 移动开发使用flex 会变得非常方便。

3. Position – 给盒子确定位置

所有华丽的页面都是是由种5类型的位置构成的: static, relative, absolute 和 fixed. 还有另外一种特殊的float 位置。 当元素使用static 和 relative 位置时, 元素随从左到右,由上到下在页面上 摊开(1)Relative是指和 static 的相对位置。 如下图所示, 把第三个span 设置为 relative position; left:5px 的意思是说: 相对于 static 位置左边空出5px 的空间。Html 元素的默认位置是 static。使用relative 的好处之一是可以使用 top, left 来移动元素. Static 是唯一一种没有起始位置的position。

当采用 absolute 和fixed 的时候。 元素在渲染的时候会被抽离出来,当所有 static 和 relative 的元素都渲染好了以后,再渲染到页面上。 absolute 渲染的时候相对于最近找到的非static 父元素(2), fixed 渲染的时候相对与viewport左上角

Float 只有在使用relative 和 static 的时候才有效。你可能要问了,我用了relative 并且还用了 left top. 这个时候元素怎么布局呢? Left top 会在float 完毕后在按照 left top 进行偏移。

4. 小结

在实际开发中,css 需要强记的内容并不是很多,一旦掌握了 box model , display 和 position的用法。 开着google 和 stackoverflow , 几乎没有写不出来的页面。

--------

注释:

(1). 当元素的display 设定为 block 时, 那就只是从上到下排布,而不是 从左到右了。

(2). 为什么是非 static 元素的父节点呢? 关于这一点。 有人说是css 的设计者希望用static 做为一个是否相对于父节元素的控制因素,但我觉得这个理由有些牵强。我认为原因是,按absolute 布局的元素必须要找到最近的一个有起始位置的container block. Static 元素没有起始位置 top 和left ,无法构成一个 container block. 所以absolute 元素无法相对于static 父元素定位。

https://www.webkit.org/blog/116/webcore-rendering-iii-layout-basics/
https://www.webkit.org/blog/117/webcore-rendering-iv-absolutefixed-and-relative-positioning/

参考链接:

http://stackoverflow.com/questions/20718577/how-css-positions-work-why-absolute-elements-stack-up-on-each-other-instead-of

http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#3_5

 

blog comments powered by Disqus