unorderedlist
行内元素
anchor
abbreviatedform
acronym
boldtextstyle
I18NBiDiover-ride
largetextstyle
forcedlinebreak
pushbutton
citation
computercodefragment
deletedtext
instancedefinition
emphasis
italictextstyle
inlinesubwindow
![]()
Embeddedimage
formcontrol
insertedtext
texttobeenteredbytheuser
formfieldlabeltext
client-sideimagemap
genericembeddedobject
shortinlinequotation
sampleprogramoutput,scripts,etc.
optionselector
smalltextstyle
genericlanguage/stylecontainer
strongemphasis
subscript
superscript
multi-linetextfield
teletypeormonospacedtextstyle
instanceofavariableorprogramargument
二.行内元素与块级元素有什么不同?
1.尺寸-块级元素和行内元素之间的一个重要的不同点
行内元素和width
W3CCSS2标准规定行内元素、非置换元素不会应用width属性。
以下例子中,对行内元素应用了width:
200px,你可以看到,根本就没有什么效果。
行内元素和height
W3CCSS2标准规定行内元素、非置换元素不会应用height属性,但是盒子高度可以通过line-height来指定。
以下例子,对行内元素应用了height:
50px,你可以看到什么效果都没。
行内元素和padding
你可以给行内元素设置padding,但只有padding-left和padding-right生效。
以下例子,行内元素应用了padding:
50px。
你可以看到对左右的内容有影响,但是对上下没影响。
行内元素和marging
margin属性也是和padding属性一样,对行内元素左右有效,上下无效。
下面的例子,对应用了margin:
50px,你可以看到左右边缘是生效了但是内容上下却没有。
记住对行内元素
设置宽度width 无效。
设置高度height 无效,可以通过line-height来设置。
设置margin只有左右margin有效,上下无效。
设置padding只有左右padding有效,上下则无效。
注意元素范围是增大了,但是对元素周围的内容是没影响的,看图上效果就知道了
盒子模型
W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落、列表、标题、图片以及层。
盒模型主要定义四个区域:
内容(content)、边框距(padding)、边界(border)和边距(margin)。
对于初学者,经常会搞不清楚margin,background-color,background-image,padding,content,border之间的层次、关系和相互影响。
这里提供一张盒模型的3D示意图,希望便于你的理解和记忆。
每个HTML元素都可以看作一个装了东西的盒子,盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其他盒子之间,还有边界(margin)。
盒模型的实际宽度
关于盒模型,还有以下几点需要注意:
·对于块级元素(display:
block),未浮动的垂直相邻元素的上边界和下边界会被压缩,例如:
有上下2个元素,上元素的下边界为5px,下面元素的上边界为20px,则实际2个元素的间距为20px(2个边界值中较大的值)。
如图所示。
注1.块级元素(display:
block)
每个块级元素都从一个新行开始,而且其后的元素也需另起一行开始,标题、段落、表格、层、body等都是块级元素。
块级元素只能作为其他块级元素的子元素,而且需要一定的条件。
·内联元素,例如、等,定义上下边界不会影响到行高(line-height),内联元素距离上一行元素的距离由行高决定,而不是填充或边界。
注2.内联元素(display:
inline)
内联元素不需要在新行内显示,而且也不强迫其后的元素换行,如a、em、span等都为内联元素。
内联元素可以为任何其他元素的子元素。
·浮动元素(无论左或者右浮动)边界不压缩,且若浮动元素不声明宽度,则其宽度趋向于0,即压缩到其内容能承受的最小宽度。
·如果盒中没有内容,则即使定义了宽度和高度都为100%,实际上只占0%,因此不会被显示,此点在采取层布局的时候需特别注意。
·边界值可为负,其显示效果各浏览器可能不相同。
·填充值不可为负。
·边框默认的样式(border-style)为不显示(none)。
3.CSS引入的方式有哪些?
link和@import的区别是?
本质上,这两种方式都是为了加载CSS文件,但还是存在着细微的差别。
差别1:
老祖宗的差别。
link属于XHTML标签,而@import完全是CSS提供的一种方式。
link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了。
差别2:
加载顺序的差别。
当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载。
所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁),网速慢的时候还挺明显(梦之都加载CSS的方式就是使用@import,我一边下载一边浏览梦之都网页时,就会出现上述问题)。
差别3:
兼容性的差别。
由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。
差别4:
使用dom控制样式时的差别。
当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。
大致就这几种差别了(如果还有什么差别,大家告诉我,我再补充上去),其它的都一样,从上面的分析来看,还是使用link标签比较好。
标准网页制作加载CSS文件时,还应该选定要加载的媒体(media),比如screen,print,或者全部all等。
这个我到CSS高级教程中再给大家介绍。
注:
1,网友comehope在留言中提出了另一种区别。
差别5:
@import可以在css中再次引入其他样式表,比如可以创建一个主样式表,在主样式表中再引入其他的样式表,如:
main.css
———————-
@import“sub1.css”;
@import“sub2.css”;
sub1.css
———————-
p{color:
red;}
sub2.css
———————-
.myclass{color:
blue}
这样更利于修改和扩展.
猴子提示:
这样做有一个缺点,会对网站服务器产生过多的HTTP请求,以前是一个文件,而现在却是两个或更多文件了,服务器的压力增大,浏览量大的网站还是谨慎使用。
有兴趣的可以观察一下像新浪等网站的首页或栏目首页代码,他们总会把css或js直接写在html里,而不用外部文件。
4.CSS选择符有哪些?
哪些属性可以继承?
优先级算法如何计算?
内联和important哪个优先级高?
5:
前端页面有哪三层构成,分别是什么?
作用是什么?
最准确的网页设计思路是把网页分成三个层次,即:
结构层、表示层、行为层。
网页的结构层(structurallayer)由HTML或XHTML之类的标记语言负责创建。
标签,也就是那些出现在尖括号里的单词,对网页内容的语义含义做出了描述,但这些标签不包含任何关于如何显示有关内容的信息。
例如,P标签表达了这样一种语义:
“这是一个文本段。
”
网页的表示层(presentationlayer)由CSS负责创建。
CSS对“如何显示有关内容”的问题做出了回答。
网页的行为层(behaviorlayer)负责回答“内容应该如何对事件做出反应”这一问题。
这是Javascript语言和DOM主宰的领域。
8:
你做的页面在哪些流览器测试过?
这些浏览器的内核分别是什么?
经常遇到的浏览器的兼容性有哪些?
怎么会出现?
解决方法是什么?
点评:
css的兼容性也是大家关注的热点。
大家一定要注意多测试。
Javascript多浏览器兼容性问题及解决方案
兼容性处理要点
1、DOCTYPE影响CSS处理
2、FF:
设置padding后,div会增加height和width,但IE不会,故需要用!
important多设一个height和width
3、FF:
支持!
important,IE则忽略,可用!
important为FF特别设置样式
4、div的垂直居中问题:
vertical-align:
middle;将行距增加到和整个DIV一样高line-height:
200px;然后插入文字,就垂直居中了。
缺点是要控制内容不要换行
5、在mozillafirefox和IE中的BOX模型解释不一致导致相差2px解决方法:
div{margin:
30px!
important;margin:
28px;}
注意这两个margin的顺序一定不能写反,!
important这个属性IE不能识别,但别的浏览器可以识别。
所以在IE下其实解释成这样:
div{maring:
30px;margin:
28px}
重复定义的话按照最后一个来执行,所以不可以只写margin:
XXpx!
important;
浏览器差异
1、ul和ol列表缩进问题
消除ul、ol等列表的缩进时,样式应写成:
list-style:
none;margin:
0px;padding:
0px;
其中margin属性对IE有效,padding属性对FireFox有效。
[注]经验证,在IE中,设置margin:
0px可以去除列表的上下左右缩进、空白以及列表编号或圆点,设置padding对样式没有影响;在Firefox中,设置margin:
0px仅仅可以去除上下的空白,设置padding:
0px后仅仅可以去掉左右缩进,还必须设置list-style:
none才能去除列表编号或圆点。
也就是说,在IE中仅仅设置margin:
0px即可达到最终效果,而在Firefox中必须同时设置margin:
0px、padding:
0px以及list-style:
none三项才能达到最终效果。
2、CSS透明问题
IE:
filter:
progid:
DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF:
opacity:
0.6。
[注]最好两个都写,并将opacity属性放在下面。
3、CSS圆角问题
IE:
ie7以下版本不支持圆角。
FF:
-moz-border-radius:
4px,或者-moz-border-radius-topleft:
4px;-moz-border-radius-topright:
4px;-moz-border-radius-bottomleft:
4px;-moz-border-radius-bottomright:
4px;。
[注]圆角问题是CSS中的经典问题,建议使用JQuery框架集来设置圆角,让这些复杂的问题留给别人去想吧。
不过jQuery的圆角只看到支持整个区域的圆角,没有支持边框的圆角,不过这个边框的圆角可以通过一些简单的手段来实现,下次有机会介绍下。
4、cursor:
handVScursor:
pointer
问题说明:
firefox不支持hand,但ie支持pointer,两者都是手形指示。
解决方法:
统一使用pointer。
5、字体大小定义不同
对字体大小small的定义不同,Firefox中为13px,而IE中为16px,差别挺大。
解决方法:
使用指定的字体大小如14px。
并列排列的多个元素(图片或者链接)的div和div之间,代码中的空格和回车在firefox中都会被忽略,而IE中却默认显示为空格(约3px)。
6、CSS双线凹凸边框
IE:
border:
2pxoutset;。
FF:
-moz-border-top-colors:
#d4d0c8white;-moz-border-left-colors:
#d4d0c8white;-moz-border-right-colors:
#404040#808080;-moz-border-bottom-colors:
#404040#808080;
浏览器bug
1、IE的双边距bug
设置为float的div在ie下设置的margin会加倍。
这是一个ie6都存在的bug。
解决方案:
在这个div里面加上display:
inline;
例如:
<#divid=”imfloat”>
相应的css为
以下为引用的内容:
复制代码代码如下:
#IamFloat{
float:
left;
margin:
5px;/*IE下理解为10px*/
display:
inline;/*IE下再理解为5px*/
}
#IamFloat{
float:
left;
margin:
5px;/*IE下理解为10px*/
display:
inline;/*IE下再理解为5px*/
}
关于CSS中的问题实在太多了,甚至同样的CSS定义在不同的页面标准中的显示效果都是不一样的。
一个合乎发展的建议是,页面采用标准XHTML标准编写,较少使用table,CSS定义尽量依照标准DOM,同时兼顾IE、Firefox、Opera等主流浏览器。
很多情况下,FF和Opera的CSS解释标准更贴近CSS标准,也更具有规范性。
2、IE选择符空格BUG
今天在给博客的段落样式设置首字符样式的时候发现,原来一个空格也可以使样式失效。
请看以下代码:
复制代码代码如下:
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
--
p{font-size:
12px;}
p:
first-letter{font-size:
300%}
-->
对于世界而言,你是一个人;但是对于某个人,你是他的整个世界。
纵然伤心,也不要愁眉不展,因为你不知是谁会爱上你的笑容。