Magandang hapon mga kaibigan! Kahit papaano, sa ilang mga aralin ko sa html, nagsalita ako at gumamit ng ganitong konsepto bilang layout ng div.
Marahil ay may mga katanungan ka, lalo na kung ikaw ay mga baguhan, ano ito?
Sa artikulo ngayon, aalisin ko ang lahat ng iyong mga pagdududa at sasagutin ang mga tanong tungkol sa kung ano ang mga bloke ng div
Magsimula na tayong mag-aral.
Mga bloke at layout ng HTML divUpang hindi magkalat at magkalat ang iyong utak, sa madaling sabi ko lang na sa nakaraan, ang lahat ng mga web designer at developer ay gumamit ng isang tabular na layout kapag gumagawa ng mga pahina at site, kung saan ang bawat cell ay isang partikular na elemento. Tinatayang ganito ang hitsura nito:
Ito ay kung paano ginawa ang mga website. Ito ay isang napaka-primitive na halimbawa, ngunit malinaw mong maiisip kung paano nilikha ang mga website sa mga panahong iyon. Ang mga teknolohiya sa Internet ay hindi tumitigil at sa ilang mga punto tulad ng isang konsepto bilang html div layout ay dumating sa amin. At pagkatapos, tulad ng sinasabi nila, nagsimula ito.
Ang kahalagahan nito sa pagbuo ng site ay talagang mahusay. Ngayon ang paggawa ng mga website at pamamahala ng mga html block ay kasingdali ng paghihimay ng mga peras. Ang mga site ay nagsimulang maging maganda, kawili-wili. Ngayon ang buong mundo ay bumubuo sa kanila lamang sa daan.
Ito ay kung paano mo mailarawan ang isang pinasimple na modelo para sa paggamit ng mga bloke ng div html.
Ang kaginhawahan ay nakasalalay sa pagsasarili ng mga bloke mula sa isa't isa, madali silang pamahalaan nang hiwalay, ilipat ayon sa gusto mo, magdagdag ng mga estilo, maaari kang magtakda ng mga karaniwang istilo sa pamamagitan ng mga panuntunan ng CSS para sa ilang mga grupo ng Div. Sumang-ayon ito ay maginhawa.
Mga halimbawa ng paggamit ng mga div tagTingnan natin sa pagsasanay ang ilang mga halimbawa kung paano mo mailalapat ang mga div tag sa isang html na pahina. Gamit ang isang simpleng halimbawa, gagawa kami ng 4 na bloke bawat pahina. Lagi kong gagamitin ang Notepad++ para dito at sa mga sumusunod na halimbawa.
Kaya't ipaliwanag natin. May design kami< ! DOCTYPE html >ito ay angkop para sa mga modernong browser at sumusuporta sa html 5 markup, pag-uusapan natin ito sa mga paglabas sa hinaharap.
Susunod, binuksan ang isang malaking lalagyan ng "magulang".< html >. Ito ay isang pares, dapat itong sarado sa dulo para sigurado! Pagkatapos ay ang pagbubukas ng tag ng serbisyo< head >, na ipinares din at naglalaman ng impormasyon ng serbisyo tungkol sa pag-encode< meta charset >, ang pinakamahalagang pamagat ng pamagat ng pahina ng seo, paglalarawan (hindi ko ito isinama dito, dahil hindi na kailangan, pinag-aaralan namin ang isang puro teknikal na aspeto), kumonekta din sila dito Mga istilo ng CSS, mga font (Google Fonts library), javascript.
Susunod ang tag< body >. Iimbak na nito ang lahat ng aming block markup at lahat ng container na may mga tag. Tandaan lamang ito bilang isang malaking "barrel".
At sa wakas, nariyan ang aming mga container div.
< div class = "header" > < / div > < div class = "sidebar" > < / div > < div class = "content" > < / div > < div class = "footer" > < / div > |
Mahalaga! Ang mga ito ay ipinares din, kailangan din nilang sarado kasama ng iba pang mga tag.
Ang bawat bloke ng mga div, tulad ng nakikita mo, ay may katangian ng klase, pagkatapos ng pantay na pag-sign, maaari mong independiyente at arbitraryong itakda ang mga ito. Ang mga klase na ito ay partikular na ginawa para sa CSS. Iyon ay, ang browser ay pumapasok sa pahina, nakikita ang div block at nakikita kung anong impormasyon ang nilalaman nito at pumunta sa CSS file at hinahanap ang tamang klase doon.
Maaari mong itakda hindi lamang ang katangian ng klase, ngunit maaari mo ring gamitin ang id (identifier). Maaari mong itanong ang tanong na: "Ano ang pagkakaiba sa akin kung alin ang gagamitin?" Sasagot ako, maaari mong gamitin ang anumang paraan para sa layout. Sa isang pagkakaiba lamang - ayon sa priyoridad, ang id ay may higit na mga pribilehiyo kaysa class .
Ipapaliwanag ko ito sa video cheat sheet sa ibaba.
Ang bawat tao'y may sariling istilo ng paglikha ng mga site, mas gusto kong gumamit ng klase, dahil ang entry na ito sa CSS ay ipinapakita na may isang tuldok . tagapili
Siyanga pala, gusto kong sabihin na ang header, sidebar, content, footer ay lahat ng CSS selector, at magkakaroon na sila ng mga attribute.
Kaya, patuloy kaming nag-uudyok ng gulo sa isipan ng mga gumagamit. Ang mga bloke ng div sa klase na nilikha natin ngayon ay bumaba tayo sa CSS.
Buksan natin ang mga patakaran para sa ating page sa loob ng head css tag, ibig sabihin, idisenyo natin ito. Gawin natin ito ng ganito:
Ang entry ay magiging tulad ng sumusunod (kopyahin at i-paste lamang sa iyong halimbawa at tingnan sa iyong browser)
Isang halimbawa ng paggamit ng mga div tag ; height:300px; border:1px solid black; margin-left:230px; ) .footer ( width:600px; height:130px; border:1px solid black; )
< ! DOCTYPE HTML > < html > < head > < meta charset = "utf-8" > < title >Halimbawa ng paggamit ng mga div tag< / title >
header ( lapad: 600px taas : 120px ; hangganan: 1px solid black; sidebar( lapad: 200px taas: 300px hangganan: 1px solid black; lumutang pakaliwa ; Nilalaman( lapad: 370px taas: 300px hangganan: 1px solid black; margin-left : 230px ; footer( lapad: 600px taas : 130px ; hangganan: 1px solid black;
< / head > < body > |
Ang anumang web page ay binubuo ng mga elementong matatagpuan dito, at ang layout ng block div ay halos palaging responsable para sa kanilang pagkakalagay. Siyempre, mayroon ding isang tabular na layout gamit ang mga tag.
| , at mayroong mga hindi pagkakaunawaan tungkol sa kung aling sistema ang mas mahusay na gamitin - block o tabular. Gayunpaman, sa katotohanan, sa kasalukuyan, hindi ka makakahanap ng alinman sa mga moderno, sikat at maginhawang mga site na gumagamit lamang ng tabular na layout. SA pinakamagandang kaso ginagamit lamang ito para sa kung ano ang nilalayon nito - iyon ay, upang lumikha ng mga talahanayan, ngunit hindi upang mabuo ang mismong istraktura ng site.
Ang katotohanan ay ang div layout ng site ay nagpapahintulot sa iyo na magtakda ng maraming css-properties na hindi magagamit para sa mga talahanayan. Bilang karagdagan, ang pinaka pangunahing kawalan Ang tabular system ay ang talahanayan ay hindi ipapakita sa screen hanggang sa ito ay ganap na na-load ng browser. Kung ang buong site ay ginawa sa isang talahanayan, pagkatapos ay lilitaw lamang ito sa display pagkatapos na ganap na ma-load ang buong html code ng pahina. DIV tag at float propertyAng batayan ng block system ay ang tag, na siyang lalagyan para sa nilalaman. Maaari rin itong maglaman ng iba pang mga lalagyan sa loob nito. Ang paggamit ng DIV tag ay hindi mas mahirap kaysa sa paggamit ng . Bilang isang patakaran, ang karaniwang istraktura ng site ay nabuo tulad ng sumusunod: mayroong isang pangunahing lalagyan (kadalasan ito ay itinalaga ng isang klase na tinatawag na wrapper, lalagyan, pangunahing, atbp.). Sa loob ng lalagyang ito ay mga bloke ng menu, bahagi ng nilalaman, sidebar. Bilang default, ang bawat bagong bloke ay inilalagay sa isang bagong linya. Upang iposisyon ang isang bloke sa kaliwa o kanan ng isa pa (halimbawa, upang iposisyon ang isang sidebar sa kanan), ginagamit ang float property. Nagde-default ito sa "wala", ngunit maaari mo ring itakda ito sa "kaliwa" at "kanan". Isaalang-alang ang pag-aari na ito gamit ang isang halimbawa na may dalawang bloke. Nilalaman block Sidebar block Ibibigay ng code na ito ang sumusunod na resulta: malinaw na ari-arianMahalagang isaalang-alang na ang float property ay nalalapat hindi lamang sa block mismo, kung saan ito nakasulat, kundi pati na rin sa kasunod na elemento na susunod sa block na ito. Iyon ay, kung magdagdag kami ng isa pang bloke sa dalawang bloke na inilarawan sa itaas, nang hindi tinukoy ang anumang mga katangian para dito, hindi ito matatagpuan sa isang bagong linya, ngunit magsisimula sa kanan ng pangalawang bloke. Upang maiwasan ito, ginagamit ng layout ng block div ang malinaw na property, na dapat itakda para sa block na gusto nating ilagay sa isang bagong linya. Kadalasan, ito ay nakatakda sa "pareho", ngunit maaari mo ring itakda ang mga halaga sa "kaliwa" o "kanan" kung nais naming hindi lamang iposisyon ang bloke sa isang bagong linya, ngunit itakda din ang pagkakahanay nito . Magdagdag tayo ng bagong elemento sa halimbawa sa itaas: Nilalaman block Sidebar block Bagong bloke na matatagpuan sa ibaba Resulta:
Bilang karagdagan sa lokasyon ng mga bloke, mahalagang itakda ang mga indent sa pagitan ng mga bloke at sa loob ng mga ito. Para dito, ayon sa pagkakabanggit, ginagamit ang mga katangian ng margin at padding. Ang mga indent ay nakatakda nang hiwalay para sa itaas, kanan, ibaba at kaliwang bahagi ng elemento. Maaari silang tukuyin sa isang linya sa pamamagitan ng paglilista ng apat na halaga: Margin: 20px 10px 0 40px Ang isang bloke na may mga setting na ito ay ipoposisyon nang 20 pixel sa ibaba ng parent element, sampung pixel mula sa kanang bahagi ng elemento, ay magkakaroon ng zero padding sa ibaba, at magkakaroon ng padding na 40 pixels sa kaliwa. Kung ang lahat ng parehong mga tagapagpahiwatig ay tinukoy sa pag-aari ng padding, kung gayon ang mga ito ay magiging mga panloob na indent para sa nilalaman na may kaugnayan sa mga hangganan ng bloke kung saan ito matatagpuan. Maaari ka ring magtakda ng mga indibidwal na katangian para sa mga indibidwal na gilid na may margin-top , margin-bottom , margin-left , margin-right (at katulad din para sa padding). Sa kasong ito, kung ang alinman sa mga mukha ay hindi tinukoy, ang indent mula sa gilid nito ay magiging sero o matutukoy karaniwang katangian css set para sa mga bloke sa pahina. Dito tinitingnan natin ang mga karaniwang pagkakamali sa HTML5 markup mula sa semantikong pananaw, at kung paano maiiwasan ang mga ito. Aking super duper na pahina Rewritten tulad nito: Mali lang: hindi balot. Ang ibig sabihin ng elementong ito ay ang semantic block ng iyong content na ginamit upang buuin ang "outline ng dokumento" at dapat maglaman ng heading. Kung kailangan mo ng elemento ng wrapper, subukang maglibot (may maiaalok ang Kroc Camen). Kung hindi nito malulutas ang problema ng pangangailangan ng mga karagdagang wrapper, gamitin ang magandang lumang "s. Sa pagdating ng HTML5 "s ay hindi patay, at mahusay ang mga ito sa kasong ito. Sa lahat ng sinabi, mainam na markahan ang halimbawa sa itaas gamit ang HTML5 tulad nito: Kung hindi ka sigurado kung aling elemento ang gagamitin, ipinapayo ko sa iyo na gamitin ang aming flowchart ng pagpili ng elemento ( tinatayang tagasalin: tingnan sa pinakailalim ng entry). Gamitin at kapag kailangan lang Walang kwenta ang pagsusulat ng code kung hindi naman kailangan, di ba? Naku, pero madalas kong obserbahan kung paano at saan sila hindi kailangan. Maaari mong basahin ang tungkol sa mga elemento at higit pa, ngunit maikling balangkasin ko ang mga pangunahing punto:
Ang aking pinakamahusay na post sa blog Kung ang sa iyo ay naglalaman lamang ng isang elemento ng header, hindi ito kailangan. SA kasong ito ginagarantiyahan na ng elemento na ang heading ay isasama sa "outline ng dokumento", at dahil hindi ito naglalaman ng maraming elemento (sa kahulugan), maaari itong ligtas na maalis. Ito lang ay sapat na:
Ang aking pinakamahusay na post sa blog ni Rich Clark Sa kasong ito, alisin lamang ang hgroup. ni Rich Clark Ang pangalawang kaso ay isa pang halimbawa ng paggamit ng elemento nang hindi kinakailangan. Kung ang nag-iisang anak "at ito ay , bakit ito kailangan? Kung wala kang mga karagdagang elemento sa "e (i.e. kapatid na babae sa ), alisin lamang ang . Tandaan: Hindi lahat ng pangkat ng link ay dapat ilagay sa elemento ng nav. Dapat itong gamitin para sa pangunahing nabigasyon. Kadalasan sa mga footer mayroong isang maliit na listahan ng mga link sa iba't ibang mga pahina ng site (Home, Help, mga tuntunin ng paggamit, atbp). Sa kasong ito, dapat sapat ang isang footer. Bagama't walang dapat ihinto sa paggamit ng nav, hindi ito kinakailangan. WHATWG HTML specAng pangunahing parirala ay "basic navigation". Maaari kang magtaltalan nang mahabang panahon tungkol sa kung ano ang ibig sabihin ng pangunahing, ngunit para sa akin ito ay:
Inilalarawan ito ng spec bilang "stand-alone na content, posibleng may heading, at kadalasan ay stand-alone na stream element." Narito ito, ang buong kagandahan - ang elemento ay madaling ilipat mula sa pangunahing nilalaman, halimbawa, sa sidebar. Ang flowchart ng pagpili ng elemento sa itaas ay makakatulong sa iyo na makitungo sa . Kung ang isang imahe ay puro presentasyon at hindi isinangguni saanman sa dokumento, tiyak na hindi ito . Kung hindi, tanungin ang iyong sarili ng tanong: "Kailangan ba ang larawang ito sa kasalukuyang konteksto para sa pag-unawa?". Kung hindi, ito ay tila hindi (marahil). Kung gayon, tanungin ang iyong sarili, "Maaari ko bang ilipat ito sa app?". Kung oo ang sagot sa parehong tanong, maaaring gumana ito. Ang iyong logo ay hindi Ganun din sa logo. Madalas kong nakikita ang paggamit na ito: Pangalan ng kumpanya ko
Wala nang idadagdag. Ito ay hindi totoo. Maaari kang magtaltalan nang mahabang panahon tungkol sa kung ang logo ay dapat na nasa, ngunit hindi namin ito pinag-uusapan ngayon. Ang tunay na pagkakamali ay ang sobrang paggamit ng . dapat lamang gamitin kapag tinutukoy mo ito sa isang dokumento. Malamang na hindi ka magre-refer sa iyong logo kahit saan. Tama na ito: Ang pangalan ng aking kumpanya ay maaaring higit pa sa isang imaheng Iba pa karaniwang pangyayari Ang hindi pagkakaunawaan ng elemento ay nakasalalay sa pagpapalagay na maaari lamang itong gamitin para sa mga larawan. Pero hindi pala. Maaari itong magsama ng video, audio, graphics (sa SVG, halimbawa), isang quote, isang table, isang code block, isang tula, o anumang kumbinasyon ng mga ito. Huwag limitahan ang iyong sarili sa paggamit lamang ng mga larawan. Ang aming gawain bilang mga sumusunod sa mga pamantayan sa web ay ilarawan ang nilalaman ng aming markup. Hindi pa katagal nagsulat ako tungkol sa elemento nang mas detalyado. Payo ko sa iyo na basahin kung gusto mong mas maunawaan o i-refresh ang iyong mga alaala. Huwag gumamit ng hindi kinakailangang uri ng katangian. Ito marahil ang pinaka isang karaniwang problema, na matatagpuan sa HTML5 gallery. Bagama't hindi isang bug, sa tingin ko ito ay pinakamahusay na iwasan ito.Sa HTML5, hindi na kailangang tukuyin ang uri ng katangian para sa at mga elemento. Bagama't maaaring hindi madaling alisin ang mga ito kung awtomatiko silang idaragdag ng iyong CMS, walang saysay na isama ang mga ito sa code kung ikaw mismo ang sumulat nito o maaari mong pamahalaan ang mga template. kasi lahat ng mga browser bilang default ay isinasaalang-alang na ang lahat ng mga script ay nakasulat sa JavaScript, at ang mga estilo ay CSS, ang naturang markup ay nagiging kalabisan: Sa iba pang mga bagay, maaari mo ring bawasan ang halaga ng code na kinakailangan upang tukuyin ang pag-encode. Ang kabanata ni Mark Pilgrim sa semantics sa Dive into HTML5 ay naglalarawan sa lahat ng gayong mga kasanayan. Maling Paggamit ng Mga Katangian ng Form Maaaring alam mo na na ang HTML5 ay nagpapakilala ng maraming bagong katangian ng form. Tatalakayin natin ang mga ito sa ilang sandali, ngunit ngayon ay sasabihin ko sa iyo nang maikli kung ano ang hindi dapat gawin. Mga Katangian ng Boolean Mayroong mga katangian ng Boolean para sa mga elemento ng multimedia at ilang iba pa. Ang mga panuntunang inilalarawan ko ay nalalapat din sa kanila.Ang ilan sa mga bagong katangian ng form ay boolean, i.e. ang kanilang presensya sa markup ay tumutukoy sa pag-uugali ng mga elemento. Kabilang dito:
Bihira ko silang makita, ngunit sa kaso ng kinakailangan, nakita ko ito: Sa huli, ito ay hindi isang masamang bagay. Ang client-side HTML parser ay makakatagpo ng kinakailangang katangian sa markup at ilalapat ang naaangkop na mga panuntunan. Ngunit paano kung iba ang gagawin mo at isulat ang required="false"? Maaaring ilapat ang boolean value sa tatlong paraan: (Ang pangalawa at pangatlo ay partikular sa XHTML)
Kaugnay ng aming halimbawa sa itaas, maaari naming isulat ito (sa HTML): Mga Tag: Magdagdag ng mga tag Mga sampung taon na ang nakalilipas, ang tinatawag na tabular na layout ay kadalasang ginagamit sa Runet. Dahil sa katotohanan na ang mga pamantayan ng ilang mga browser ay malaki ang pagkakaiba sa isa't isa, kinakailangan na maghanap ng solusyon na magpapahintulot sa dokumento ng Internet na maipakita nang tama sa lahat ng mga aplikasyon. Ngunit sa paglipas ng panahon, ang mga pamantayan ay nabuo, at ang isang medyo matibay at hindi nababaluktot na talahanayan ng talahanayan ay pinalitan ng isang mahusay na nabago at tumutugon. Karamihan sa mga HTML na dokumento ay nagsimulang itayo batay sa magkakahiwalay na mga bloke, na, hindi katulad ng tabular na layout, ay maaaring independiyente sa bawat isa. paglitawAng komplikasyon ng mga web page at ang pag-unlad ng teknolohiya ng computer ay humantong sa katotohanan na ang dokumento sa web ay nahahati sa dalawang bahagi - ang frame (HTML code) at disenyo (style sheets). Dahil dito, posible na makamit ang isang hindi pa nagagawang pag-unlad ng web, ang mga resulta na makikita na natin ngayon sa karamihan sa mga modernong site. Bilang karagdagan sa pagpapabuti ng proseso ng pagbuo, pinahintulutan kami ng HTML na tukuyin ang sarili naming mga panuntunan sa disenyo para sa bawat indibidwal na elemento. Nakatulong ito upang mapabuti ang pagiging madaling mabasa ng code ng web page at bawasan ang oras ng paglo-load ng dokumento. Ngayon ang mga search engine ay mas mabilis at mas mahusay sa pagproseso ng impormasyong makukuha sa site. Mga pamantayan at pagpapatunayAng tag sa HTML ay ginagamit alinsunod sa mga pamantayan ng W3C (World Wide Web Consortium). Ang pagsuri sa code ng pahina ay isinasagawa ng isang espesyal na tool - isang validator, na nag-parse (mga pag-scan at paghahanap) para sa lahat ng uri ng mga error sa pahina. Ang wastong pahina ay nangangahulugan na ang lahat ng mga tag ay nagamit nang tama at ganap na sumusunod sa mga pamantayan.
Binibigyang-daan ka ng mga tag na lumikha ng mga bloke o, kung tawagin din sila, mga lalagyan. Kasabay nito, ang mga indibidwal na elemento ay maaaring pugad sa bawat isa, kaya lumilikha ng mga istruktura ng kinakailangang pagsasaayos at pagiging kumplikado. Ang paggamit ng isang tag nang hindi sinasamahan ng isang klase o identifier ay halos hindi na nararanasan. Ito ay dahil sa "walang mukha" ng elemento. Kung hindi ka magtatalaga ng klase dito, sa huli ang lahat ng container ay magkakaroon ng magkaparehong configuration. Upang lumikha ng isang tunay na wastong dokumento, kailangan mong gamitin ang sumusunod na class="some_name" tag structure. Sa pagtukoy sa pangalan ng klase, matutukoy ng mga style sheet ang posisyon, laki, pagsusuma, at iba pang mga parameter ng isang partikular na bloke sa dokumento. Paggamit ng Mga Klase at Identifier
Ang isang HTML block ay maaaring tukuyin pareho sa pamamagitan ng isang id, at ang pagkakaiba sa pagitan ng una at ang pangalawa ay ang id ay ginagamit nang isang beses lamang sa pahina ng dokumento. Iyon ay, ito ay ginagamit upang tukuyin ang mga natatanging elemento na hindi nauulit kahit saan pa sa page code. Ang katangian ng klase ay nagbibigay-daan sa iyo upang ilapat ang pareho sa maraming elemento. Ang diskarte na ito ay lubos na pinasimple ang pagbuo at pagpapanatili ng code. Bilang karagdagan, ang isang bagay ay maaaring magkaroon ng ilang mga klase sa parehong oras. Para sa tamang pagkilala, ang mga ito ay pinaghihiwalay lamang ng mga puwang. Naturally, ang block structure ng isang dokumento ay hindi naman nagpapahiwatig ng paggamit ng mga tag lamang. Palaging mayroong iba pang mga elemento sa istruktura ng anumang web page. Bilang karagdagan, ang elemento ng block mismo ay maaaring magkaroon ng ganap na kakaibang hitsura. Ginagawa ito gamit ang display property. Ang isang elemento ay maaaring magkaroon ng isang linya o kahit na isang display ng talahanayan, na nagbibigay-daan sa iyo upang makabuluhang taasan ang flexibility ng paggamit ng block at lumikha ng isang site ng anumang configuration. Tag . Mga katangian ng HTML
Gaya ng nabanggit sa itaas, hindi binabago ng tag na ito ang disenyo ng isang fragment ng page, ngunit ginagamit ito upang lumikha ng semantic structure na may kasunod na disenyo sa pamamagitan ng mga style sheet. Kinakailangan ang paggamit ng closing tag para sa elementong ito. Bagama't maraming makabagong browser ang makikilala ang error na ito, sa ilang mga kaso ang hindi nakasara na tag ay maaaring maging sanhi ng pagkasira ng istraktura ng dokumento at hindi tama ang pag-render. Dahil ang elementong ito ay isang block element, ang nilalamang nakapaloob dito ay magsisimula sa isang bagong linya. Upang baguhin ang gawi na ito, kailangan mong baguhin ang mga parameter ng display ng block gamit ang display property. Bilang karagdagan sa pagpapangkat ng mga nested na elemento, pinapayagan ka ng tag na i-format ang lokasyon ng nilalaman sa loob nito. Para dito, ginagamit ang align attribute, salamat sa kung saan maaari kang maglagay ng text o isang imahe sa kaliwang gilid, sa kanang gilid o sa gitna ng parent na elemento. I-block ang pagpoposisyon
Ang paggamit ng katangian ng posisyon ay nagbibigay-daan sa iyong baguhin ang paraan ng pagpoposisyon ng napiling elemento. Kaya, mayroong tatlong uri ng pagpoposisyon:
Upang baguhin ang posisyong nauugnay sa pinagmulang punto, ginagamit ang itaas at kaliwang katangian. Ang mga halaga ay maaaring maging positibo o negatibo. Ang lapad at taas ng isang elemento ng bloke ay tinutukoy ng mga katangian ng lapad at taas, ayon sa pagkakabanggit. Kung hindi sila tinukoy sa mga style sheet, ang block ay kukuha ng buong lapad ng parent na elemento. Kung ang nilalaman ng bloke ay hindi magkasya sa buong lapad ng "magulang", kung gayon ang pag-uugali ng elemento ay tinutukoy ng overflow na katangian. Umaasa kami na ang artikulong ito ay nakatulong upang maunawaan ang tanong kung ano ang nasa HTML. Ang mga ito ay mga unibersal na walang laman na lalagyan na kailangang punan ng ilang nilalaman, o mga elementong nakapugad ng pangkat para sa kanilang karagdagang pag-istilo gamit ang css, at kung kinakailangan, dynamic na manipulahin ang mga ito gamit ang mga script, halimbawa, sa isang programming language gaya ng javascript. Iginuhit ko ang iyong pansin sa katotohanan na ang mga elemento mismo ay walang epekto sa iba pang mga elemento ng pahina. Tinutukoy ng tag ang anumang solong bloke ng nilalaman at idinisenyo upang hatiin ang isang web page sa mga chunks. Maaari mong pagsamahin ang anumang hanay ng lohikal na nauugnay na mga elemento sa isang bloke. Ang elementong ito ay isang block element, na nangangahulugan na ang nilalaman nito ay palaging magsisimula sa isang bagong linya, na ang elemento ay kumukuha ng buong magagamit na lapad. Hindi pa katagal, ang elementong ito ay sumasakop sa ganap na tuktok na nakatuon sa paghahati ng pahina sa mga lohikal na bahagi, ngunit sa pagdating ng HTML 5, sapat na mga elemento ng semantiko ang naidagdag na nagbibigay-daan sa ilang sitwasyon na palitan ang tag ng isang mas makabuluhan. Hindi tulad ng block element, ang tag ay inline at nalalapat sa panloob ( nasa linya) mga elemento ng pahina, iyon ay, mga salita, parirala na nasa loob ng isang talata o isang maliit na piraso ng teksto, isang talaan ng mga nilalaman, at mga katulad nito. Maaari mong gamitin ang tag para sa mga gawain tulad ng:
Pinagsama namin ang mga talata sa isang div tag, at nilagyan namin ang salitang ito ng isang span tag. Sa tulong ng inline na style sheet, na-highlight namin ang salitang ito sa pula, at ang bloke ng teksto ay binigyan ng berdeng kulay. Tandaan na ang div tag ay isang block tag, na nangangahulugan na ang nilalaman nito ay palaging magsisimula sa isang bagong linya, na ang elemento ay kumukuha ng buong magagamit na lapad. Naglalaman din ang bloke na ito ng dalawang talata. Gamit ang isang inline na style sheet, itinakda namin ang kulay ng background sa khaki para sa buong bloke, at orangeRed para sa isang ito (binalot namin ito sa isang span tag). Sa halimbawang ito, kami:
|
