Css使用小手册

最新推荐文章于 2023-02-21 13:51:51 发布

姚军权

最新推荐文章于 2023-02-21 13:51:51 发布

阅读量1.7k

点赞数 1

分类专栏： 2.6前端技术文章标签： css div float ie 浏览器

本文链接：https://blog.csdn.net/chinayaosir/article/details/6592360

版权

2.6前端技术专栏收录该内容

10 篇文章 1 订阅

订阅专栏

/***************************************************************/
title   :Css使用小手册
function:WEB BASIC TECHNOLOGY ARTICLE WITH CSS
file    :WEB-BASIC-CSS.TXT
author :chinayaosir   QQ:44633197
Tools   :IE6.0
date    :7/07/2011
blog    :http://blog.csdn.net/chinayaosir
note    :禁止其它网站转载此文章
/***************************************************************/
目录清单CONTEXT LIST
1.1CSS历史
1.2CSS版本
1.3CSS优点
1.4CSS浏览器兼容
2.1CSS语法与应用
2.2CSS选择器
2.3CSS样式
2.4CSS定位

/***************************************************************/
1.1CSS历史
CSS历史
CSS(Cascading Style Sheet，可译为“层叠样式表"或“级联样式表")
是一组格式设置规则，用于控制Web页面的外观。
通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。
页面内容存放在HTML文档中，
而用于定义表现形式的CSS规则则存放在另一个文件中或HTML文档的某一部分，通常为文件头部分。
将内容与表现形式分离，不仅可使维护站点的外观更加容易，
而且还可以使HTML文档代码更加简练，缩短浏览器的加载时间。

　1994年哈坤·利提出了CSS的最初建议；
伯特·波斯(Bert Bos)当时正在设计一个叫做Argo的浏览器，他们决定一起合作设计CSS。　　
当时已经有过一些关于样式表语言的建议了，但CSS是第一个含有“层叠"的主意的。
在CSS中，一个文件的样式可以从其他的样式表中继承下来。
读者在有些地方可以使用他自己更喜欢的样式，在其他地方去继承，
或“层叠"作者的样式, 这种层叠的方式使作者和读者都可以灵活地加入自己的设计，混合各人的爱好。
哈坤于1994年在芝加哥的一次会议上第一次提出了CSS的建议，1995年他与波斯一起再次提出这个建议。
当时W3C刚刚建立，W3C对CSS的发展很感兴趣，它为此组织了一次讨论会。
哈坤、波斯和其他一些人(比如微软的托马斯·雷尔登)是这个项目的主要技术负责人。
1996年底，CSS已经完成。1996年12月CSS要求的第一版本被出版。　　
1997年初，W3C内组织了专门管CSS的工作组，其负责人是克里斯·里雷。
这个工作组开始讨论第一版中没有涉及到的问题，于是1998年5月出版了CSS的第二版。到2007年为止，第三版还未完备。

/***************************************************************/
1.2CSS版本
　CSS有各种版本(即Level)，所以知道要使用哪个版本是很重要的。
CSS 在1996年末成为推荐标准，其中包含非常基本的属性，比如字体，颜色、空白边。
CSS2 在此基础上添加了高级概念(比如浮动和定位)以及高级的选择器
(比如子选择器、相邻同胞选择器和通用选择器)。
CSS2仍然是CSS的最新版本，尽管它早在1998年就已经成为推荐标准。
万维网联盟(W3C)的行动非常缓慢，所以尽管CSS3的开发工作在新千年开始之前就开始了，
但是距离最终的发布还有相当长的路要走，为提高开发和浏览器实现的速度，
CSS3被分割成模块，这些模块可以独立发布和实现。
CSS3包含一些令人兴奋的新特性，包括一个用于多列布局的模块，选择器模块最接近于完成，可能在2006年成为推荐标准。
因为预期从CSS2到CSS3的发布之间时间会很长，2002年人们启动了CSS2.1的开发。
这是CSS2的修订版，它计划纠正一些错误，并且更精确地描述CSS的浏览器实现。
CSS2.1正在逐渐接近完成，但是可能在2006年年底之前无法实现，然而，它更准确地反映了CSS当前的状态。

