精通css与html设计模式书中包含350种_第1页
精通css与html设计模式书中包含350种_第2页
精通css与html设计模式书中包含350种_第3页
精通css与html设计模式书中包含350种_第4页
精通css与html设计模式书中包含350种_第5页
已阅读5页，还剩68页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

CSSHTMLCSS2.1，HTML4.0.1xhtml1.1。350种设计模式。经验证的浏览器：ie7,ie6,firefox2opera9,safari2关键内容是文本和内联元素（、对象、控制元素和语义化的标记）的组合（2.9节）块状元素不能作为内联元素和文本的兄弟，这种情况称为混合内容（mixedcontent术indent或outdent：改变元素内盒大小StackingOrder：堆叠顺序。7.5水平拉伸：默认。水平固定大小：width:;设计模式：轻松搞定CSS不仅是学单独的属性。属性或属性值在不同的上下文中发挥不同的作用。更糟糕的时，不同浏览器对规则的实现不同（或实现缺失。CSS的学习难度，本书列出了所有有用的属性和属性值组合。将属性的行为置于特定的上Opera9,andSafari2350HMTLCSS使用设计模11630045CSS4种元素（块状、块状、表）5种定位（静态、相对、绝对、固定和浮动）5CSS语应使UTF-8CSSCSS代码应小写。在XHTML中选择符元素名、类、attributes和id时是大小写敏感的（HTMLCSS选择符大小写不敏感。CSSElementnames,classes,andIDsarerestrictedtoletters,numbers,underscores(_),hyphens(-),andUnicodecharacters161andhigher.class="class1class2class3"font-family:"CenturyGothic",verdana,arial,sans-serif;assignsacomma-delimitedlistoffontnamestofont-family.Ifthefirstfontnameisunavailable,abrowserusesthesecond,andsoforth.Thelastfontnameshouldbeoneofthegenericfontnames:serif,sans-serif,ormonospace,whichworksineverybrowser.Wheneverafontnamecontainsaspace,itmustbeenclosedindoublequotes,suchas"Century（未）UsingCascade（未）CSSandHTML（未）CSSPropertiesandHTML设计模4种元素：structuralblock,terminalblock,multi-purposeblock,andinlineHTML结<head><title>&(<meta>|<link>|<object>|<style><noscript>bodyinline|inline|inline|<dt>inline|<caption><colgroup><thead>包含空<tbody><th>inline|inline|inline|block(excludinginline(excluding空<optgroup>|inline|block(excluding<a>,<form>,inline(excluding空空<param>|inline|空空structural<ol><ul><dl><table><tr><thead><tbody><colgroup>multi-purpose<div><li><dd><td><th><form>terminal<h1><p><dt><caption>36<span><em><a><cite><code><kbd><samp><acronym><abbr><sub><br>Includesreplacedelementsandform<img><object><embed><input><textarea><select><button>Framescancauseproblemsforsearchenginesandusers:<iframe>,<frameset>,<frame>,and<noframe>.Finally,<base>changestherootofalllinksinyour—useitonlyifyoufullyunderstandit,oritmaybreakallyourlinks.HTML自己将元素分成三类：structural,blockandinline结构化元素：包括purpose（terminalsemanticflowblock条件样式<!--[iflteIE<linkrel="stylesheet"href="ie6.css"media="all"type="text/css"<![endif]--<!--[ifIE<linkrel="stylesheet"href="ie7.css"media="all"type="text/css"<![endif]--结构块状元｛Therearefourmajorstructuralblockelements(<ol>,<ul>,<dl>,and<table>)withninesupportingstructuralelements(<li>,<dt>,<dd>,<caption>,<thead>,<tfoot>,<tbody>,<colgroup>,and<col>).终端块状元停止组织文档结构，内容<h1>,<p>,<blockquote>,<dt>,<address>,and多目标块状元HTMLprovidessevenelements—<div>,<li>,<dd>,<td>,<th>,<form>,and<noscript>—thatcanextendthestructureorterminateit.多目标块状元素即可以包含块状元素也可以包含内容，但不能同时包含二者内联元content由文本和内联元素组成（而有些人称文本和内联元素混合为混合内容，这种混合我将内联元素分为四类：semantic,flowreplaced,andcontrolsSemanticelementsidentifythemeaningoftheircontent.Flowelementscontroltheflow，如换行。Replacedelementsarereplacedwithanobject,suchasanimage.Controlsareobjectsusedfordataentry,suchasatextbox.3种语义化内联元素用于定义内容的相对重要性。它们的重要性依次增大：<span><em><strong>Searchenginesuse<em>and<strong>torank2.2Html为每种语义化的内联元素都赋予了默认的样式。<span>没有任何默认样式。<strong>默认为粗<samp>。默认有下划线的有：<a>acronym>,and<abbr>。IE6不支持<abbr>HTML空白浏览器将重复的空白符替换为单个空格。Thisallowsyoutoinsertextraspacestabsnewlinesandreturnsintothemarkuptomakeitmorereadablewithoutitshowingupintherendered.Abrowserinterpretsonlythefollowingcharactersaswhitespace:space( ),tab( ),newline( ),andreturn( ).EmptyelementsandelementscontainingonlywhitespacedonotinterruptacontiguoussequenceofThefirstwhitespacecharacterinaseriesofcontiguouswhitespacecharactersdeterminesthepositionandstyleofthecollapsedspace.HTMLprovidesfivespaceentitiesthathavedifferentwidths.Thesearenotwhitespace!The& ;,isthewidthofanormalspaceandworksinallmajorbrowsers;thewidthsofthe&spaces(‌, , ,and )varyindifferent（未）3CSSSelectorsand盒模CSS定义了6种主要的盒子：内联的、内联块的、块的、表格、和浮动的。浏览器会将每个displayposition:absoluteposition:fixed能让任何元素变float:leftfloat:right可以将任何元素渲染为浮动盒子。接下来三章都与盒模型有关。本章解释六种主要的盒子。Chapter5introducesextents,whichare（shrinkwrapped（sized（stretchedpadding,background,overflow,visibility,break-before,andbreak-after.display:inline将元素渲染为内联元素。display:block将元素渲染为块。display:list-item将元素渲染为display用display:none可对元素的解析display:inlinedisplay:blockdisplay:list-itemdisplay:inline-block列表项元素的父元素需要是块状元素，需要为列表项提供左paddingmargin。Youcanassignamarkertoitusinglist-style-type.markerlist-item列表项已经是块。去掉markerpaddingmargin。盒模,,,,,margin：围绕边框的margin。透明素的父亲的背景。margin的外边缘是元素的外盒background：assignsthepaddingareainsidetheboxtoabackgroundcolorand/orCSS定义了6种主要的盒子：内联的、内联块的、块的、表格、和浮动的。盒子的类型由以下三个属性决定：display,position,float。内联盒Inlineboxesarerenderedintheinlineflow.它们水平的从左向右移动，当超过最近的终端块状元素祖CSS属性：width,height,overflow对内联盒子无效：它们总 内容marginline-heightmargin改变内联元素在流中的位置。正的margin-left把元素挪开（相对于之前的元素margin-right让下一个元素border对内联元素的作用很特别。水平的borders改变内联元素在流中的位置。Theleftbordermovestheelementtotheleft,andtherightbordermovesthenex ementtotheright.上下borders仍在padding之外绘制不会扩展行高或改变元素的垂直位置因为边框不影响行高，padding作用于内联元素border相同不会扩展行高marginline-heightdiv,span{}}

