css最重要的三点：框模型(box model)、定位(position)和浮动(float)；
《精通CSS》、《HTML XHTML与CSS基础教程》（第六版）
1、CSS In Action
（1）使用DW编写；
（2）
2、TIPS
（1）样式和样式表
样式是由”属性名:属性值“组成；
样式表是由”属性名:属性值;属性名:属性值;....“组成；
px是以屏幕的尺寸为标准；
颜色值可以用#ffffff表示，此值表示为白色；
（2）文字（文本和字体）
文字的样式属性用于改变文字的字体、粗细、斜体、大小、颜色（color）、行距（line-height）、对齐方式（text-align）、文字上的装饰等。最常用的是font属性。
letter-spacing：文字间距；
white-space：文字间空格的处理；
word-space：单词间距；
（3） 背景
背景的样式属性用于改变指定元素的背景颜色、背景图像及其位置等。常用的属性是background。
（4）边框线
边框线的样式属性用于改变指定元素的边框线粗细、类型、颜色等。常用的属性是border。
（5）高度、宽度
高度、宽度的样式属性用于改变指定元素的高度和宽度。常用的属性是height、width。属性值为auto表示指定元素的高度或宽度由浏览器自动计算。
设置宽度时，要考虑浏览器的分辨率中的宽度。当设置的网页宽度超过浏览器的分辨率中的宽度，这样会有滚动条。
（6）盒子模型
盒子模型：content\border\padding\margin。其中height和width是指content的。
padding表示元素中的内容和边框线的距离；
margin表示元素之间的距离，这个值可以为负数；
div宽度总和=width+padding*2+border-width*2；但在IE6中，总宽度为width。
（7）列表
列表的样式属性用于改变指定列表项的类型、图像、位置等。常用的属性是list-style。
（8）位置和布局
位置和布局的样式属性用于改变指定元素与其它元素之间的排列方式、显示方式等。常用属性有：
float和clear：float属性专门用于将块状的元素进行横向排列；clear属性用于清除float的设置，这样保证后面的元素按正常的方式显示。浮动后会影响后续页面的显示的，必须要清除浮动效果，单独定义：<div style="clear:both;"></div>。浮动框需要对该框应用clear属性，表示框的哪些边不应该挨着浮动框。
overflow：常与width和height属性一起使用。当元素中的内容超出width或height属性的设置值时，会按overflow的属性值决定是否显示滚动条。
position、left、top、right、bottom和z-index：
position指定元素内的元素位置方式。left、top、right、bottom指定元素的位置坐标值。z-index指定元素在前后方向的显示顺序，数字大的在前面。
缺省状态下元素的position属性值是static。此时，显示元素的顺序是按照HTML文档中的元素顺序进行的。设置left、top、right、bottom、z-index属性会改变正常的元素显示方式，使元素按照设置的方式显示。缺省状态下，坐标的计算原点(0,0)为屏幕的左上角。
注：相对定位只是改变了自己显示的位置，元素仍然占据空间。绝对定位不占据空间。浮动定位也不占据空间，但是会有卡位的情况（空间不够）。float浮动框：向左或向右浮动，直到碰到边框（border、padding、margin或另一个块对象）为止。特别注意的是若剩余空间不足，则将会串到下一行中。
position为relative后，将根据top，right，bottom，left的值按照它理应所在的位置进行偏移 。即相对它自己本身的位置，且relative的偏移是基于对象的margin的左上侧的。移动元素会导致它覆盖其它框！
position设置为absolute后，其到底以谁为对象进行偏移呢？这里分为两种情况：
a、当父对象(或曾祖父，只要是父级对象)也设置了position属性，且position的属性值为absolute或者relative时，也就是说，不是默认值的情况，此时按照这个parent来进行定位。如果parent设定了margin，border，padding等属性，将会从padding开始的地方(即只从padding的左上角开始)进行定位；
b、如果不存在一个有着position属性的父对象，那么那就会以body为定位对象，按照浏览器的窗口进行定位。
position为fixed，则总是以body为定位对象的，按照浏览器的窗口进行定位。
display和visibility：此两个属性都可以表示元素的隐藏与显示，但它们所表现的方式不同。前者不占据空间，后者仍然占据空间；
（10）
*匹配网页中的所有元素；
匹配含有指定属性的元素，可以在元素名后用“[ ]”指定属性。（注意：IE6不支持属性对象的定义）
样式表语句中使用/**/注释。
（11） CSS代码实质由选择符、属性和值组合而成。
CSS选择符有5种，即标签选择符、id选择符、class选择符、伪类及伪对象选择符、通配选择符。其中伪类及伪对象选择符是一组CSS预定义好的类和对象，不需要进行id和class属性的声明。伪类及伪对象选择符编写格式为：选择符：伪类或选择符：伪对象。
（12）布局页面的宽度
布局页面时，要充分考虑页面内容的布局宽度，一旦内容宽度超过显示宽度，页面将出现水平滚动条。
页面布局宽度一般考虑最小显示分辨率的浏览用户。浏览器的边框及滚动条部分约占24px左右，故页面布局宽度为分辨率的水平像素减去24px。
在布局页面前，网页制作者一定要把页面的默认边距清除。
一个div标签占据一行。
块状元素浮动的范围由其被包含的父容器所决定。
（13）使用时，每个元素可被指派任意多个类名称，以空格分隔。
（14）
（15）
（16）<link rel="stylesheet" type="text/css" href="print.css" media="print">
在缺省情况下，media的属性值为screen，表示所定义的外部样式表是用于屏幕显示的。若设置为print，表示该外部样式表是用来打印的。
CSS能对媒介控制，可设置不同的媒介表现方式，这些媒介有显示屏幕、纸面、盲文设备、语音合成器等。只需要修改<link/>标签的media属性即可。
（17）在外部样式表文件中包含其它样式表文件
如：@import url("base.css");
（18）CSS设计原则
a、不同的浏览器对于HTML元素的缺省边距、间距值是不同的，因此在CSS设计中要初始化这些缺省值；
b、尽量使用已有的HTML元素；
c、尽量组合定义样式；
（19）层叠式应用规则（继承和覆盖）
对于相同的对象，后面的设置将代替前面的设置。a元素的状态对象的定义应按照下述顺序：
a{}、a:link{}、a:visited{}、a:hover{}、a:active{}。
一个网页中可以同时包含3种方式定义的样式表，当出现重复定义的样式对象时：
a、在同一个方式中的重复定义的样式对象，后定义的有效；
b、在不同方式中的重复定义的样式对象，元素中的样式优先级最高、外部样式表文件最低。
（20）
（21）
（22）
3、PS
（1）水平和垂直都居中的div
将div的样式设置为绝对定位，并设置左坐标和上坐标都为50%，margin-left为负的文本框宽度的一半，margin-top为负的文本框高度的一半。这样就可以实现水平和垂直都居中对齐。
（2）div水平居中对齐：margin 0 auto;就可以；因为自动时，左、右margin将相等。
（3）overflow:hidden; //去掉页面滚动条
（4）背景图片不随滚动条位置的变化而变化，在<body>中使用bgproperties属性，即<body bgproperties="fixed" background='test.jpg'>。
（5）在定高div中垂直居中单行文字：line-height的属性值为div高度就可以；
（6）默认情况下，<body>元素有margin属性的。因此，在制作网页时需要将margin消除。
（7）让溢出的文字使用省略号代替：一定要设置width；
在div中，使用text-overflow:;:;:;可以实现。
（8）居中的两种方式：
margin:0 auto;
position:relative;left:50%;
（9）解决div自适应高度的方法
div父容器不根据内容自适应高度，如：
<div id="main">
<div id="content"></div>
</div>
当content内容多时，即使main设置了高度100%或auto，在不同浏览器下不能完好的自动伸展。
解决方法一：增加一个清除浮动，让父容器知道高度。注：清除浮动的容器中要有一个空格。
<div id="main">
<div id="content"></div>
<div style="clear:both;"> </div>
</div>
解决方法二：在程序代码中提倡尽量不要添加无意义的代码。
<div id="main">
<div id="content"></div>
</div>
在最外层div添加如下样式，如：
#main{
height:100%;
overflow:hidden;
}
（10）百分数值是相对于其父元素计算的。
（11）div中，若里面的内容超过diiv设定的高度和宽度，因为默认为visiable，因此内容会显示出来，显示时内容相当于超出div的高度，但没有超出div的宽度；
（12）用margin属性来水平对齐元素
用atuo关键字和margin属性一起协作可以左对齐、居中对齐或者右对齐一个元素。
左对齐时margin-left设为0,margin-right设为auto，右对齐反之，居中对齐则左右都是auto。
但IE(有别于标准)可以使用text-align属性来对齐元素。这个技术在其他浏览器中不起作用。
（13）
（14）
（1）div文字垂直居中：
1.单行文字
设置div的高度与文字的行高一样就可以了,即 line-height 和 height 的数值是一样的就可以了,最后给div一个 over-flow: hidden ,让超出的部分隐藏.
这种方法支持块级和内联极元素以及所有的浏览器,不过只能显示一行,而且IE中不支持< img >等的居中,之所以要用 overflow: hidden ,是因为当用户放大字体时,字会超出div的范围.
height: 20px;
line-height: 20px;
overflow: hidden;
}
2.多行文字
很简单,只要设定一样的 padding-bottom 和 padding-top 就可以了
padding-top: 20px;
padding-bottom: 20px;
}
这种方法同时支持块级和内联极元素以及非文本内容,包括图片等等,也支持所有浏览器,不足的就是不能固定高度
如果哪位朋友还有什么好用的方法，希望能贴出不，大家共同分享！
如何使图片在DIV中垂直居中，可以用背景的方法。如下：body{
BACKGROUND:url(http://www.piaoyi.org/images/logo.gif) #FFF no-repeat center;
}
扫一扫
283
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
