Kio estas la diferenco inter Bloko-nivelo kaj Inline Elementoj?
HTML estas formita de diversaj elementoj, kiuj agas kiel konstruaj blokoj de retpaĝoj. Ĉiu el ĉi tiuj elementoj falas en unu el du kategorioj - aŭ blok-nivelaj elementoj aŭ enlinaj elementoj. Kompreni la diferencon inter ĉi tiuj du tipoj de elementoj estas grava paŝo en konstruado de retpaĝoj.
Bloko Nivelaj Elementoj
Do kio estas bloko-nivela elemento? Bloko-nivela elemento estas HTML-elemento, kiu komencas novan linion en TTT-paĝo kaj etendas la plenan larĝon de la disponebla horizontala spaco de ĝia gepatra elemento. Ĝi kreas grandajn blokojn de enhavo kiel alineoj aŭ paĝaj dividoj. Fakte, plejparto de HTML-elementoj estas blok-nivelaj elementoj.
Blok-nivelaj elementoj estas uzataj en la korpo de la HTML-dokumento. Ili povas enhavi inline elementojn, same kiel aliajn blok-nivelajn elementojn.
Inline Elementoj
Kontraste al bloko-nivelo, elemento en linio povas:
- Komencu en linio
- Ne komencas novan linion
- Ĝia larĝo nur etendas ĝis ĝi difinas per ĝiaj etikedoj.
Ekzemplo de enreta elemento estas la etikedo, kiu faras la tiparon de la enhavo de teksto enhavita en boldface. Inlinea elemento ĝenerale nur enhavas aliajn inlineajn elementojn, aŭ ĝi povas nenion enhavi, kiel la
-a etikedo.
Ankaŭ ekzistas tria tipo de elemento en HTML: tiuj, kiuj tute ne montras. Ĉi tiuj elementoj provizas informojn pri la paĝo, sed ne montriĝas en retumilo.
Ekzemple:
-
difinas stilojn kaj stilojn. - difinas meta-datumon.
- estas la HTML-dokumento elemento kiu tenas ĉi tiujn elementojn.
Ŝaltante Inline kaj Blokajn Elektajn Tipojn
Vi povas ŝanĝi elementon de inline bloki aŭ viceversa, uzante unu el ĉi tiuj CSS-propraĵoj:
- montriĝo: bloko;
- montri: inline;
- montri: neniu;
La montraĵa proprieto de CSS permesas ŝanĝi enlinean posedon bloki, aŭ blokon por enlini aŭ ne montriĝe.
Kiam Ŝanĝi la Vidigu Proprieton
Ĝenerale mi ŝatas lasi la eksterlandan posedaĵon sole, sed ekzistas iuj kazoj, kie interŝanĝi eninformajn kaj blokajn ekranajn posedaĵojn povas esti utila.
- Menuoj de horizontalaj listoj: listoj estas blok-elementaj elementoj, sed se vi volas ke via menuo montriĝu horizontale, vi devas konverti la liston al inline elemento por ke ĉiu menuo ne komencu novan linion.
- Kapoj en la teksto: Kelkfoje vi eble volas kaplinion resti en la teksto, sed konservu la HTML-titolon-valorojn. Ŝanĝi la h1 per h6-valoroj al inline permesos tekston, kiu post sia ferma etikedo daŭre fluos apud ĝi en la sama linio, anstataŭ komenci novan linion.
- Forigi la elementon: Se vi volas forigi elementon tute de la normala fluo de la dokumento, vi povas agordi la ekranon al neniu. Unu noto, atentu, kiam vi uzas ekranon: neniu. Ĉar tiu stilo faros nevideblajn elementojn, vi neniam volas uzi ĉi tion por kaŝi tekston, kiun vi aldonis pro kialoj de SEO, sed ne volas montri por vizitantoj. Tio estas fervora maniero por ke via retejo penalizu por nigra ĉapelo aliro al SEO.
Komuna Inline Elemento Formanta Erarojn
Unu el la plej oftaj eraroj, komencanto al la dezajno de Retejo, provas agordi larĝecon en enlinia elemento. Ĉi tio ne funkcias ĉar inline elementoj larĝecoj ne estas difinitaj per la ujo-skatolo.
Inlineaj elementoj ignori plurajn proprietojn:
- larĝa kaj alteco
- max-larĝa kaj max-alteco
- min-larĝa kaj min-alteco
Noto: Microsoft Interreta Esploristo (nun nomita Microsoft Edge) en la pasinta tempo malĝuste aplikis iujn el ĉi tiuj propraĵoj eĉ por enlini skatolojn. Ĉi tio ne estas normoj, kaj ĉi tio eble ne okazas kun novaj versioj de la retumilo de Microsoft.
Se vi devas difini la larĝecon aŭ altecon, kiun elemento devas preni, vi volas apliki tion al la bloko-nivelo, kiu enhavas vian inlinean tekston.
Redaktita de Jeremy Girard la 2/3/17