/***************************************************************/
1.3CSS优点
　采用CSS布局相对于传统的TABLE网页布局而具有以下3个显著优势：
1：表现和内容相分离
　　将设计部分剥离出来放在一个独立样式文件中，HTML文件中只存放文本信息。
这样的页面对搜索引擎更加友好。
2：提高页面浏览速度
　　对于同一个页面视觉效果，采用CSS布局的页面容量要比TABLE编码的页面文件容量小得多，
前者一般只有后者的1/2大小。浏览器就不用去编译大量冗长的标签。
3：易于维护和改版
　　你只要简单的修改几个CSS文件就可以重新设计整个网站的页面。
4: 使用CSS布局更符合现在的W3C标准.
　 **W3C组织并不是ISO 国际标准组织成员
/***************************************************************/
1.4CSS浏览器兼容
从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.

对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声明.

1.div的垂直居中问题
vertical-align:middle;
将行距增加到和整个DIV一样高 line-height:200px;
然后插入文字，就垂直居中了。缺点是要控制内容不要换行。

2. margin加倍的问题
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;

3.浮动ie产生的双倍距离
#box{
float:left; width:100px; margin:0 0 0 100px;
//这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略
}

4 IE与宽度和高度的问题
IE 不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。
这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，
如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。
比如要设置背景图片，这个宽度是比较重要的。
要解决这个问题，可以这样：
#box{ width: 80px; height: 35px;}
html>body #box
{
width: auto; height: auto; min-width: 80px; min-height: 35px;
}
5.页面的最小宽度
min -width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。
但IE不认得这个，而它实际上把width当做最小宽度来使。
为了让这一命令在IE上也能用，可以把一个<div> 放到 <body> 标签下，然后为div指定一个类, 然后CSS这样设计：
#container{ min-width: 600px; width:e-xpression(document.body.clientWidth < 600? "600px": "auto" );}
第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。
它实际上通过Javascript的判断来实现最小宽度。

6.DIV浮动IE文本产生3象素的bug
左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.
#box{ float:left; width:800px;}
#left{ float:left; width:50%;}
#right{ width:50%;}
*html #left{ margin-right:-3px; //这句是关键}
<div id="box">
    <div id="left"></div>
    <div id="right"></div>
</div>
7.IE捉迷藏的问题
当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。
有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。
解决办法：
对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。

8.float的div闭合;清除浮动;自适应高度;
例如：<#div id="floatA" ><#div id="floatB" ><#div id=" NOTfloatC" >这里的NOTfloatC并不希望继续平移，而是希望往下排。
(其中floatA、floatB的属性已经设置为float:left;) 这段代码在IE中毫无问题，问题出在FF。
原因是NOTfloatC并非float标签，必须将float标签闭合。
在 <#div class="floatB"> <#div class="NOTfloatC">之间加上 < #div class="clear">
这个div一定要注意位置，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。
并且将clear这种样式定义为为如下即： .clear{ clear:both;}
作为外部 wrapper 的 div 不要定死高度为了让高度能自动适应，要在wrapper里面加上overflow:hidden;
当包含float的 box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性用zoom:1;可以做到，这样就达到了兼容。

例如某一个wrapper如下定义： .colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}

9.对于排版
我们用得最多的css描述可能就是float:left.有的时候我们需要在n栏的float div后面做一个统一的背景,
譬如:   <div id="page">   <div id="left"></div>   <div id="center"></div>   <div id="right"></div>    </div>
比如我们要将page的背景设置成蓝色,以达到所有三栏的背景颜色是蓝色的目的,
但是我们会发现随着left center right的向下拉长,而 page居然保存高度不变,问题来了,
原因在于page不是float属性,而我们的page由于要居中,不能设置成float,
所以我们应该这样解决:
再嵌入一个float left而宽度是100%的DIV解决之
<div id="page">
<div id="bg" style="float:left;width:100%">
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
</div>
</div>

