总结CSS基础知识【复习之一】

浏览数：38 / 时间：2015年06月09日

知识解析：

CSS规定的定位机制有三种：分别是标准流、浮动及绝对定位。

W3C标准：结构化标准语言（HTML和XML）、表现标准语言（CSS）、行为标准语言（DOM和ECMAScript）

　　　　　 倡导结构、样式、行为分离

CSS中，存在3种的定位机制：标准文档流（Normal flow）、浮动（float）、绝对定位（absolute positioning）

标准文档流

特点：从上到下，从左至右，输出文档内容

　　　由块元素和行元素组成

块级元素

特点：从左到右撑满页面，独占一行

　　　触碰到页面边缘时，会自动换行

　　　即块级标签，如div、ul、li、dl、dt、p...

行级元素

特点：能在同一行内显示不会改变HTML文档结构

如：span、strong、img、input...

块元素和行级元素都是盒子模型

盒子模型是四种组成：boder+padding+margin+width等于盒子模型尺寸

自动居中——列布局

三个技能点：标准文档流、块级元素、margin属性

margin:0 auto

auto根据浏览器宽度自动设置两边的外边距

原理：（浏览器的宽度-外包含层的宽度）/2=外边距

如果想让你页面自动居中，当设置margin属性为auto的时候，不能再设置浮动或者绝对定位属性。

CSS中规定的第二种定位机制：能够实现横向多列布局

通过float浮动来实现

3个属性值：left 左浮动 right 右浮动 none 无浮动

特点：元素会左移，或右移，直到触碰到容器为止

设置了浮动的元素，仍旧处于标准文档流中。

当元素没有设置宽度值，而设置了浮动属性，元素的宽度随内容的变化而变化。
当元素设置浮动属性后，会对相邻的元素产生影响，相邻元素特指紧邻后面的元素
清除浮动的常用方法：
clear属性-常用clear:both clear:left或者clear:right 同时设置width:100%(或固定宽度)+overflow:hidden;
空标签无意义，不建议使用此方法清除浮动
横向两列布局
网页布局最常见的方式之一
主要应用技能：float属性—使纵向排列的块级元素，横向排列
margin属性—设置两列之间的间距
绝对定位布局
通过设置position属性实现
CSS中规定的第三种定位机制 能够实现横向多列布局及较为复杂的定位
position属性
拥有3种定位形式：1静态定位 2相对定位 3绝对定位
可设置4个属性值：static(静态定位) relative（相对定位）absolute(绝对定位)
fixed（固定定位）最后两个为绝对定位
相对定位
特点：相对于自身原有位置进行偏移
仍处于标准文档流中
随即拥有偏移属性和z-index属性
绝对定位
特点：建立了以包含块为基准的定位
完全脱离了标准文档流
随即拥有偏移属性和z-index属性
末设置偏移量
特点：无论是否存在已定位祖先元素，都保持在元素初始位置
脱离了标准文档流
设置偏移量
偏移参照基准：
无已定位祖先元素，以<html>为偏移参照基准
有已定位祖先元素，以距其最近的已定位祖先元素为偏移参照基准
当一个元素设置绝对定位，没有设置宽度时，元素的宽度根据内容进行调节
横向两列布局
使用absolute实现横向两列布局
常用于一列固定宽度，另一列宽度自适应的情况
主要应用技能：
relative——父元素相对定位
absolute——自适应宽度元素绝对定位
注意：固定宽度列的高度>自适应宽度的列

已知一设置了绝对定位的元素b，位于其父元素a中，a元素为静态定位，则b元素将以（ html元素）为基准进行偏

知识解析
因为a元素为静态定位，所以要以根元素为基准进行偏移，也就是htm元素。。

值得注意的地方：
外边距叠加问题
1. 当第一个元素在第二个元素上面时（在发生垂直外边距的情况下），第一个元素的底外边距与第二个元素的顶外边距发生叠加，那么外边距高度等于发生叠加外边距高度中的较大者。
2. 在标准文档流中块框会发生垂直外边距离叠加，但是行级框，浮动元素或者绝对定位之间的外边距不会叠加。
3. 段落上面空间等于顶外边距，没有设置外边距叠加，那么后续所有段落的空间将是相邻顶外边距和底外边距的和，就是段落顶外边距的两倍。发生外边距叠加时，段落之间的顶外边距与底外边距就叠加在一起，这样各边的距离就一致了。