对CSS中的Position、Float属性的一些深入探讨

本文主要探讨点：

1.Position、Float属性的基本使用方法
2.Position、Float属性对元素所造成的影响
3.Position、Float属性交叉使用上面的影响
4.Position、Float属性使用上的小技巧

本文结构点：

1.HTML布局的基本要点（点我直接跳转）
  盒子模型
  HTML的普通流

2.Position属性（点我直接跳转）
  属性值介绍
  用法介绍
  一些关于position的小知识

3.Float属性（点我直接跳转）
  属性值介绍
  用法介绍
  与Position之间的兼容问题

HTML布局的基本要点：

如果要掌握、运用好Position、Float属性必须要对HTML的两个基本点有清晰的了解。

1.盒子模型（box model）
2.HTML的普通流（normal flow）
盒子模型
在HTML中元素的盒子模型分为两种：块状元素、行内元素，请注意这里的块状元素（Block）和行内元素（Inline）与Display属性中的inline、block两个属性值并不等同。盒子模型中的Inline、Block类似于是Display属性的父类，例如：Display属性中的list-item属性值是属于块状（Block）类型的。

我们直观的上看两种盒子模型的区别

•块状（Block）类型的元素可以设置width、height属性，而行内（Inline）类型设置无效。
•块状（Block）类型的元素会独占一行（直观的说就是会换行显示，无法与其他元素在同一行内显示，除非你主动修改元素的样式），而行内（Inline）类型的元素则都会在一行内显示。
•块状（Block）类型的元素的width默认为100%，而行内（Inline）类型的元素则是根据自身的内容及子元素来决定宽度。
列举出一些大家常见的元素的分类

•块状元素：P、DIV、UL、LI、DD、DT...
•行内元素：A、IMG、SPAN、STRONG...
HTML的普通流
浏览器在读取HTML源代码的时候是根据元素在代码出现的顺序读取，最终元素的呈现方式是依据元素的盒子模型来决定的。行内元素是从左到右，块状元素是从上到下。（如下图）

发表评论 共有条评论 用户名: 密码: 验证码: 匿名发表