背景图案的翻转－控制背景的显示区域通过背景定位技术可使背景图片出现在盒子的任意位置上，如果盒子没有背景那么大，那么只能显示背景图的一部分
，利用这一点，我们可以将多个背景图片放置在一个大的背景图里，让每个元素只显示这张大背景图的一部分，例如制作导航条时，可以让链接状态
显示背景图的上一部分，鼠标滑过时显示背景图的下一部分，这就是背景的翻转，使我们只用一幅图片就能实现背景图的切换。通过背景图片位置
控制实现图片翻转#navlia{ color:#FFFFFF; text-decoration:none; paddi
ng-top:7px; display:block; width:97px; height:19px; text-alig
n:center; background:url(img/nav.gif); margin-left:2px;}#nav
lia:hover{ background:url(img/nav.gif);background-positio
n:0px-26px;/background-position:leftcenter;/ color:#FFFFFF;
}将滑动门技术和背景图片翻转结合的例子a:hover{ background-position:100%-42px;
}a:hoverb{ background-position:0-42px; color:#FF0000;}C
SS圆角设计圆角的设计方法圆角在网页设计中让人又爱又恨，一方面设计师为追求美观的效果经常需要借助于圆角，另一方面为了在网页中设
计圆角又不得不增添很多工作量。制作固定宽度的圆角（不带边框的、带边框的）制作可变宽度圆角（不带边框的、带边框的）不用图片做
圆角1.制作固定宽度的圆角框用CSS制作不带边框的固定宽度圆角框（如图4-57左所示）至少需要两个盒子，一个盒子放置顶部的
圆角图案，另一个盒子放置底部的圆角图案，并使它位于盒子底部。把这两个盒子叠放在一起，再对栏目框设置和圆角相同的背景色就可以了制
作带边框的固定宽度圆角框（如图4-57右所示）则至少需要三个盒子，最底层的盒子放置圆角框中部的边框和背景组成的图案，并使它垂直平铺
，上面两层的盒子分别放置顶部的圆角和底部的圆角，这样在顶部和底部圆角图片就遮盖了中部的图案，形成了完整的圆角框2.制作可变宽
度圆角制作可变宽度不带边框的圆角框就是前面介绍的4图像法制作圆角框，而要制作带边框的可变宽度圆角则要采用5图像二维滑动门方法
3.不用图片做圆角－山顶角方法如果不想用图片做圆角，那也是可以实现的，这需要一种称为山顶角(mountaintopcorn
er)的圆角制作方法，所谓山顶角，就是说不是纯粹意义上的平滑圆角，而是通过几个1像素高的div（水平细线）叠放起来形成视觉上的圆角
，用这种方法做圆角一般采用4个div叠放，所以圆角的弧度不是很大。3.不用图片做圆角－山顶角方法如果把最上方一条细线的颜色
改为黑色，再设置下面三条细线的左右边框是1像素黑色，那么就出现了带有边框的圆角框效果了4.学习圆角制作的意义由于人们的审美
观念决定了圆角比方角更具有亲和力，使我们很多时候必须制作圆角框。另外，圆角框技术是制作其他不规则图案栏目框的基础。例如图4-61所
示的栏目框，就可以把栏目框上面部分看成是上圆角，下面部分看成是下圆角，再按照制作圆角框的思路制作了。盒子的浮动盒子的浮动
在标准流中，块级元素的盒子都是上下排列，行内元素的盒子都是左右排列，如果仅仅按照标准流的方式进行排列，就只有这几种可能性，限制太
大。CSS的制订者也想到了这样排列限制的问题，因此又给出了浮动和定位方式进行盒子的排列，从而使排版的灵活性大大提高。例如：有时希
望相邻块级元素的盒子左右排列（所有盒子浮动）或者希望一个盒子被另一个盒子中的内容所环绕（一个盒子浮动）做出图文混排的效果，这时最简
单的办法就是运用浮动（float）属性使盒子在浮动方式下定位。在标准流中，一个块级元素在水平方向会自动伸展，在它的父元素中占满
整个一行；而在竖直方向和其他元素依次排列，不能并排，如图4-62所示。使用“浮动”方式后，这种排列方式就会发生改变。CSS中有一
个float属性，默认值为none，也就是标准流通常的情况，如果将float属性的值设为left或right，元素就会向其父元素的
左侧或右侧靠紧，同时盒子的宽度不再伸展，而是收缩，在没设置宽度时，会根据盒子里面的内容来确定宽度。1.一个盒子浮动接下来在上
述代码中添加一条CSS代码，使元素“.son1”浮动。代码如下：.son1{ float:left;}此时显示效果如图4-6
3所示，可发现给“.son1”添加浮动属性后，“.son1”的宽度不再自动伸展，而且不再占据原来浏览器分配给它的位置。如果再在未浮
动的盒子Box-2中添一行文本，就会发现“.son2”中的内容是环绕着浮动盒子的总结：一个盒子浮动后的特点（1）浮动后的盒子
将以块级元素显示，但宽度不会自动伸展。（2）浮动的盒子将脱离标准流，即不再占据浏览器原来分配给它的位置（IE有时例外）。（3）
未浮动的盒子将占据浮动盒子的位置，同时未浮动盒子内的内容会环绕浮动后的盒子。提示：所谓“脱离标准流”是指元素不再占据在标准流下浏
览器分配给它的空间，其他元素就好像这个元素不存在一样。例如图4-63中，当Box-1浮动后，Box-2就顶到了Box-1的位置，相
当于Box-2视Box-1不存在一样。但是，浮动元素并没有完全脱离标准流，这表现在浮动盒子会影响未浮动盒子中内容的排列，例如Box
-2中的内容会跟在Box-1盒子之后进行排列，而不会忽略Box-1盒子的存在。2.多个盒子浮动多个盒子都浮动后，就产生了块
级元素水平排列的效果①多个浮动元素不会相互覆盖，一个浮动元素的外边界（margin）碰到另一个浮动元素的外边界后便停止运动。
②若包含的容器太窄，无法容纳水平排列的多个浮动元素，那么最后的浮动盒子会向下移动（图4-68）。但如果浮动元素的高度不同，那当
它们向下移动时可能会被卡住4.7.2浮动的清除clear是清除浮动属性，它的取值有left、right、both和none
（默认值），如果设置盒子的清除浮动属性clear值为left或right，表示该盒子的左边或右边不允许有浮动的对象。值设置为bot
h则表示两边都不允许有浮动对象，因此该盒子将会在浏览器中另起一行显示clear属性既可以用在未浮动的元素上，也可以用在浮动的
元素上，如果对Box-3同时设置清除浮动和浮动，即：.son3{clear:both;float:left;}总结：清除浮动
是清除其它盒子浮动对该元素的影响，而设置浮动是让元素自身浮动，两者并不矛盾，因此可同时设置元素清除浮动和浮动4.7.3浮动的
浏览器解释问题1.元素浮动但是其父元素不浮动当设置了父元素的宽度或高度后，IE（非标准浏览器）中的浮动元素将占据外围容器空
间，Firefox依然不占据3.元素浮动但是其后面相邻元素不浮动设置了后面相邻元素的宽或高，则在IE中，浮动元素将仍然占据
它原来的空间，未浮动元素跟在它后面浮动的浏览器显示问题总结情况未浮动的盒子不设宽或高对未浮动的盒子设置宽或高盒子浮动
，其外层盒子未浮动IE和Firefox的显示效果一致IE浮动盒子将不会脱离标准流，Firefox浮动盒子仍然是脱离标准流的盒
子浮动，后面相邻盒子未浮动IE6浮动元素的双倍margin错误在IE6中，只要设置元素浮动，则设置左浮动，盒子的左mar
gin会加倍，设置右浮动，盒子的右margin会加倍。这是IE6的一个bug（IE7已经修正了这个bug）。解决IE6双倍m
argin错误的方法很简单，只要对浮动元素设置“display:inline;”就可了。代码如下：.son1{float:lef
t;display:inline;}提示，即使对浮动元素设置“display:inline;”，它仍然会以块级元素显示，因
为设置元素浮动后元素总是以块级元素显示的。当然，也可以不设置浮动盒子的margin，而设置其父元素盒子的padding值来避免这
个问题，在实际应用中，可以设置padding的地方尽量用padding，而不要用margin4.7.4浮动的应用举例1图
文混排及首字下沉效果等2菜单的竖横转换3制作栏目框标题栏标题栏的左端是栏目标题，右端是“更多”之类的链接。如何将文字
分别放在一个盒子的左右两端呢？最简单的办法就是设置左边的文字左浮动，右边的文字右浮动。这时由于两个盒子都浮动，不占据外围容器的
空间，所以必须设置外围盒子h3的高度，使它在视觉上能包含住两个浮动的盒子||栏目标题1
more网页的固定宽度1-3-1布局在默认情况下，div
作为块级元素是占满整行从上到下依次排列的，但在网页的分栏布局中，例如1-3-1固定宽度布局，我们希望中间三栏（三个div盒子）从左
到右并列排列，这时就需要将这三个div盒子都设置为浮动。但三个div盒子都浮动后，只能浮动到窗口的左边或右边，无法在浏览器中居中
，因此需要在三个div盒子外面再套一个盒子（称为container），让container居中，这样就实现了里面的三个div盒子居
中IE中的1－3－1布局示意图bodyheadercontainernavcontentsidepage
footerFirefox中的1－3－1布局示意图bodyheadercontainernavcontent
sidepagefooter1－3－1布局的结构代码id="header"<
divid="container"> id="navi" tent">id="content" id="side"<
divid="pagefooter">id="pagefooter"1－3－1布局的CSS代码#header,#
pagefooter,#container{ margin:0auto; width:772px; border:1px
dashed#FF0000;}#navi,#content,#side{border:2pxsolid#0066
FF; }#navi{ float:left; width:200px; }#content{ float:lef
t; width:360px; }#side{ float:left; width:200px; }#pagefo
oter{ clear:both;}需要使用display属性切换的情况让一个inline元素从新行开始；让块元素和其他元
素保持在一行上；控制inline元素的宽度;控制inline元素的高度（对导航条特别有用）；无须设定宽度即可为一个块元素设
定与文字同宽的背景色标准流下定位的应用－制作竖直导航菜单#nava{ font-size:14px; color:
#333333; text-decoration:none; background-color:#CCCCCC; di
splay:block; width:140px; padding:6px10px4px; border:1px
solid#000000; margin:2px;}#nava:hover{ color:#FFFFFF; b
ackground-color:#666666;}盒子的margin叠加问题盒子的margin在标准流中的计算实验1——
行内元素之间的水平marginspan.left{ margin-right:30px; background-color
:#a9d6ff;}span.right{ margin-left:40px; background-color:#eeb
0b0;}行内元素之间的水平margin行内元素之间的水平margin不会叠加span2span1margin-
rightmargin-left实验2——块级元素之间的竖直margin in-bottom:50px;">块元素1 块元素2div>块元素1块元素2块元素1块元素2margin-bottom:50pxmargin-top
:30pxmargin-bottom:50px块级元素之间的上下margin空白边叠加当一个元素包含在另一个元素中时，若父
元素的边框和填充为0，此时父元素和子元素的margin挨在一起，那么父元素的上下margin也会和子元素的上下margin发生叠加
。若父元素的边框或填充不为0，那么父元素和子元素的margin会被分隔开，因此不存在叠加的问题。经验：如果有盒子嵌套，要调整外面
盒子和里面盒子之间的距离，一般用外面盒子的padding来调整，不要用里面盒子的margin，这样可以避免空白边叠加的现象出现
嵌套盒子之间的margin盒子在标准流中的定位原则实验3——嵌套盒子之间的margin 嵌套盒子在IE和Firefo
x中的不同显示当一个块元素包含在另一个块元素中时，若对父块设置高度，但父块的高度不足以容纳子块时，IE将使父块的高度自动伸展，达
到能容纳子块的最小高度为止；若同时设置了子块高度，IE有时使子块高度自动压缩，直到能容纳内容的最小高度为止。而Firefox对父块
和子块均以定义的高度为准，父块高度不会伸展，任其子块露在外面，子块高度也不会压缩。从这里可以看出，Firefox对元素的高度解
释严格按照我们设定的高度执行，而IE对元素高度的设定有点自作主张的味道，它总是使标准流中子元素的盒子包含在父元素盒子当中。背景
的控制CSS的背景属性背景（background）是网页中常用的一种表现方法，无论是单纯的背景颜色还是背景图片，都能为网页带
来丰富的视觉效果，HTML的很多元素都具有bgcolor和backgroud属性，可以设置背景颜色和背景图片，如（table、td
等），但形式比较单一，对背景图片的设定，只支持在X轴和Y轴都平铺的方式，因此，如果同时设置了背景颜色和背景图片，那么背景颜色将被背
景图片挡住，以背景图片来显示。而CSS对元素的背景设置，则提供了更多的途径，如背景图片既可以平铺也可以不平铺，还可以在X轴平铺或
在Y轴平铺，当背景图片不平铺时，并不会完全挡住背景颜色，因此可以综合设置背景颜色和背景图片达到希望的效果。CSS的背景属性是ba
ckgroud或以backgroud开头CSS的背景属性属性描述可用值background设置背景的所有控制选项，是
其他所有背景属性的缩写其他背景属性的值的集合background-color设置背景颜色rgb颜色命名颜色16进制颜色
background-image设置背景图片urlbackground-repeat设置背景图片的平铺方式repeat
（完全平铺）repeat-x（横向平铺）repeat-y（纵向平铺）no-repeat（不平铺）background-at
tachment设置背景图片固定还是随内容滚动scroll（默认值）fixedbackground-position设置
背景图片显示的起始位置（[top][left][center][center][bottom][right]）（[x
%][y%][x-pos][y-pos]）各个背景属性的默认值background-color:transparent
透明模式background-image:nonebackground-repeat:repeat 平铺bac
kground-attachment:scrollbackground-position:0%0%background
属性的缩写background属性是所有背景属性的缩写形式，就像font属性一样，其缩写顺序为：background:bac
kground-color||background-image||background-repeat||backgro
und-attachment||background-position如body{background:#EFF4FFu
rl(images/body_bg.jpg)repeat-xfixed;}DW中的背景设置面板background-col
or:#0099ccbackground-image:url(img/bottom.gif)background-repea
t:no-repeatbackground-position:rightbottombackground-attachm
ent:no-repeat背景的运用技巧背景的运用技巧同时运用背景颜色和背景图片控制背景在盒子中的位置及是否平铺多个元
素背景的叠加滑动门技术背景位置的控制－实现图片的翻转圆角的设计方法总结同时运用背景颜色和背景图片目前网页中流行采用
一种渐变背景，即网页的背景从上至下由一种深颜色过渡到一种浅颜色，由于网页的长度通常是不好估计的，所以无法用一幅背景图片来做这种渐变
背景，只能在网页的上部用渐变的图片做背景，下部使用用一种和图片下部颜色相同的颜色做背景色通过在CSS中设置body标记的
背景颜色和背景图片，并把背景图片设置为横向平铺就可以实现渐变背景了。body{background:#666666url(xx
wlzx/body_bg.gif)repeat-x;}控制背景在盒子中的位置及是否平铺在html中，背景图像只能平铺，而
在CSS中，背景图像能做到精确定位，允许不平铺，效果就像普通的图像元素一样。因此有人建议所有的网页图像都作为元素的CSS背景引入。
例如下面的网页的背景就是用让背景图片不平铺并且定位于右下角实现的。body{ background:#F7F2DFur
l(cha.jpg)no-repeatrightbottom;}li元素的背景应用通过背景图片不平铺的技术还可以用来
改变列表的项目符号，虽然使用列表元素ul的CSS属性list-style-image:url(arrow.gif)可以将列表项前面
的小黑点改变成自定义的小图片，但无法调整小图片和列表文字之间的距离。要解决这个问题，可以将小图片设置成li元素的背景，不平铺，且
居左，为防止文字遮住图片，将li元素的左padding设置成20px，这样还可通过调整左padding的值实现任意调整列表小图片和
文字之间的距离。ul{ list-style-type:none;}li{background:url(arrow.
gif)no-repeat0px3px; /距左边0px，距上边3px/padding-left:20px;}可以
看出，有了背景的精确定位能力，完全可以使列表项目图片符号出现在li元素中的任意位置上。多个元素背景的叠加背景图片的叠加是很
重要的CSS技术，当两个元素是嵌套关系时，那么里面元素的盒子背景的不透明部分将覆盖在外面元素盒子背景之上，利用这一点，再结合对背景
图片位置的控制，可以得到滑动门技术。下面以4图像可变宽度圆角栏目框的制作来介绍多个元素背景叠加的技巧圆角的设计固定宽圆角
可变宽圆角4图像可变宽度圆角栏目框und">这是圆角矩形的标题…… 4图像可变宽度圆角栏
目框#round{ background-image:url(xxwlzx/tly.gif); background-
repeat:no-repeat; background-color:#00FF99; width:244px;}#
roundh3{ background-image:url(xxwlzx/tly2.gif); background-r
epeat:no-repeat; background-position:righttop; text-align:c
enter; padding:12px; margin:0px;}#roundp{ background-ima
ge:url(xxwlzx/tly4.gif); background-repeat:no-repeat; backgro
und-position:leftbottom; margin:0px; }#roundspan{ backgr
ound-image:url(xxwlzx/tly3.gif); background-repeat:no-repeat;
background-position:rightbottom; display:block; padding:16
px; font-size:14px; line-height:140%; color:#FF0000;}最后再设
置背景色由于几层背景的叠加，背景色只能放在最底层的盒子上，也就是对最外层的元素设置背景色，这样背景色就不会把背景图片给覆盖了。与
此相反，为了让内容能放在距边框有一定边距的区域，必须设置padding值，而且padding值只能设置在最里层的盒子上。但这个圆
角框没有边框，要制作带有边框的可变宽度圆角框，需要采用5图像二维滑动门法制作滑动门技术－背景的高级运用图片阴影，自适用宽
度圆角导航条1.图像阴影阴影是一种很流行、很有吸引力的图像处理技巧，它给平淡的设计增加了深度，形成立体感。使用图像处理软件
很容易给图像增添阴影。但是，可以使用CSS产生简单阴影效果，而不需要修改底层的图像。通过滑动门技术制作的阴影能自适应图像的大小，即
不管图像是大是小都能为它添加阴影效果。滑动门制作图片阴影原理图透明图像图像图像图像①②④③
⑤⑥2.自适应宽度圆角导航条原理：背景图片比盒子长一些背景图片：里面的盒子设置背景图片为从右边开始铺外面的盒子
设置背景图片为从左边开始铺把里面的盒子放在外面盒子上方，则两边的圆角都能显示，同时，改变文字的多少，能使导航条自动伸展，而圆角部
分位于padding区域，不会影响圆角滑动门导航条代码a{ font-si
ze:14px; color:#F1E474; text-decoration:none; background-im
age:url(xxwlzx/yuanjiao2.gif); height:32px; padding-left:24p
x; display:block; float:left; line-height:32px;}b{ backgr
ound-image:url(xxwlzx/yuanjiao2.gif); background-position:righ
ttop; display:block; padding-right:24px;}a:hover{ color:
#FFFFFF;}首页#">中心简介政策法规常
用下载为您服务技术支持和服务<
/b>《基于Web标准的网页设计》CSS的盒子模型CSS的盒子模型盒子模型是CSS的基石之一，它指定元素如何显示
以及（在某种程度上）如何相互交互页面上的每个元素都被浏览器看成是一个矩形的盒子，这个盒子由元素的内容、填充、边框和边界组成。网
页就是由许多个盒子通过不同的排列方式（上下排列，并列排列，嵌套排列）堆积而成。CSS的盒子模型CSS的盒子模型每个HTML
元素都可以看作是一个装了东西的盒子盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),
而盒子边框外和其它盒子之间，还有边界(magin),如图所示默认情况下盒子的边框是无，背景色是透明，所以我们在默认情况下看不到盒
子contentpadding-toppadding-bottompadding-leftpadding-right
border-topborder-bottomborder-rightborder-leftmargin-rightma
rgin-leftmargin-topmargin-bottomwidthheight元素盒子大小的计算一个元素实际宽
度=左边界＋左边框＋左填充＋内容宽度＋右填充＋右边框＋右边界IEquirk模式下盒子的宽度当将文档声明DOCTYPE删除后，
IE6对网页的解释会进入quirk（怪异）模式，此时盒子的宽度等于左边界＋宽度＋右边界因此当使用了盒子属性后切忌删除DOCTY
PECSS盒子模型计算题如果盒子里面嵌套有盒子，且两个盒子都有边框，那么两个盒子边框之间的距离等于外面盒子的填充值＋里面盒子
的边界值#box1{ background-color:#ddd; ma
rgin:15px; padding:5px;}#box2{ color:black; background-col
or:#aaa; margin:20px; padding:10px0px10px10px; width:100
px;}body{border:1pxdotted#FF0000}vid="box1">这是里面的盒子边框border属性盒子模型的
margin和padding属性比较简单，只能设置宽度值，最多分别对上、右、下、左设置宽度值。而边框border则可以设置宽度、颜
色和样式。分别是border-width（宽度）、border-color（颜色）和border-style（样式）其中bor
der-style属性可以将边框设置为实线（solid）、虚线（dashed）、点划线（dotted）、双线（double）等效果
边框border属性边框border属性有个有趣的特点，即两条交汇的边框之间是一个斜角，我们可以通过为边框设置不同的颜色，再
利用这个斜角，制作出像三角形一样的效果内容填充padding属性填充padding属性，也称为盒子的内边距。就是盒子边框
到内容之间的距离，和表格的填充属性（cellpadding）比较相似。如果填充属性为0，则盒子的边框会紧挨着内容，这样通常不美观。
当对盒子设置了背景颜色或背景图像后，那么背景会覆盖padding和内容组成的范围，并且默认情况下背景图像是以padding的左上
角为基准点在盒子中平铺的盒子模型的特性边界值margin可为负，填充padding不可为负边框border默认值为0，即不
显示行内元素，如a，定义上下边界不影响行高对盒子模型的思考边框是实的，我们可以看到实实在在的边框，而填充和边界都是虚的，我们
只能看到他们对元素的影响盒子模型中只能设置两类颜色，即边框颜色和背景颜色盒子模型可设置三类距离，即边界距离margin，填充距
离padding和边框值border属性值的简写形式?方法是按照规定的顺序，给出2个、3个或者4个属性值，它们的含义将有所区别
，具体含义如下：如果给出2个属性值，前者表示上下边框的属性，后者表示左右边框的属性；如果给出3个属性值，前者表示上边框的属性，
中间的数值表示左右边框的属性，后者表示下边框的属性；如果给出4个属性值，依次表示上、右、下、左边框的属性，即顺时针排序。各种
元素盒子属性的默认值大部分html元素的盒子属性(margin,padding)默认值都为0；有少数html元素的(marg
in,padding)浏览器默认值不为0，例如：body，p，ul，li，form标记等，因此我们有时有必要先设置它们的这些属性
为0。Input元素的边框属性默认不为0，我们可以设置为0达到美化表单中输入框和按钮的目的。4.5.2盒子模型的应用1.
美化表单网页中的表单控件在默认情况下背景都是灰色的，文本框边框是粗线条带立体感的，不够美观。下列代码通过CSS改变表单的边框样式
、颜色和背景颜色让文本框，按钮等变得漂亮些。用盒子美化表格让表格的外边框为2象素首先用间距制作1像素边框的表格，然后用cs
s为table元素加一个1象素宽的border制作1象素虚线边框首先将表格的边框和间距设为0，然后设置table的CSS上边
框和左边框为1象素虚线，再设置td的css下边框和右边框为1象素虚线盒子的定位盒子的三种定位形式在标准流下的定位在浮动属性
下的定位在定位属性下的定位除非设置浮动属性或定位属性，否则所有盒子都是在标准流中定位。顾名思义，标准流中元素盒子的位置由元素在
HTML中的位置决定。标准流HTML元素在标准状况下的定位方式行内元素在同一行内横向排列块级元素占满整个一行，在页面中竖
向排列元素不会移动到其它地方去，对于嵌套的元素盒子也是嵌套的关系标准流下的盒子排列分析ss">{border:2pxdashed#FF0066;padding:10px;margin:2px;
}网页的banner（块级元素） 行内元素1>行内2行内3行内元素的盒子行内元素的盒子永远只能在浏览器中得到一行高度的空间（行高由line-height属性决定，如果没设置该属性，则是内容的默认高度），如果给它设置上下border，margin，padding等值，导致其盒子的高度超过行高，那么它的盒子上下部分将和其他元素的盒子重叠。因此，不推荐对行内元素直接设置盒子属性，一般先设置行内元素以块级元素显示，再设置它的盒子属性。改变行内元素的高度如图所示，当增加行内元素的边界和填充时，行内元素a占据浏览器的高度并没有增加，下面这个div块仍然在原来的位置，导致行内元素盒子的上下部分重叠，而左右部分不会受影响display属性通过display属性可控制元素是以行内元素显示还是以块级元素显示，或不显示display:block|inline|none|list-itemblock元素block元素的特点是：总是在新行上开始；高度，行高以及顶和底边距都可控制；宽度缺省是它的容器的100%，除非用width设定一个宽度 |
|