10.万能float 闭合(非常重要!)
关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup],
将以下代码加入Global CSS 中,给需要闭合的div加上 class="clearfix" 即可,屡试不爽.
/* Clear Fix */
.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
.clearfix { display:inline-block; }
/* Hide from IE Mac */
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */
或者这样设置：.hackbox{ display:table; //将对象作为块元素级的表格显示}

11.高度不适应
高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用margin 或paddign 时。
例：
#box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
<div id="box">
<p>p对象中的内容</p>
</div>
解决方法：
在P对象上下各加2个空的div对象CSS代码：
.1{height:0px;overflow:hidden;}或者为DIV加上border属性。

12 .IE6下为什么图片下有空隙产生
解决这个BUG的方法也有很多,
可以是改变html的排版,
或者设置img 为display:block
或者设置vertical-align 属性为 vertical-align:top | bottom |middle |text-bottom 都可以解决.
13.如何对齐文本与文本输入框
加上 vertical-align:middle;
<style type="text/css">

</style>

14.web标准中定义id与class有什么区别吗?
一.web标准中是不容许重复ID的,比如 div id="aa" 不容许重复2次,而class 定义的是类,
理论上可以无限重复, 这样需要多次引用的定义便可以使用他.
二.属性的优先级问题 ID 的优先级要高于class,看上面的例子
三.方便JS等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个ID,
否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一个ID来得简单.

15. LI中内容超过长度后以省略号显示的方法
此方法适用与IE与OP浏览器
<style type="text/css">

</style>

16.为什么web标准中IE无法设置滚动条颜色了
解决办法是
将body换成html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">

</style>

17.为什么无法定义1px左右高度的容器 IE6下这个问题是因为默认的行高造成的,
解决的方法也有很多
例如:overflow:hidden | zoom:0.08 | line-height:1px

18.怎么样才能让层显示在FLASH之上呢
解决的办法是给FLASH设置透明
<param name="wmode" value="transparent" />

19.怎样使一个层垂直居中于浏览器中
这里我们使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以2
<style type="text/css">
<!—
div
{
position:absolute;
top:50%;
lef:50%;
margin:-100px 0 0 -100px;
width:200px;
height:200px;
border:1px solid red;
}
-->
</style>

20. Div居中问题
div设置 margin-left, margin-right 为 auto 时已经居中，
IE 不行，IE需要设定body居中，
首先在父级元素定义text-algin: center;
这个的意思就是在父级元素内的内容居中。

21.链接(a标签)的边框与背景
a 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。
参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位,
若不设 height, 可以在 menubar 中插入一个空格。

22.超链接访问过后hover样式就不出现的问题
被点击访问过的超链接样式不在具有hover和active了
解决方法是
改变CSS属性的排列顺序: L-V-H-A
Code:
<style type="text/css">

</style>

23. 游标手指cursor
cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以

24.UL的padding与margin ul标签在FF中默认是有padding值的,
在IE中只有margin默认有值, 所以先定义 ul{margin:0;padding:0;}就能解决大部分问题

25. FORM标签
这个标签在IE中,将会自动margin一些边距,而在FF中margin则是0,
因此,如果想显示一致,所以最好在css中指定margin和 padding,
针对上面两个问题,我的css中一般首先都使用这样的样式
ul,form{margin:0;padding:0;} 给定义死了,所以后面就不会为这个头疼了.

26. BOX模型解释不一致问题
在FF和IE 中的BOX模型解释不一致导致相差2px
解决方法：
div{margin:30px!important;margin:28px;}
注意这两个 margin的顺序一定不能写反， important这个属性IE不能识别，
但别的浏览器可以识别。
所以在IE下其实解释成这样：
div {maring:30px;margin:28px}
重复定义的话按照最后一个来执行，所以不可以只写margin:xx px!important;
#box
{
width:600px; //for ie6.0/
- w/idth:500px; //for ff+ie6.0}
#box{
width:600px!important //for ff
width:600px; //for ff+ie6.0
width /**/:500px; //for ie6.0-}

27.属性选择器(这个不能算是兼容,是隐藏css的一个bug)
p[id]{}div[id]{}
这个对于IE6.0和IE6.0以下的版本都隐藏,
FF和OPera作用.属性选择器和子选择器还是有区别的,
子选择器的范围从形式来说缩小了,
属性选择器的范围比较大,
如p[id]中,所有p标签中有id的都是同样式的.

28.最狠的手段 - !important;
如果实在没有办法解决一些细节问题,
可以用这个方法.FF对于"!important"会自动优先解析,
然而IE则会忽略.
如下
.tabd1
{
background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/
background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}
值得注意的是，一定要将xxxx !important 这句放置在另一句之上，上面已经提过

29.IE,FF的默认值问题
关键在于IE和FF的默认值不一样而已，掌握了这个技巧，
你会发现写出兼容FF和IE的css并不是那么困难，或许对于简单的css，
你完全可以不用"!important"这个东西了。
我们都知道，浏览器在显示网页的时候，都会根据网页的 css样式表来决定如何显示，
但是我们在样式表中未必会将所有的元素都进行了具体的描述，
当然也没有必要那么做，所以对于那些没有描述的属性，
浏览器将采用内置默认的方式来进行显示，譬如文字，
如果你没有在css中指定颜色，那么浏览器将采用黑色或者系统颜色来显示，div或者其他元素的背景，
如果在 css中没有被指定，浏览器则将其设置为白色或者透明，等等其他未定义的样式均如此。
所以有很多东西出现FF和IE显示不一样的根本原因在于它们的默认显示不一样，
而这个默认样式该如何显示我知道在w3中有没有对应的标准来进行规定，
因此对于这点也就别去怪罪IE了。

30.为什么FF下文本无法撑开容器的高度
标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,
那我又想固定高度,又想能被撑开需要怎样设置呢？
办法就是去掉height设置min-height:200px;
这里为了照顾不认识min-height的IE6
可以这样定义: { height:auto!important; height:200px; min-height:200px; }

31.FireFox下如何使连续长字段自动换行
众所周知IE中直接使用 word-wrap:break-word 就可以了,
FF中我们使用JS插入的方法来解决
<style type="text/css">

</style>

13.为什么IE6下容器的宽度和FF解释不同呢
<?xml version="1.0" encoding="gb2312"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">

</style>

<div οnclick="alert(this.offsetWidth)">让FireFox与IE兼容</div>
问题的差别在于容器的整体宽度有没有将边框(border）的宽度算在其内,
这里IE6解释为200PX ,而FF则解释为220PX,那究竟是怎么导致的问题呢？
大家把容器顶部的xml去掉就会发现原来问题出在这,顶部的申明触发了IE的qurks mode,关于qurks mode、 standards mode的相关知识,
请参考:http: //www.microsoft.com/china/msdn/library/webservices/asp.net/ ASPNETusStan.mspx?mfr=true

/***************************************************************/
2.1CSS语法与应用
CSS 语法
CSS 样式结构由2部分组成：选择器和声明。
选择器:是标识已设置格式元素（如 P、H1、类名称或 ID）的术语，
声明:是定义样式元素。
1.定义格式:
CSS样式=<选择器名称列表>+<声明列表>
选择器名称列表=选择器1,选择器2,选择器3
声明列表={属性1:值1;属性2:值2 |….}
2.样式框架:
选择器名称{ 属性:值; …}
3.代码样例如下:
H1,H2 {
font-size:16 pixels;
font-family:Helvetica;
font-weight:bold;
}
在上面的示例中，H1 是选择器，介于大括号 {声明…} 之间的所有内容都是声明：
4.声明由2部分组成：属性和值。
在上面的示例中font-size:16 pixels;
属性是font-size，值是16 pixels;

--------------------------------------------------------------
CSS样式表优先级
当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？
几种方式的优先级:
内联样式最高，
内部样式表，
外部样式表，
缺省设置

1.浏览器缺省设置
2.外部样式表（Import Styles，以下几种形式都可以）
   <head>
   <style>
    @import url(css.css);
    @import url("csss.css") ;//单引号也可以
    @import css.css;
    @import "css.css";//单引号也可以
   </style>
   </head>

3.内部样式表(位于<head>标签内部）
<style type="text/css">
<head>
<style type="text/css">
#pagediv {
position:absolute;
left:50px;
top:12px;
width:900px;
height:500px;
z-index:1;
background-color: #99CCFF;
visibility: visible;
}
</style>
</head>

4.内联样式(HTML<body>内部的任何元素的style值)
<html>
<body>
<table>
<tr>
<td><input type="text" id="a1" name="a1" style="width:100px;text-align:left;" value="abc" ></td>
</tr>
</table>
</body>
</html>
/***************************************************************/
2.2CSS选择器

CSS样式选择器类型
1.标记名选择器（以字母直接命名的样式名称）
p1{text-align:center;}
网页应用方式:<p1>this word is center</p1>

2.类选择器
.类选择器名称.开头的
对应jsp中的class=类选择器名称
.lab {
FONT:menu;
height:16px;
width:80px;
font-size:20px;
border:1px solid #0066cc;
background-color:#a3cdff;
text-align:left;
}
网页应用方式:<td class="lab">AP.PRC</td>

3.Id选择器
Id选择器以#开头的
对应jsp中的id=类选择器名称

#itembasic {
position:absolute;
left:54px;
top:4px;
width:679px;
height:227px;
z-index:2;
visibility: visible;
}

网页应用方式<div id="itembasic">…</div >

/***************************************************************/
2.3CSS样式
.CSS 背景属性（Background）
total=6 member
background 在一个声明中设置所有的背景属性。
background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。
background-color 设置元素的背景颜色。
background-image 设置元素的背景图像。
background-position 设置背景图像的开始位置。
background-repeat 设置是否及如何重复背景图像。

background属性
javascript=object.style.background="white url(paper.gif) repeat-y";
codesample=body { background: #00FF00 url(bgimage.gif) no-repeat fixed top; }

background-attachment属性
javascript=object.style.backgroundAttachment="fixed"
codesample=body { background-image: url(bgimage.gif); background-attachment: fixed; }

background-color属性
javascript=object.style.backgroundColor="#00FF00"
codesample=
body { background-color:yellow;}
h1 { background-color:#00ff00; }
p { background-color:rgb(255,0,255); }

background-image属性
javascript=object.style.backgroundImage="url(stars.gif)"
codesample=body{ background-image: url(bgimage.gif); background-color: #000000; }

background-position属性
javascript=object.style.backgroundPosition="center"
codesample=body { background-image:url('bgimage.gif');background-position:center;}

background-repeat属性
javascript=object.style.backgroundRepeat="repeat-y"
codesample=body { background-image: url(stars.gif); background-repeat: repeat-y; }

/************************************************/
.CSS 边框属性（Border 和 Outline）
属性描述
border 在一个声明中设置所有的边框属性。
border-bottom 在一个声明中设置所有的下边框属性。
border-bottom-color 设置下边框的颜色。
border-bottom-style 设置下边框的样式。
border-bottom-width 设置下边框的宽度。
border-color 设置四条边框的颜色。
border-left 在一个声明中设置所有的左边框属性。
border-left-color 设置左边框的颜色。
border-left-style 设置左边框的样式。
border-left-width 设置左边框的宽度。
border-right 在一个声明中设置所有的右边框属性。
border-right-color 设置右边框的颜色。
border-right-style 设置右边框的样式。
border-right-width 设置右边框的宽度。
border-style 设置四条边框的样式。
border-top 在一个声明中设置所有的上边框属性。
border-top-color 设置上边框的颜色。
border-top-style 设置上边框的样式。
border-top-width 设置上边框的宽度。
border-width 设置四条边框的宽度。
outline 在一个声明中设置所有的轮廓属性。
outline-color 设置轮廓的颜色。
outline-style 设置轮廓的样式。
outline-width 设置轮廓的宽度。
/************************************************/

CSS 文本属性（Text）
color 设置文本的颜色。
direction 规定文本的方向 / 书写方向。
letter-spacing 设置字符间距。
line-height 设置行高。
text-align 规定文本的水平对齐方式。
text-decoration 规定添加到文本的装饰效果。
text-indent 规定文本块首行的缩进。
text-shadow 规定添加到文本的阴影效果。
text-transform 控制文本的大小写。
unicode-bidi 设置文本方向。
white-space 规定如何处理元素中的空白。
word-spacing 设置单词间距。
/************************************************/
CSS 字体属性（Font）
font 在一个声明中设置所有字体属性。
font-family 规定文本的字体系列。
font-size 规定文本的字体尺寸。
font-size-adjust 为元素规定 aspect 值。
font-stretch 收缩或拉伸当前的字体系列。
font-style 规定文本的字体样式。
font-variant 规定文本的字体样式。
font-weight 规定字体的粗细。
/************************************************/
CSS 外边距属性（Margin）
margin 在一个声明中设置所有外边距属性。
margin-bottom 设置元素的下外边距。
margin-left 设置元素的左外边距。
margin-right 设置元素的右外边距。
margin-top 设置元素的上外边距。
/************************************************/
CSS 内边距属性（Padding）
padding 在一个声明中设置所有内边距属性。
padding-bottom 设置元素的下内边距。
padding-left 设置元素的左内边距。
padding-right 设置元素的右内边距。
padding-top 设置元素的上内边距。
/************************************************/
CSS 列表属性（List）
list-style 在一个声明中设置所有的列表属性。
list-style-image 将图象设置为列表项标记。
list-style-position 设置列表项标记的放置位置。
list-style-type 设置列表项标记的类型。
marker-offset
/************************************************/
内容生成（Generated Content）
content 与 :before 以及 :after 伪元素配合使用，来插入生成内容。
counter-increment 递增或递减一个或多个计数器。
counter-reset 创建或重置一个或多个计数器。
quotes 设置嵌套引用的引号类型。
/************************************************/
CSS 尺寸属性（Dimension）
height 设置元素高度。
max-height 设置元素的最大高度。
max-width 设置元素的最大宽度。
min-height 设置元素的最小高度。
min-width 设置元素的最小宽度。
width 设置元素的宽度。
/************************************************/
CSS 定位属性（Positioning）
bottom 设置定位元素下外边距边界与其包含块下边界之间的偏移。
clear 规定元素的哪一侧不允许其他浮动元素。
clip 剪裁绝对定位元素。
cursor 规定要显示的光标的类型（形状）。
display 规定元素应该生成的框的类型。
float 规定框是否应该浮动。
left 设置定位元素左外边距边界与其包含块左边界之间的偏移。
overflow 规定当内容溢出元素框时发生的事情。
position 规定元素的定位类型。
right 设置定位元素右外边距边界与其包含块右边界之间的偏移。
top 设置定位元素的上外边距边界与其包含块上边界之间的偏移。
vertical-align 设置元素的垂直对齐方式。
visibility 规定元素是否可见。
z-index 设置元素的堆叠顺序。
/************************************************/
CSS 打印属性（Print）
orphans 设置当元素内部发生分页时必须在页面底部保留的最少行数。
page-break-after 设置元素后的分页行为。
page-break-before 设置元素前的分页行为。
page-break-inside 设置元素内部的分页行为。
widows 设置当元素内部发生分页时必须在页面顶部保留的最少行数。
/************************************************/
CSS 表格属性（Table）
border-collapse 规定是否合并表格边框。
border-spacing 规定相邻单元格边框之间的距离。
caption-side 规定表格标题的位置。
empty-cells 规定是否显示表格中的空单元格上的边框和背景。
table-layout 设置用于表格的布局算法。
/************************************************/
CSS 伪类（Pseudo-classes）
:active 向被激活的元素添加样式。
:focus 向拥有键盘输入焦点的元素添加样式。
:hover 当鼠标悬浮在元素上方时，向元素添加样式。
:link 向未被访问的链接添加样式。
:visited 向已被访问的链接添加样式。
:first-child 向元素的第一个子元素添加样式。
:lang 向带有指定 lang 属性的元素添加样式。
CSS 伪元素（Pseudo elements）
:first-letter 向文本的第一个字母添加特殊样式。
:first-line 向文本的首行添加特殊样式。

/***************************************************************/
2.4CSS定位

CSS 定位 (Positioning) 属性允许你对元素进行定位。
CSS 定位和浮动
CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，
将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。

定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、
另一个元素甚至浏览器窗口本身的位置。
显然，这个功能非常强大，也很让人吃惊。
要知道，用户代理对 CSS2 中定位的支持远胜于对其它方面的支持，对此不应感到奇怪。

另一方面，CSS1 中首次提出了浮动，它以 Netscape 在 Web 发展初期增加的一个功能为基础。
浮动不完全是定位，不过，它当然也不是正常流布局。
我们会在后面的章节中明确浮动的含义。
一切皆为框div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。
与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。

您可以使用 display 属性改变生成的框的类型。
这意味着，通过将 display 属性设置为 block，可以让行内元素（比如 <a> 元素）表现得像块级元素一样。
还可以通过把 display 设置为 none，让生成的元素根本没有框。
这样的话，该框及其所有内容就不再显示，不占用文档中的空间。

但是在一种情况下，即使没有进行显式定义，也会创建块级元素。
这种情况发生在把一些文本添加到一个块级元素（比如 div）的开头。
即使没有把这些文本定义为段落，它也会被当作段落对待：

<div>
some text
<p>Some more text.</p>
</div>
在这种情况下，这个框称为无名块框，因为它不与专门定义的元素相关联。

块级元素的文本行也会发生类似的情况。假设有一个包含三行文本的段落。
每行文本形成一个无名框。无法直接对无名块或行框应用样式，因为没有可以应用样式的地方（注意，行框和行内框是两个概念）。
但是，这有助于理解在屏幕上看到的所有东西都形成某种框。

CSS 定位机制
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
除非专门指定，否则所有框都在普通流中定位。
也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。
但是，垂直内边距、边框和外边距不影响行内框的高度。
由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。
不过，设置行高可以增加这个框的高度。
在下面的章节，我们会为您详细讲解相对定位、绝对定位和浮动。
/************************************************/
CSS 定位属性
position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。
bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。
overflow 设置当元素的内容溢出其区域时发生的事情。
clip 设置元素的形状。元素被剪入这个形状之中，然后显示出来。
vertical-align 设置元素的垂直对齐方式。
z-index 设置元素的堆叠顺序。
/************************************************/
CSS 相对定位
相对定位是一个非常容易掌握的概念。
如果对一个元素进行相对定位，它将出现在它所在的位置上。
然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。
如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。

#box_relative {
position: relative;
left: 30px;
top: 20px;
}
/************************************************/
CSS 绝对定位
绝对定位使元素的位置与文档流无关，因此不占据空间。
这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，
因为元素的位置相对于它在普通流中的位置。
普通流中其它元素的布局就像绝对定位的元素不存在一样：

#box_relative {
position: absolute;
left: 30px;
top: 20px;
}
/************************************************/
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
float 属性定义元素在哪个方向浮动。
以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。
浮动元素会生成一个块级框，而不论它本身是何种元素。

如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，
这个过程会持续到某一行拥有足够的空间为止。

实例
把图像向右浮动：

img
{
float:right;
}

/***************************************************************/

姚军权

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
Css使用小手册

/***************************************************************/title :Css使用小手册 function:WEB BASIC TECHNOLOGY ARTICLE WITH CSSfile :WEB-BASIC-CSS.TXTauthor :chinayaosir QQ:44633197 Tools :I
复制链接

扫一扫

专栏目录