css定位

定位：
定位就是设置盒子的位置和坐标
定位分绝对定位和相对定位

定位标记：position:absolute（绝对定位以网页为坐标：常用）

left:(x轴)
top :（y轴）

position:relative 相对定位是以盒子为坐标（通常都是盒子嵌套盒子才用相对，不常用）；

left:(x轴)
top :（y轴）
用定位必须写坐标，绝对定位，盒子会脱离文档流；（浮动也脱离文档流）

两个盒子定位在同一坐标范围内会产生重叠部分，设置层叠效果用z-index,两个盒子必须都要写z-index： 谁的值写的大，谁会显示在前面

也可用软件的设计中的布局－－绘制层……来设置

 

控制盒子的显示和隐藏：
属性 visibility(能见度，可见性):hidden(隐藏); 隐藏后扔然占位；

 

display(显示):none; 隐藏后不占位；
样式对A标记的控制：用快捷键Ctrl+j 选择链接 ，链接颜色就是本身什么也点的颜色。变换图像链接就是鼠标放在上面时显示的颜色。
已访问链接就是已经访问过的链接的颜色。活动链接，就是点住此链接不放时显示的颜色。

这是一种伪元素选择器：同一个标记，有多种姿态；只有A链接和p标记使用伪元素选择器；

a:link（链接颜色） {
color: #FF0000;
}
a:visited （已经访问过的链接的颜色）{
color: #0000FF;
}
a:hover （鼠标放在上面时显示的颜色） {
color: #00FF00;
}
a:active （就是点住此链接不放时显示的颜色）{
color: #FFFF00;
}
将鼠标放在上面时显示的颜色做成抖动效果
a:hover {
color: #00FF00;
position:relative; 就是用的相对定位；
left:10px;
top:10px;
在css中〈!--浏览器认识的就显示，不认识就屏蔽--〉
做一个导航特效，鼠标一放在上面的时候显示另一张图片：

思路，1 先用ul做出列表导航 2 给列表加a链接 3 改a链接的默认色彩 4 去除无序列表前的点 5 使列表左浮动

6 加边框，调外边距 7 给li加背景图片；注意看图片的尺寸； 8 确定li宽高 9 调字体居中和垂直居中；

然后在伪元素选择器中的hover 标记添加背景图片，

这里我们要了解的一个知识点是： a 标记不是一个盒模型，不是四边形，所以不能写宽高，但是为了添加宽高，要用样式

使a 标记变成盒模型 display(显示): block (块) 可以理解为显示边框；

然后就可以和a 标记添加宽高了；

 

css 对空白页面的控制；
white(白色的)-space（空间）:nowrap （强制在同一行内显示的所有文本，直到文本结束或者遭遇br标记；）

 

css 对溢出样式的的控制， 溢出就是内容超出盒子设定的宽度；
用overflow（流动）溢出 : 1.hidden(隐藏) 2.scroll(滚动条)；

ie会对溢出做出自动调整，将宽高调大，使内容显示出来，但是容易影响周围的内容；

 

css 对滚动条的控制；使用css代码生成器－－滚动条－－查看源代码，不要cursor（对光标的控制）

但是在ie里能控制，在火狐里则不能；还可用网页调色板的吸管去吸取其它网页的rgb颜色；
选择器的命名方法：起名尽量做到见名知意：

1.驼峰法：一般用于合成词；第一个单词小写，然后第二个大写…… 样式一般用驼峰；

2.帕斯卡命名法：每个单词首字母大写； java php 给变量起名的时候一般用；

3.匈牙利命名法：采用 _ 一般用于数据库；
不同浏览器差异的解决方案：
1.盒模型的居中不一样，text-align:center ie浏览器好使，ff不好使；用margin:0px auto; 置顶居中解决；
2.ie指定的最小高度为18px.18px以内都按18px算，而ff指定多少都可以；可以用标尺软件量出；

解决方案是有 overflow:hidden 原理是ie自动溢出，所以用隐藏溢出即可；或者font-size:0px; 但是这个不好理解；
3. ie 自动调整高度，ff不会， 排版尽量不写高度，ie和ff都会随内容而定
4. ie 和ff在列表显示上有差别解决方法如下：

*(代表所有的标记都受控 ){
margin:0px;
padding:0px;

}

5.浮动，必须清除浮动；clear（清除）:both（全部）

 

css项目实践
企业站 1创建css页面 html页面，用链接样式表的方法链接进来；
/*css的屏蔽 */
css页面思路：
*{ 1先解决列表差异；
margin:0px;
padding:0px;
}

body{ 2设定body 字体，和字体大小；
font-family:"宋体";
font-size:14px;
background:url(images/bg.gif);
}

a:link { 3.链接的四种样式；
color: #FF0000;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #0000FF;
}
a:hover {
text-decoration: none;
color: #00FF00;
}
a:active {
text-decoration: none;
color: #FFFF00;
}

.clr{ 4清除浮动；
clear:both;

}