前置知识
- 了解html各个标签
- 对css各种属性有一些了解
- 理解盒子模型
正文
对于网页制作的新手来说, 了解了html各种标签的含义, 并不能够制作出像网上那些绚丽的网页.
一个网页的制作过程, 要经过一下几个阶段:
- 设计
- 布局分析
- 编写html, 并用css布局
- css来进行各个布局区块内部的样式编写
- js来编写动态效果和其他功能脚本
我们这里研究的是第三部分: 当我们确定了布局, 如何用html和css把布局描述出来
-
html编写
html是用来表达文档结构的,当看到一个h1标签, 不应该去想这一标签让文字放大加粗, 而应该想这个标签引用的文字, 是一个一级标题, 这才是html的初衷. html中不应该出现描述样式的属性如
width,sytle等.html不应该去思考样式.
-
文档流
怎么定位? 很多人直接就开始讲定位的属性和方法. 其实, 要真正理解定位, 就要先了解文档流.
什么是文档流? 写出来的html文档的顺序, 就是文档流的顺序. 当不加任何修饰的时候, 页面上显示出来的时候, 和你html代码是很相像. 也就是说, 所写的html文档的各个元素, 是按这个默认顺序排列下来的.
-
定位
有了这个基础,再来看定位:定位有两种方式.-
float定位
float有两个值:
left,right. 分别表示向左向右浮动. 一旦一个元素采用了float进行定位, 那么这个元素将脱离文档流. 意思是这个元素虽然在页面上还看得到, 但是已经不据占位置了, 后面的元素会补上来.那么它会到哪呢? 飘走了… 一个较为明确的说法是: 因为任何一个元素可以成为一个盒子模型, 那么这个元素有个边框, 浮动的框可以根据float的值是
left还是right进行向左或向右移动, 直到它的外边缘碰到父元素的边框或另一个同级元素的边框为止.float的块级元素将不占一正行, 宽度为内容实际宽度.
在这个元素后面的文档流部分会顶上来, 取代这个元素的位置. 但是后面那个元素里的内容, 比如说文字, 会围绕在上面那个浮动元素周围. 这个效果不是很好表达,大家可以自己做个试验. 定义两个div, 里面都写上文字, 注意第二个div里的文字要比第一个多(这样才能环绕), 让后给第一个加CSS属性:
float:left. 然后就看到效果了. position定位
-
position有四个值:```absolute```, ```relative```, ```fix```, ```static```.
先说static,这个是默认值,每个元素如果没有定义position属性,就等于是这个值.所以,不解释了,可以说就是没有定位方式.
关键是其他的三种.选择其中任何一个后,就可以按自己需求布局了.这时候你可以用CSS中的四个属性:```top```, ```right```, ```bottom```, ```left```. 比如```top:100px```, 表示相对于”相对元素”(稍后解释这个相对元素)的顶部有```100px```的距离.其他以此类推.
相对元素是什么? ```absolute```, ```relative```, ```fix```这三个值决定了这个相对元素:
1. relative
元素会相对于自身原来在文档流的位置进行偏移. 这时定义```top:100px```就表示相对它本来应该在的位置向下偏移了```100px```.
2. absolute
元素框从文档流完全删除, 并相对于其包含块定位.
包含块定义:
这个包含块并不一定是直接父元素, 一个元素可能被包在好几层块之内. 距离最近的,postion属性为absolute relative fixed 三者之一的祖先元素.
3. fixed
元素框的表现类似于将 position 设置为 ```absolute```，不过其包含块是视窗本身。
练习与参考
以上是定位的理论, css的学习是一个不断熟练的过程, 写的时候可以参照成熟网站的类似布局, 通过chrome开发者模式来研究别人的页面写法很有裨益.
另外[CSS禅意花园]这本书值得一看, 虽然比较老, 但是里面的一些基础知识, 基本css写法是值得学习的.
