css回忆（一）

1、css的引入方式：

　　a) 在head部分加入<link  rel="stylesheet" type="text/css" href="my.css"/>,引入外部的CSS文件。

　　b) 在head部分加入
　　　　<style type="text/css">
　　　　　　div{margin: 0;padding: 0;border:1px red solid;}
　　　　</style>

　　c) 直接在页面的标签里加　<div style="border:1px red solid;">测试信息</div>

　　d) @import导入

　　　　<style type="text/css">
　　　　　　@import url(my.css);
　　　　</style>

2、盒子模型

　　在所有的页面中添加下列代码，告诉编译器是使用标准 w3c 盒子盒子模型进行解释代码：

　　<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

3、定位：

　　在CSS中关于定位的内容是：position:relative | absolute | static | fixed

　　　　static 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。
　　　　relative 不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级。
　　　　absolute 脱离文档流，通过 top,bottom,left,right 定位。选取其最近的父级定位元素，当父级 position 为 static 时，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。
　　　　fixed 固定定位，这里他所固定的对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。

　　CSS中定位的层叠分级：z-index: auto | number;

　　　　auto 遵从其父对象的定位
　　　　number 无单位的整数值。可为负数。

　　position 属性用于设定定位属性：

　　　　relative：相对定位（只是在表现上出现偏移）

　　　　absolute：绝对定位（脱离文档流）

相对定位：元素在文档流中依然占据原来的位置，只是在“表现”上会根据原来的位置而产生相对偏移。

　　相对定位图示：

　　　　　　

示例图上虚线部分为元素原来的位置并得以保留，元素相对其原始位置向右偏移30px，向下偏移20px。

 

绝对定位：块元素完全从文档流中删除，并通过精确的定位属性值来确定元素的位置。该元素原来在文档流的位置将消失，元素定位后生成一个块级元素框。

　　图示如下：

　　　　　　

　　　绝对定位后，框2原来的位置消失，框1和框3挨在了一起。框2的定位值（top和left取值）为相对其已定位的祖先元素。

　　　绝对定位中top等元素的用法和相对定位一致，请参考相对定位一文说明。

　　提示

1. 1. 　　要是用绝对定位，必须指定 left，right，top，bottom 属性中的至少一个
   2. 　　使用绝对定位的元素，若无已定位的祖先元素，则其相对位置可能会是浏览器画布（浏览器可显示页面）body或HTML元素