CSS教程.docx
《CSS教程.docx》由会员分享，可在线阅读，更多相关《CSS教程.docx（92页珍藏版）》请在冰点文库上搜索。
CSS教程
CSS教程:
position属性
-
网页制作Webjx文章简介：
position属性可以让你让你随意控制一个特定元素在浏览器何处以及如何显示。
比方说我们用position:
fixed让一个图片显示在浏览器的左上角.即使出现滚动条他依然可以在浏览器的左上角.posotion属性有4个取值.由于static为默认的方式。
position属性可以让你让你随意控制一个特定元素在浏览器何处以及如何显示。
比方说我们用position:
fixed让一个图片显示在浏览器的左上角.即使出现滚动条他依然可以在浏览器的左上角.posotion属性有4个取值.由于static为默认的方式。
所以实际上可用的值只有3个为了方便阅读~
以下统称为：
固定（fixed）、相对（relative）、绝对（absolute）.
第1：
固定定位（fixed）
固定定位可以让某一元素固定在屏幕的某个位置.其效果和背景的background-attachment:
fixed属性相似！
但是IE6以及更早的版本不支持.所以以下例子请在非IE6以下浏览器下浏览
例子：
运行代码框
[Ctrl+A全部选择提示：
你可先修改部分代码，再按运行]
第2：
相对定位（relative）
相对定位是依据设置定位属性的4个方向上的任意值来实现相对与其本来在文档中正常显示的位置的偏移；
当相对定位的元素偏移出其本来的文档流的位置：
其他元素仍然认为那个位置为其的逻辑文档流区域.而不会去补上去，虽然我们感官上认为那里是没有东西的~
例子：
运行代码框
[Ctrl+A全部选择提示：
你可先修改部分代码，再按运行]
其中第2个色块就是相对于其本来的文档流中的位置依据left:
10px;top:
20px;的定位属性值进行偏移.
其后面的第3个色块依然认为前面的空白（就是第3的原本的文档流的位置）为第3个色块的文档流区域则不会自动填充上去.
当相对定位的父元素出现滚动条时，IE浏览器的特殊情况
例子：
运行代码框
[Ctrl+A全部选择提示：
你可先修改部分代码，再按运行]
当相对定位的父元素有滚动条的时候，该相对定位元素再IE的表现很诡异（其后面的元素依然认为那个位置为该元素的默认位置，而表现出相对定位的特性，但是拉动滚动条时，在FF下正常即相对定位的元素和文档一起滚动，但是在IE系列里面，相对定位的色块依然在原地不动，此时元素的特性有点像绝对定位）
当相对定位同时拥有定位属性的4个方向的值和margin属性。
相对定位的定位属性toprightbottomleft和margin-topmargin-rightmargin-bottommargin-left;各个方向上一至的时候其值会产生叠加效果，而按照方向执行叠加后的数值的偏移
例子：
运行代码框
[Ctrl+A全部选择提示：
你可先修改部分代码，再按运行]
第3：
绝对定位（absolute）
当元素设置绝对定位后.则会从正常的文档流中脱离.其后面的元素会完全忽视这个绝对定位的元素.就好像正常文档流中不存在这个元素一样.然后根据离其最近的一个具有position属性的父对象的边缘为定位基点（如果没有没有这样一个父对象那么默认依据窗口元素定位），根据设置定位属性的4个方向的值来实现绝对的定位布局.
例子：
运行代码框
[Ctrl+A全部选择提示：
你可先修改部分代码，再按运行]
我们可以看到.当色块2设置绝对定位之后.后面的第3色块忽视其存在，自动填补到正常的文档流中（这个是根据窗口元素定位）
我们再来看一下IE中依据窗口元素定位的一个特殊情况
例子：
运行代码框
[Ctrl+A全部选择提示：
你可先修改部分代码，再按运行]
此DEMO与position:
absolute的定位工作方式无关~只是作为IE中特殊的情况列出来
除了上面的基本的position:
absolute特点，其还有下面几点；
1.如果我们只设置了position:
absolute而没有设置定位属性的4个方向值的话.那么该绝对定位的元素依然遵循其在文档流中的正常位置，它仍然受前一元素的文档流位置影响，按照正常文档流进行布局。
只不过现在是从正常的文档流中抽出.其后面的元素会忽视其存在.而自动补上去.因为绝对定位的元素是不占文档流的布局空间的。
例子：
运行代码框
[Ctrl+A全部选择提示：
你可先修改部分代码，再按运行]
例子中第2个红色的色块就是一个只具有position:
absolute属性的元素，它仍然在正常的布局位置呈现，只不过后面的元素会忽视其存在
2.绝对定位会自动把一个元素转化为块元素
例子：
运行代码框
[Ctrl+A全部选择提示：
你可先修改部分代码，再按运行]
按照标准的渲染方式.行间元素设置的宽度和高度是被忽略的，但是当给元素绝对定位之后，该元素会具有块元素的特性，而可以设置宽度和高度（虽然绝对定位的元素不占布局空间）
3.在IE下没有设置定位属性4个方向的值的绝对定位的块元素的表现是inline-block再FF下其是block
例子：
运行代码框
[Ctrl+A全部选择提示：
你可先修改部分代码，再按运行]
这个其实是浏览器的差异，在FF下在块元素拥有position:
absolute属性后，其依然作为一个块元素，而相对于前面的文档流而换行，所以为了统一，在这种使用情况下，可以加上display:
inline即可保证各个浏览器统一
4.绝对定位元素依据其定位基点进行绝对定位时会忽视其定位基点的padding空间
例子：
运行代码框
[Ctrl+A全部选择提示：
你可先修改部分代码，再按运行]
图中的红色区域是一个高度和宽度为500px且padding:
100px;因为绝对定位元素忽视其定位基点的padding属性，所以在顶部呈现
5.设置任何一个方向的定位属性.该绝对元素除该方向按照定位属性的值依据其具有position属性最近的父元素为基点进行定位.其另外方向上的逻辑位置依然受前一文档流中的元素影响.按照正常的位置进行布局：
例子：
运行代码框
[Ctrl+A全部选择提示：
你可先修改部分代码，再按运行]
我们可以看到图中的红色区域，除按照left:
40这个属性偏移40像素后，其垂直方向的位置依然为正常文档流中的位置
6.当元素设置为绝对定位后改元素内的浮动会自动清除
例子：
运行代码框
[Ctrl+A全部选择提示：
你可先修改部分代码，再按运行]
7.当绝对定位同时拥有定位属性和margin属性、绝对定位的的定位属性toprightbottomleft和margin-topmargin-rightmargin-bottommargin-left;各个方向上一至的时候其值会产生叠加效果，而按照方向执行叠加后的数值的偏移
例子：
运行代码框
[Ctrl+A全部选择提示：
你可先修改部分代码，再按运行]
我们会发现这个红色的色块距离左边200PX.left+margin-left
小结：
当元素同时拥有浮动和绝对定位时.绝对定位的优先权大于浮动.因为浮动受文档的逻辑结构位置限制。
而绝对定位不会。
所以当绝对定位脱离文档流，绝对定位的元素不受浮动影响.即float:
left会失效，
数学上我们知道.X轴上一个数值Y轴上的一个数值即可确定一个点，感官上leftright属于x轴bottomtop属于Y轴。
我们完全可以设置一个无宽度和高度绝对定位的元素同时拥有toprightbottomleft来实现其根据其参考的定位基点的父元素的的大小来自适应大小.
但是IE6不支持.IE6只能识别left的值而忽视right.所以下面例子请在非IE6以及一下浏览器浏览
例子：
运行代码框
[Ctrl+A全部选择提示：
你可先修改部分代码，再按运行]
实际应用:
（个人的习惯）
1.标题（“标题文字”和“更多”）（相对+绝对）
2.需要让一些具有vertical-align:
middle属性的元素抽出文档流（这个看具体情况，因为vertical-align:
middle会影响文档中的文字对齐）（绝对）
3.固定元素的浮动块（该浮动块内的元素布局固定可以用绝对定位，并设置该浮动块为相对）（相对+绝对）
CSS教程：
vertical-align的值
-
网页制作Webjx文章简介：
最近几天仔细研究了一下vertical-align这个属性，结果让我大吃一惊，这个很“资深”的CSS标准竟然在各个浏览器里面的表现都各不相同。
最近几天仔细研究了一下vertical-align这个属性，结果让我大吃一惊，这个很“资深”的CSS标准竟然在各个浏览器里面的表现都各不相同。
vertical-align的值有点多，包括baselinesubsuppertoptext-topbottomtext-bottommiddle以及各种长度值（%，em，ex等等）。
我先给大家看一个我觉得最夸张的值：
bottom。
代码如下：
p{
font-size:
18px;
line-height:
36px;
font-family:
Tahoma,sans-serif;
}
img{
vertical-align:
bottom;
}
然后大家看一看这段CSS在各个浏览器中的效果（图片是我故意做成那个样子，为了可以看清楚相对位置）：
呃，这个结果其实很让人匪夷所思，一般我会认为Firefox会比IE解释得更正确，但是看过Opera之后发现它和IE是一样的，而Safari/Win是站在Firefox那边。
说实话，我不知道这是怎么回事。
仔细学习了《CSS权威指南（第二版）》，甚至还去查阅了W3C，然后自己做出一个关于vertical-align的图：
按照W3C的定义，当内联元素的vertical-align设置为：
∙baseline,top,bottom的时候，都是该元素的baseline（或middle,top,bottom）对其周围元素的相同位置，如图片的top和周围文字的top对齐。
∙text-top和text-bottom的时候，是该元素的top（或bottom）对齐周围元素的text-top（或text-bottom）。
∙长度（%,em,ex）的时候，是基于baseline往上移动，所以正数往上，负数往下。
∙middle的时候，是该元素的中心对齐周围元素的中心。
这里“中心”的定义是：
图片当然就是height的一半的位置，而文字应该是基于baseline往上移动0.5ex，亦即小写字母“x”的正中心。
但是很多浏览器往往把ex这个单位定义为0.5em，以至于其实不一定是x的正中心（以上图为例，x的高度应该是10px，而em是18px，所以两个值不一样）。
但是，即使是按照上面的准则，各个浏览器的解释如此迥异也让我匪夷所思。
我也懒得去研究为什么是这样子。
总的来说呢，应该就是它们对字体的每一条线的位置的定义都不大一样，所以这个问题不单跟vertical-align有关，而跟浏览器对内联文本和内联图片的结构的解释有很大关系。
最后给大家一个测试页面，可以方面的看看各个浏览器对vertical-align不同值的解释结果。
大家可以测试一下其他的值，比如middle或是text-top，也是各个浏览器完全不一样。
有什么心得大家来讨论一下吧～
CSS教程:
设计制作网页的CSS经验
-
网页制作Webjx文章简介：
有些习惯显得尤为重要，今天与您分享六个CSS习惯。
因为习惯其实是会变的，所以只能写“最近”的。
这些习惯都跟技术无关，如果不遵守，也不会出错。
但是我觉得良好的习惯会体现一个人的素质。
我们在网页教学网中向大家介绍过很多CSS经验与技巧，这些东西都发布在
一、用class_name方式写类名。
以前喜欢用class-name写，不过好像两样也没什么差别。
但我比较反对用className写类名，因为始终对浏览器大小写敏感的问题抱有怀疑态度。
但是id我会写成驼峰式，理由见下一条。
二、样式都用class而不用id。
有三个理由，一，id不可以重复，所以用class的话，可以肆无忌惮的用无数次。
二，id的优先级太高，若是写了一个#page_content a {color:
#f60} ，那你完蛋了，里面要改链接颜色，都必须加上#page_content才能越过这个优先级。
三，id专门留给JS用，这样才符合表现与行为分离的原则。
所以id我用驼峰式，也是为了体现这一点。
三、margin和padding，尽量省略最后一个值。
比如margin:
20px 10px 5px 10px; ，左右值是一样的，就应该省略掉最后一个值，写成margin:
20px 10px 5px; 这样到时候要改左右间距，改一个就好，免得改漏了。
其实这个问题虽然很细小，但是可以看得出对margin四个值省略规则的熟练程度。
四、按标准写CSS，再针对特定浏览器作hack。
比如，通常我们会遇到如下的写法：
.side_col {
float:
left;
display:
inline;
margin-left:
20px;
}
而我的写法会是：
.side_col {
float:
left;
margin-left:
20px;
}
* .side_col {
_display:
inline; /*hacked for IE 6*/
}
看明白了么？
不应该把hack混在一起，也不应该用一种侥幸的心态，觉得float:
left与display:
inline写在一起没事。
嗯，它们俩确实没事儿，但是其他的hack就不一定了。
而且这里写display:
inline纯粹就是为了解决IE6的bug，所以前面加上下划线，以明确的表达你的目的。
另外不要以为凡是hack都是为IE准备的。
其实有些hack是针对其他浏览器的，比如FF。
这就要求你对CSS标准的熟练掌握，能够自信的判断哪些渲染是遵守标准，哪些违反标准的。
此外，我喜欢在hack前面加上星号，其实这纯粹是个人习惯了。
可能过段时间我就不这么用了，呵呵。
五、记得加空格。
.class_name { property:
value; } 。
我个人觉得合理的空格是优秀代码的一个指标。
按英文的习惯，标点后面都应该带空格（如果你写This is a pen.That’s a pencil.句点后面不加空格， word里面会有错误提示）。
所以既然CSS是外国人发明的，应该按他们的格式来写。
类似的，在JS里var a = b + c;里面的空格也应该都要加。
六、适当的层叠（Cascading）或缩进以定义CSS的“作用域”。
啥叫“CSS的作用域”？
其实并不是所有的样式都在所有的地方使用。
有的样式只用在某一块里面，比如“导航栏”里的“搜索框”，可能应该写成：
.nav .search {}
而有时候用层叠会增加代码优先级，所以也可以用缩进来“象征性的”体现作用域。
像这样：
.login_box {}
.forgot_pwd{}
缩进，是为了表示它们对应的标签具有父子关系。
但这样只能起一个提醒的作用。
CSS技巧在于不断的总结与对编码的理解，任何时候都是在不断的完善的，有何经验欢迎您来52CSS.com与我分享，也可以在W3C发贴，写出您对CSS的心得体会。
CSS教程:
完美的绝对底部
-
网页制作Webjx文章简介：
CSS的简单在于它易学，CSS的困难在于寻找更好的解决方案。
在CSS的世界里，似乎没有完美这种说法。
所以，现在介绍的CSS绝对底部，只是目前个人见过的方案中比较完美的吧。
CSS的简单在于它易学，CSS的困难在于寻找更好的解决方案。
在CSS的世界里，似乎没有完美这种说法。
所以，现在介绍的CSS绝对底部，只是目前个人见过的方案中比较完美的吧。
先说我们为什么会使用到这个CSS底部布局解决方案:
当做一个页面时，如果页面内容很少，不足于填充一屏的窗口区域，按普通的布局，就会出现下面图片中的样子（也就是底部内容并没有位于窗口的底部，而留下了大量空白。
对于追未完美的设计师来说，这是不美观的。
网上有一些解决方案，但会出现当改变窗口高度时，底部和正文重叠的BUG。
尽管没有多少人会有事没事儿的去改变窗口高度，但设计嘛，追求的就是尽善尽美。
下面是我找到的一个比较完美的方法，来自国外的设计达人，纯CSS，可以实现:
当正文内容很少时，底部位于窗口最下面。
当改变窗口高度时，不会出现重叠问题。
甚至，创造该CSS的人还专门成立一个网站介绍这个CSS底部布局方案。
不知道他有没有去申请专利:
）
代码写法
HTML代码:
升级会员 