css015 定位网页上的元素

css015 定位网页上的元素

一、   定位属性的功能

1、         四中类型的定位

Position: absolute relative fixed static

a、 绝对定位

绝对定位通常单位为：px  em  percentage

绝对定位会脱离页面流，相对的是整个浏览器

如果a标签在设定了absolute relative fixed值的b标签中，那么a标签就是性对与b标签定位。

b、相对定位

相对定位是相对于当前html流中的当前位置进行定位的。

c、 固定定位

Background-attacment:fixed;

d、  静态定位

默认的定位方式

2、         设置定位值

a、 position:reality

top:2px;

right:5px;

bottom:5px;

left：7px；

3、         当绝对定位变为相对定位时

a、 绝对定位是相对于离它最近的父元素的边界上。

b、 如果一个标签的位置是绝对定位的，且它又不在其他任何设定了absolute、relative或fixed定位的标签里面，那它就相对于浏览器的窗口定位。

c、如果一个标签处在另一个设定了absolute、relative或fixed定位的标签里面，那它就是相对于另一个元素的边沿进行定位。

4、         何时何处使用相对定位

   a、

5、         堆叠元素

   a、z-index 控制元素的堆叠顺序，数值越大，堆叠的位置越高。

6、         隐藏部分网页

a、 visibility（可见性）值可为：hidden（隐藏） visible（可见）（与display的none值有点像）

b、opacity：0；（隐藏）   opacity：1；（显示）

c、

二、   强大的定位策略

1、          在元素内部进行定位

A、利用定位最有效的方法之一就是让小的元素相对于网页上的其他元素进行定位

2、          让元素超出方框

3、          用固定定位创建css式的框架

Css016 设计打印页面的css技术

一、     media样式表的作用

css支持10种不同的媒体类型：all（使用每一种设备）、braille、embossed、handheld、print（使用与打印网页）、projection、screen（使用与显示器）、speech、tty、tv

二、     如何添加media样式表

给外部样式表指定媒体类型

<link rel="stylesheet" media="print" type="text/css" href="print.css">

在样式表中指定媒体类型

@media print{

<!-- put your styles for the printer in here -->

}

三、     创建打印样式表

用!important覆盖屏显样式

h1{ color：#000 !important；

}

重写文本样式

定义打印背景

四、     保留背景元素

1、在html中添加<img>标签，位置在打印是图片需要出现的地方：

<img src="logo.png" height="100" width="100" class="logo">

2、在朱样表中添加隐藏图片的样式

.logo { display: none; }

3、 在打印样式表中添加最后一个样式，用来显示图片

.logo{ display:inline; }

4、隐藏不需要的页面区域

5、给打印添加分页符

Css017 改正css设计习惯

一、     添加注释

二、     组织样式和样式表

三、     要根据用途而不是外观来命名样式

四、     不要根据位置命名

五、     不要用意义含糊的名称

六、     使用多各类可以节省时间

上星期忘了更新了

版权声明：未经作者同意，不得私自转载。http://www.cnblogs.com/lal-fighting/