border:2pxsolid}line-height:}<div例子，边框换<divstyle="background:blue;<spanstyle="line-height:80px;border:10pxsolidblack;">1233ewglkgekggekwgjkewg<spanstyle="line-height:80px;border:10pxsolid内联块状盒marginsborderspaddingwidthheight表现撑高行高。内联块状元素可以是收紧（shrinkwrapped、固定大小或拉伸的。CSS属性：height:autoshrinkwrappedwidth:100%stretch内联块。注意，一个被stretched的内联块与块相同。marginmargin-topexpandoffset｝margin-bottommargin-bottom也可能扩大或缩小Apositivevalueinmargin-leftmovestheelementawayfromthepreviouselement,andanegativevaluemovesitcloser.Apositivevalueinmargin-rightmovesthenexementfurtheraway,andanegativevaluemovesitcloser.borderandpaddingexpandtheoutersizeoftheinlineelement.Thismovesittotherightandmovesfollowingcontenttotheright.Italsomovesitupandincreasestheheightofthelinecontainingit.实<divstyle="background:blue;<spanstyle="display:inline-<divstyle="background:blue;<spanstyle="display:inline-block;margin-bottom:10px;">1233ewglkgekggekwgjkewg<spanstyle="display:inline-<divstyle="background:blue;<spanstyle="display:inline-block;border:10pxsolidblack;">1233ewglkgekggekwgjkewg<spanstyle="display:inline-block;border:1pxsolid块状盒width：width:autoheight：height:auto｛；不能水平收缩（shrinkwrap）块装盒子margin会合并。｛｛margin-leftmargin-rightauto｛相对于父亲的位置）marginmargin。表格盒式（15、16章。本节的设计模式关注表格的外边，及它与它的容器的关系。width：表格的宽度是边框的外面（padding的里面height：表格的高度是边框的外面（padding的里面若是固定大小或拉伸，margin偏移（offset）margin可能导致表格与元素相交。如表格被拉伸，margins缩进（indent）表格，会减少空间，压缩单元格（shrinkwappedtocellstoensureconsistentbehaviorinallbrowserswhenfixedcellsoverflow.border-collapse：相邻边是否合并（15、16章table-layout：表格是固定大小还是根据内容自动调整大小（15、16章绝对盒（viewport以自由的。left,right,top,（offsettop,bottom作用方式类似。width：width:autowidth:autoleft和rightautowidth:auto，leftright0或其他值，盒子被拉伸（offset（offsetheight：height,topbottomwidth,leftrightmargin：正值导致绝对盒子的一边向其容器移动，负值反向border浮动盒float:leftfloat:right可以令任何元素浮动。浮动盒子被从普通流中移除，放在相邻块的边框和背景EventhoughafloatisremovedfromtheflowitindentsadjacentcontentintheflowLeftfloatsindentadjacentcontenttotheright,andrightfloatsindentcontenttotheleft.在垂直方向上，浮动元素处于其在普通流中原来的位padding区自左向右放置。Afloatstacksnexttootherfloatsinthesamegeneralverticallocation.Whenafloatcannotfitnexttoanotherfloat,itmovesdownbelowit.Afloat’sposition,size,paddingbordersandmarginsaffectthepositionofadjacentfloatsandadjacentinlinecontent.浮动的精确位置无法被准确预知。width：width:autoheight：height:automargin：hasuniquefloatfeatures.Apositivemarginpushesthefloatawayfromitspointofalignmentandpushesotherfloatsandinlinecontentawayfromit.Anegativemarginpullsthefloattotheothersideofitspointofalignmentandpullsotherfloatsandinlinecontentcloser.Marginsaroundfloatsdonotcollapse.borderpadding：扩大浮动的外盒。Theleftborderandpaddingofaleftfloatmovesthefloattotheright,anditsrightborderandpaddingmovesotherfloatsandinlinecontentontherightfurthertotheright.ThisappliesviceversaforrightfloatsTopborderandpaddingmovethefloatdownThebottomborderandpaddingmovedownanyfloatsbelowthefloat,andextendsthefloat’seffectonadjacentcontentinthenormalflow.盒模型范围缩放width对内联元素无效。width的作用取决素的类型和元素是否被定位或浮动。width和是完全独立的。width:auto水平收紧以下盒子：内联、内联块、浮动、表格、绝对（leftautoauto时水平拉伸：块状盒子和绝对（leftrightwidth:+VALUE：Youcansizeanelementbyassigningpixels,ems,apercentage,oranotherfixedmeasurementtowidth.width:100%：width:100%auto不同的是，width:100%有局限。marginsborderspadding会导致超出父亲的宽width:100%paddingmargin例子：100%和内边距、边框、外边<div<div1background:yellow;width:100%padding:}padding2

