浮动与定位

float特征：

float: left | right | none | inherit;（只能左右浮动，不能上下浮动）
将元素排除在普通流之外，元素将不在页面中占据空间
将浮动元素放置在包含框的左边或者右边，浮动元素依旧位于包含框之内
浮动的框可以向左或者向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止
，浮动元素的外边缘不会超过其父元素的内边缘
浮动元素不会互相重叠，行内元素浮动后会变为块级元素

  1. 块在一排显示
  2. 内联支持宽高
  3. 默认内容撑开宽度
  4. 脱离文档流
  5. 提升层级半层

clear清除浮动：
clear : left | right | both | none | inherit; （元素的某个方向上不能有浮动元素）
clear : both; （在左右两侧均不允许浮动元素）
清除浮动的方法：

  • 加高（问题：扩展性不好）
  • 父级浮动（问题：页面中所有元素都加浮动，margin左右自动失效）
  • inline-block 清除浮动方法（问题：margin左右auto失效）
  • 空标签清浮动（问题：IE6最小高度19px;(解决后IE6下还有2px偏差)）
  • br 清除浮动（问题：不符合工作中：结构、样式、行为，三者分离的要求）
  • after伪类 清除浮动方法：给元素尾部添加内容或者zoom缩放（触发IE下 haslayout，使元素根据自身内容计算宽高，FF不支持）
  • overflow:hidden 清除浮动（问题：需要配合宽度或者zoom 兼容IE6、IE7）
    （overflow: scroll | auto | hidden; overflow: hidden;溢出隐藏）

CSS定位：

只有position属性值为relative、absolute、fixed才可以使用,top、right、bottom、left属性。

  • static静态定位（不对它的位置进行改变）
  • fixed固定定位（参照物—浏览器窗口）——做弹窗广告用（生成固定定位的元素，相对于浏览器窗口进行定位）
  • relative相对定位（参照物以他本身）（生成相对定位的元素，相对于其正常位置进行定位）
  • absolute（绝对定位）（除了static都可以，找到参照物，与它最近的已经有定位的父元素进行定位）（生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位）

z-index：

  • z-index属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
  • 定位的基本思想: 它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

一切皆为框：

  • 块级元素: div、h1或p元素 即：显示为一块内容称之为 “块框“ ;
  • 行内元素: span,strong,a等元素 即：内容显示在行中称 “行内框”;
  • 使用display属性改变成框的类型 即：display:block; 让行内元素设置为块级元素，display:none; 没有框

    元素类型的转换

    元素类型

    根据css显示分类 ，HTML元素被分为三种类型:块状元素，内联元素，可变元素
    块元素— block
    1、默认独占一行
    2、没有宽度时，默认撑满一排（块状元素默认宽度为100%）
    3、可以定义自己的宽度和高度 常见的块状元素有：div ul li h1-h6 p ol
    内联元素（行内元素）—inline
    1、多个内联元素可以同一行显示
    2、高和宽由内容撑开
    3、不支持宽高
    4、不支持上下的margin 常见的内联元素有：a br strong em span img
    可变元素
    需要根据上下文关系确定该元素是块元素或者内联元素

    span标签

    span标签是行内元素，它本身没有固定的格式表现，只有相应的样式才会产生视觉上 的变化。当其他文本都不合适，就可以是由span标记

    元素类型的转换

    盒子模型可通过display属性来改变默认的显示类型
    display属性与属性值 (18个属性值) 属性值：block/inline/inline-block/none/list-item/table-headergroup/table-footer-group….
    作用：该属性设置或检索对象元素应该生成的盒模型的类型
    1)Block块状显示：使内联元素具备块属性标签的特性
    2)inline内联显示：使行块属性标签具备内联元素的特性
    3)Inline-block行内块元素显示：元素的内容以块状显示，并且与行内的其他元素显示 在同一行，支持宽高, 没有宽度的时候由内容撑开宽度，只有这一个元素类型支 持vertical-align属性。（img,input）
    4)none 此元素不会被显示。
    5)list-item:将元素转换成列表。li的默认display类型 当元素设置了float属性后，就相 当于给该元素加了display:block;属性,且宽度为内容撑出来的宽度；

    可置换元素

    img, input,等内联元素，他们区别一般inline元素： 如img|input|select|textarea|button|label等有内在尺寸且可以设置 width/height属性的这类元素 他们的性质同设置了display:inline-block的元素一致。 被称为可置换元素