background:yellow;width:100%border:5pxsolid}新实1、margin<divstyle="background:<divstyle="background:<divstyle="background:green;margin:<divstyle="background:margin–top，在容器与容器的兄弟之间多了空白（容器的兄弟是红色的，空白是白色的修改 容器设定高度<divstyle="background:<divstyle="background:blue;<divstyle="background:green;margin:<divstyle="background:<divstyle="background:<divstyle="background:<divstyle="background:green;margin:20px;<divstyle="background:IE65.6width:100%拉伸表格、浮动元素和内联元素。只要盒子没有水平外边距这条规则就有height作用于除内联元外的所有元素。heightworksdifferentlydependingonthetypeofandwhetherornotitispositionedorfloated.widthheight是完全独立的。height:autoautoheight:+VALUE：Youcansizeanelementbyassigningpixels,ems,apercentage,oranotherfixedmeasurementtoheight.margins,borders,orpadding会导致溢出父亲。height:100%paddingmargin如果浮动元素是大小固定的，它将改变流。widthchangestheleftandrightboundariesinwhichthefloat’scontentisflowed,affectingthelocationofadjacentcontentandfloats.heightpushesdownorpullsupadjacentfloats.replaced元素（如图像）的大小，浏览器将缩放它。如果想用原来的大小，将高度或宽度auto。SELECTOR{width:auto;height:auto;float:LEFT_RIGHT;INLINE-SELECTOR{width:auto;height:auto;INLINE-BLOCK-SELECTOR{width:auto;height:auto;BLOCK-SELECTOR{height:auto;SELECTOR{position:absolute;width:auto;left:0;right:auto;或SELECTOR{position:absolute;width:auto;left:auto;right:0;SELECTOR{position:absolute;height:auto;top:0;或SELECTOR{position:absolute;height:auto;top:auto;bottom:0;width:auot:ao时，浏览器从外向内计算被拉伸元素的宽和高。浏览器从父亲的内盒magn、r、din，以计算内核。与此相反的是，大小固定或收紧的元素，尺寸由内向外计算。width:autoleft:0right:0,,borderpadding也会导致拉伸溢出父亲。唯一孩子（notthefirstandonlychild，容器将被溢出。IE6不能拉伸绝对元素（IE7可以。Anabsolu ypositionedtableisstretchedusingwidth:100%and盒模型属margin:±VALUE:containingblockwidth{{内盒}}margin:0CSSmargin-topmargin-bottommargin-left或margin-right内联块元素（如正的margin-top扩展行高，负值减少行高。正的margin-bottom升（offsetsmargin-topmargin-bottommargin会合并。（outdents缩进会减小元素内盒，borderpadding向里推。对于表格，大小固定的绝对元素，或收紧的绝对元素，margin（offsets｛100%对于浮动，apositivemarginpushesthefloatawayfromitspointofalignment,andpushesotherfloatsandinlinecontentawayfromit.Anegativemarginpullsthefloattotheothersideofitspointofalignment,andpullsotherfloatsandinlinecontentcloser.Marginsonastretchedfloatdonotindentthefloatbutcauseittooverflowitscontainer.margin:auto:对于多数元素，margin:automargin:0｛margin-right:0<divstyle="background:blue;width:200px;margin-<divstyle="background:<divstyle="background:<divstyle="margin:20px;background:marginheightmargin2<divstyle="background:<divstyle="background:<divstyle="margin:20px;background:、Border与marginBorder与margin一样都能改变元素和位置和相邻元素的位置。border也适用，除了：（transparentBorderborderSinceatable’swidthandheightrefertotheoutsideofitsborders(ratherthantotheinsideofitspadding),bordersaredrawninsidetheboxspecifiedbywidthandheight.Thismeansbordersdonotaddtothesizeofshrinkwrappedorsizedtables.Thisalsomeansbordersonastretchedtabledonotcauseittooverflowitscontainer;instead,theyindentthetablelikeastretchedblockorastretchedabsoluteelement.padding:0是默认值。Paddingborder在改变元素的位置及元素邻居的位置这一点上，Paddingborder，margin｛padding｝Likeborderspaddingdoesnotaddtothesizeofshrinkwrappedorsizedtables,向拉伸表格的单元padding不会导致溢出容器。border和marginpaddingBordersaretransparenttotheelement’sbackground.Contrastthiswithmargins,whicharetransparenttotheparent’sbackground,andborders,whicharestyled.PaddingPaddingbackground-image:none：无背景background-image:url("file.jpg")：背景。背景会填充padding区background-position：的水平和垂直起始位置。不管是否铺瓷砖 ent:scroll：用户滚动内容时滚动背景。默认值 默认值是：round:nonetransparentrepeatlefttopscroll素的宽和高。Pixelspositionitatanoffset.Emspositionitproportionaltotheelement’sfont-size.指定背景时，应指定背景色，且背景色为前景的反色。防止不能加载overflow设为以下四个常量：visiblehiddenscrollautovisible。visibleallowsoverflowingcontenttoberenderedoutsidethecontainingblockhiddenhidestheoverflowingcontentanddoesnotprovidescrollbars.Thispreventsauserfromscrollinerflowedcontentintoview.scrollclipstheoverflowingcontentandprovidesscrollbarssotheusercanscrolltheoverflowedcontentintoview.autoscroll类似，但只有在需要的时候才显示滚动条。IE6overflow:visible的实现有问题：不是溢出，而是令容器的宽度或高度增加以容纳内容。IE7修开处理。AllmajorbrowserssupportthemexceptforOpera9.｛滚动条的出现不会撑开元素，或者说，在元素显示滚动条｛IE6｝IE6的显示效果还有点问题：visibility:hiddendisplay:nonevisibilityPage<divclass="break-after">Pagebreakafterthis<divclass="break-after">PagebreakafterthisCSSprovidestwopropertiesforinsertingpagebreaks:break-beforeandbreak-after.Youcaninsertapagebreakbeforeanelementbyusingbreak-before:always.Youcaninsertapagebreakafteranelementbyusingbreak-after:always.Thedefaultvaluesarebreak-before:autoandbreak-after:auto.Thesedefaultvaluesdirectthebrowsertouseitsdefaultalgorithmtoautomaticallydeterminethelocationofpagebreaks.Youcanoverrideapreviouslysetpagebreakusingbreak-before:auto InternetExplorer6andOpera9alwaysinsertapagebreakwhenevertheyencounteranelementsettobreak-before:alwaysorbreak-after:always.Thisinsertsanextrablankpagewheneveroneelementissettobreak-after:alwaysandthenexementissettobreak-before:always.Theexampledemonstratesthis“feature.”TheexampleshowsascreenshotofprintpreviewinInternetExplorer6containingfourprintedpages.Thethirdprintedpageisblank.Firefox2doesnotinsertthisextrablankpage.Aneasywaytoavoidinsertingblankpagesisnottousebothbreak-afterandbreak-beforeinthesame.Ifyouwanttoprintablankpage,insertanelementintotheandstyleitwithbreak-beforeandvisibility:hidden.定位模（indent（offset9章组合这些技术创造高级的定位策略。定位模（fixedfloat6种盒模型有管，但它们不同。静态定位模型可以定位内联、内联块、块和表格。绝对和各种定位模型使用相同的属性：displaywidthheight,marginleftright,top,bottom,z-index。相对定left,top,z-index{{rightbottom}}floatclear。6种盒模型(inlineinline-blockblocktable,absolute,andfloat)3种尺寸(sized,shrinkwrapped,andstretched)3种边缘(indented,offset,andaligned)组合。定位order（“unposition”常位置或最近的定位祖先偏移。position:fixed令元素相对于视口偏移。z-indexIE6不支持固定（Fixed）最近的定位祖让一个元素定位的方式有：position:relative,position:absoluteposition:fixed。定位元素相对于它们position:relative是创建定位祖先的好方式。因为它不会将元素从普通流中移除。通过它可以创造出<divstyle="position:static;background:blue;padding:10px;"><divstyle="position:relative;background:green;padding:10px;border:10pxsolidblack;margin:10px;"><divstyle="position:static;background:yellow;padding:10px;"><divstyle="position:absolute;right:0;bottom:0;background: IE6<divstyle="width:900px;position:relative;background:green;padding:10px;border:10pxsolidblack;margin:10px;">堆叠上下文（Stacking同义词：StackingOrderStackingLevel,Z-indexLayeringPaintingfrombacktofrontfromsmallesttolargestz-indexwith orderbreakingties.z-index为负的定位元素放在静态元素和非定位浮动元后。z-index不需要连续。默认z-index为auto。（localcontext态、浮动、定位的）在其中绘制。如果z-index为auto或z-index赋给非定位元素不会创建堆叠上下文。Thefollowingvaluescreatestackingcontexts:z-index:0,z-index:-1,andz-index:9999.每个堆叠上下是原子的，不允许祖先或兄弟到它的孩子之间。achloalackingtisasidoaniernalakingllof0anditstsaeacedtieoit.-indx不是全局的。它相对于最近的带有数字-indx的定位祖先｛那个祖先创建了堆叠上下文，祖先在上下文中的z-indx为0<tml创建根堆叠上下文。堆叠上下文元素的背景片、边框z-indexz-index:autoz-index:0z-index2,6,7步又会创建堆叠上下文，因为每个定位元素（z-index）浏览器渲染元素内容前，会先渲染盒子：元素背景色，接着是背景、边框。然后在盒子傻瓜渲Firefox212原子同义词：hasLayout问题：内容渲染在块，而不是在块上面。即，文本和内联元素原子化到块，于是，当块被（LayeredButitmakessensethatinlineelementsareonblocksbecauseinlinecontentoverflowsby定位元素是原子的，其他元素无法它与它的静态后代、内联内容、背景之间。见下面一张（Atomicoverflowdoesnotconsistentlycreateatomicityinthemajorbrowsers.Blockssettooverflow:hiddenareatomicinFirefox2.0andInternetExplorer7,butnotinInternetExplorer6andnotinothermajorbrowsers.Blockssettooverflow:scrollareatomicexceptforinInternetExplorer6.AlltablesandsizedblocksareatomicinInternetExplorer7,butnotinothermajorbrowsers.ThisisbecauseInternetExplorer7andearlierversionsuseaninternalfeatureandaproprietaryDOMpropertycalledhasLayout,whichistruewhenanelementhaslayout.Whenanelementhaslayout,itisrenderedinitsownwindowwithitsownlayoutcontext.Allofitschildrenarerenderedatomicallyinsideitsrectangularbox.Itcannotshrinkwrap,andexternalfloatsdon’taffectthepositionofitsinlineInternetExplorer6hasbugsthataresometimesfixedbytriggeringhasLayout.Youcanuseitsproprietarypropertyzoom:1totriggerlayout,butbeawarethatzoomcausesyourstylesheetnottovalidate.实<divstyle="background:blue;border:1pxsolidblack;height:20px;position: <divstyle="background:yellow;margin-top:-12px;margin-left:20px;border:1pxsolidblack;height:40px;position:relative;">22222</div><divstyle="background:green;margin-top:-12px;margin-left:40px;border:1pxsolidblack;height:40px;position:relative;"> 静Youwanementstoflowautomaticallyoneaftertheotherinlinesandblockssotheyfluidlyadapttothesizeoftheuser’sdisplay.position:static令元素位于普通流之中。这是默认值，因此元素自动在普通流中渲染。Thenormalflowconsistsofnestedblocksrenderedverticallydowntheviewport.在块中个，块和行仍是垂直向下绘制。paddingmargin想要：将元素从普通流中移除，放入自己的层。想相对于最近的定位祖先的内边（innerborder）定position:absolutewidthheight设置它的大小。百分比相对于最近的定位祖先。left,right,top,bottomleft,right,top,bottomautomargin-left,margin-right,,（offsetInternetExplorer6shrinkwrapsstretchedabsoluteelements.InternetExplorer7andearlierversionscannotcenterabsoluteelements.Layoutscreatedusingabsolutepositioningdonotscalewellondeviceswithdisplaysorfontsthataremuchsmallerorlargerthanyoudesignedfor.固定IE6相相对元素不会离通流，不会改变它在普通流中原来的形状。例如，如果内联元素在行尾换了行Contrastthiswithabsolutepositioningwhichchangesaninlineelementintoanabsoluteboxandreflowsthecontentintotheabsoluteblockbox,whiaychangeitslefttop。不会改变流中其他元素的位置。lefttopauto，令BecauseofthewayInternetExplorer7andearlierversionsimplementhasLayout,relativeinlineinapositionedblockcannotbestackedontopofelementsoutsidetheblock.Becauseofthis,InternetExplorer7cannotrendertherelativeinlinespanintheexampleinfrontoftheabsoluteparagraph.Thishappensbecausetheinlinespanisliterallycontainedwithintheparagraphbecausetheparagraphhaslayout.Thisproblemdoesnotoccurinothermajorbrowsers,anditdoesnotoccurinInternetExplorerwhentheparentblockdoesnothavelayout,suchaswhenitisastaticblock.Floatpadding｛到它旁边，还是在它下边（ononeorbothsidescanusefloat:nonetooverrideanotherrulethatfloatsanelement.Floatsexistintheirownlayerabovethebackgroundsofblockelementsandnexttoinlinecontentinthenormalflow.Aleftfloatindentscontentonitsrightsideandarightfloatindentscontentonitsleft.浮动不影响块盒的位置，只影响它们的内联内容。浮动影响其他浮动的位置，andmaybestackednexttoeachotherontheleftorright.Floatsalsomaypushdownotherfloatsandinlinecontent.Afloat’sverticalandhorizontalmarginsoffsetitfromitsparentandfromotherfloats.浮动不会与其他浮动或内容交叠（margin使用clear:left｛float:left，clear:left，则移到下一行。clear:right可以让块或浮动移到clear:both，令块或浮动移到它左边或右边的浮动的下方。clear对表格、块和浮动有效。clear对内联、绝对定位和固定定位无效。相对浮position:relativelefttop}marginlefttop调整浮动位置不会影响内联定位：缩进、偏移、对｛indent（offset（aligned缩,Onceoppositesidesofanelementarealignedtoitscontainer(inotherwordstheelementisstretched),marginscanindentoroutdenteachsideindependently.BLOCK-SELECTOR{position:static;width:auto;SELECTOR{position:absolute;width:auto;left:0;margin-left:±VALUE;SELECTOR{position:absolute;height:auto;top:0;margin-top:±VALUE;IE6不能拉伸绝对元素，而是收紧。偏移静margin可以偏移（offset）marginmargin-leftleftmargin可能导致内｛偏移或缩进静态表marginmargin-leftmargin-rightauto；反之依然如果两端都是数字，是拉伸？100%marginauto。这时表格IE67有个bug，如果收紧的表格是<body>margin-left偏移浮marginmargins将内容和其他浮动分离，负的拉近。margin偏移绝对和固leftright,toporbottomauto（这是默认值margin偏移。left/right/top/bottom收紧并偏移绝对元SELECTOR{大小固定并偏移绝对元SELECTOR{垂直和水平维度是独立的。你可以对齐并偏移一个维度（topleft为数值度（topleft为auto，或不设置因为这是默认值。偏移相position:relativetopleftmarginArelativeelementisrenderedinalayerwithoutleavingtheflow.Thisallowsyoutooverlapelementsandcontroltheirstackingorderusingz-index.对齐内联内text-align，将内容水平对齐到终端块容器的边。line-height大于内容的高度，浏览器会垂直对齐每一行中的Toaligninlinecontentvertically,youcanusevertical-align:CONSTANTorvertical-align:±VALUE.Theonlytimeyoucanseetheverticalalignmentiswhenitemsinthesamelinehavedifferentheightsordifferentverticalalignment.Verticalalignmentdoesnotpersistbetweenlinesbecauseabrowsershrinkwrapsandverticallycentersthecontentofeachline.Thus,inlineverticalalignmentisrelativetothecontentactuallypresentinaline.对齐和偏移静态（indentedwidth对齐和偏移静态表margin设为非零值。对齐和偏移绝width:autoleft:0right:autoright:0left:autotop:0bottom:autobottom:0top:auto对齐绝把绝对定位元素定位到最近的定位祖先的水平/left:0right:0margin-left:automargin-right:autotop:0bottom:0IE7AlignedYouwanttoalignanelementtotheoutsideofitscontainer.Forexample,youwanttoaligntheleftsideofanelementtotherightsideofitscontainer,orviceversa.Oryouwanttoalignthebottomofanelementtothetopofitscontainer,orviceversa.YoucignanabsoluteelementtotheoutsideofanyofthefoursidesofitsclosestpositionedSince100%isthewidthofanelement’scontainer,offsettinganelement100%fromonesidealignsittotheoutsideoftheotherside.Inaddition,youcanusemargintooffsettheelementfurther.ignedoutsideabsoluteelementcanbesizedorshrinkwrapped.Youcignstaticblocksandfloatstotheoutsideleftorrightsidesoftheirparent,butnottothetoporbottom.Theymustbesized.Thetechniquedescribedpreviouslycignblocksandfloatstotheoutsideright,butnottotheoutsideleft.Toalignblocksandfloatstotheoutsideleft,youneedtoputthenegativeoftheelement’souterwidthinmargin-left.Theouterwidthistheinnerwidthplusleftandrightpaddingandborders.SizedBlockAlignedOutsideSELECTOR{width:INNER;margin-left:-OUTER;SizedBlockAlignedOutsideSELECTOR{width:INNER;margin-left:100%;SizedFloatAlignedOutsideSELECTOR{width:INNER;margin-left:-OUTER;float:left;SizedFloatAlignedOutsideSELECTOR{width:INNER;margin-left:100%;float:left;AbsoluteAlignedOutsideSELECTOR{right:100%;margin-right:±OFFSET;position:absolute;AbsoluteAlignedOutsideAbsoluteAlignedOutsideAbsoluteAlignedOutsideSELECTOR{top:100%;margin-top:±OFFSET;position:absolute;Youcannotaligninlineelementstotheoutsideoftheircontainers.Youcannotalignstaticblocksorfloatstotheoutsidetoporbottomoftheircontainers.InternetExplorer6cannotoutside-alignstaticblocksandfloats,butInternetExplorer7can.定位：高12左对将元素（及其内容）对齐。对于绝对元素，left:0左对齐，right:auto防止它右对齐。width:automargin-left:0margin-right:0left:0和做偏Tooffsetaleft-alignedelementfromitsleftside,youcanassignavalueotherthanzerotomargin-left.Apositivevalueinmargin-leftoffsetstotheright(towardtheinside),andanegativevalueoffsetstotheleft(towardtheoutside).ThisdesignpatternissymmetricaltotheRightOffsetpatternineveryway.SeetheLeftAligneddesignpatternfordetailsonhowtoleft-alignanStretchedAbsolutepatternsdonotworkinInternetExplorer6.InlinetextcannotextendoutsideablockinInternetExplorerversion6orRightYouwanttoalignanelementanditscontenttotherightsideofitsparentorclosestpositionedThisdesignpatternissymmetricaltoLeftAlignedinevery（略RightYouwanttoalignanelementanditscontenttotherightsideofitsparentorclosestpositioned（略CenterYouwanttoalignanelementanditscontenttothehorizontalcenterofitsparentorclosestpositionedTocenter-aligncontent,assigntext-align:centertoitscontainingTocreateacenter-alignedsizedelement,youcanusemargin-left:auto;andmargin-right:auto;andsetwidth:+VALUEtosizeit.Forabsoluteelements,youcsouseright:0andleft:0toaligntheelementtotheleftandrightsides.Tocreateacenter-alignedstretchedelement,setmargin-leftandmargin-righttothesamevalue.Alargervalueshrinkstheelement,andasmallervaluegrowsit.Forabsolutestretchedelements,youcsouseleft:0andright:0.Ahorizontallyshrinkwrappedelementcannotbecenteraligned.InternetExplorer6cannotcenterabsoluteelements;version7cancenterstretchedabsoluteelements,butstillcannotcentersizedabsoluteelements.Acenter-alignedsizedpatternkeepsthewidthconstantandgrowsthemarginsdynamically.center-alignedstretchedpatterngrowsthewidthdynamicallyandkeepsthemarginsconstant.Youcanusepercentagesforwidthsandmargins.Apercentagesizesthewidthormarginproportionaltothewidthofthecontainingblock.CenterYouwanttoalignanelementanditscontenttothecenterofitsparentorclosestpositionedancestorthenoffsetitfromtheTocreateacenter-offsetinlineelement,youcanusemargin-left:+VALUEtooffsettheelementtotherightandmargin-left:-VALUEtooffsetittotheleft.Alsoassigntext-align:centertothecontainingblockTocreateacenter-offsetsizedabsoluteelement,youcanuseapositivevalueinlefttooffsettotheright,andanegativevaluetooffsettotheleft.Youcsoassignthefollowingtotheelement:margin-left:auto;,margin-right:auto;,andright:0;,andsetwidth:+VALUEtosizetheTocreateacenter-offsetstretchedelement,setmargin-leftandmargin-righttothesamevalue.Alargervalueshrinkstheelement,andasmallervaluegrowsit.Tooffsetittotheleft,subtractthedesiredoffsetfrommargin-leftandaddittomargin-right.Tooffsetittotheright,addthedesiredoffsettomargin-leftandsubtractitfrommargin-right.Forabsolutestretchedelements,youcsouseleft:0andright:0.AsizedstaticblockelementcannotbecenterAshrinkwrappedabsoluteelementcannotbecenterLimitations:SameasCenterYouwanttoalignanelementanditscontenttothetopofitsparentorclosestpositionedTocreateatop-alignedsizedelement,youcanuseheight:+VALUEtosizeit.Youcanusemargin-top:0toalignittothetop.Youcanusemargin-bottom:autotopreventitfromaligningtothebottom.Foranabsoluteelement,youcsousetop:0toaligntheelementtothetopandbottom:autotopreventitfromaligningtothebottom.Tocreateatop-alignedshrinkwrappedelement,youcanuseheight:auto,bottom:auto,margin-bottom:autotoshrinkwraptheheight.Youcanusetop:0andmargin-top:0toalignittothetop.Tocreateatop-alignedstretchedelement,youcanuseheight:auto,margin-top:0,andmargin-bottom:0tostretchitsheighttothetopandbottomofitscontainer.Foranabsoluteelement,youcsousetop:0andbottom:0tostretchittothetopandbottom.StretchedAbsolutedoesnotworkinInternetExplorer6,butitdoesworkinversionYouwanttooffsetanelementanditscontentfromthetopofitsparentorclosestpositionedTooffsetatop-alignedelementfromthetop,youcanassignavalueotherthanzerotomargin-top.Apositivevalueinmargin-topoffsetsdown(towardtheinside),andanegativevalueoffsetsup(towardtheThisdesignpatternissymmetricalt

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论