Kurssitaulukko

CSS korkeammat ohjeet

• CSS oppikirja
• CSS esittely
• CSS perus语法
• CSS edistyneet语法
• CSS johdannaisselaimet
• CSS id-selaimet
• CSS luokkaselaimet
• CSS luominen
• CSS tausta
• CSS teksti
• CSS kirjasin
• CSS luettelo

CSS kehyksemalli

• CSS kehyssynteesi
• CSS sisäpuolinen tyhjiö
• CSS reunat
• CSS ulkoinen tyhjiö
• CSS ulkoisen tyhjiön yhdistäminen

CSS sijoittaminen

• CSS sijoittelu yleiskatsaus
• CSS suhteellinen sijoittelu
• CSS absoluuttinen sijoittelu
• CSS kellastus

CSS valitsimet

• CSS elementtiselaimet
• CSS selaimien ryhmittely
• CSS luokkaselaimen yksityiskohtainen selitys
• CSS ID-selaimen yksityiskohtainen selitys
• CSS ominaisuusselaimen yksityiskohtainen selitys
• CSS jälkeläisvalitsimet
• CSS lapsivalitsimet
• CSS vieressä olevat veljekset

Valinnaiset kurssit

Kurssisuositus:

• CodeW3C.comin varasto

CSS sijoittamisominaisuus (Positioning) mahdollistaa elementtien sijoittamisen.

CSS sijoittaminen ja kellunta

CSS tarjoaa sijoittamiselle ja kelluvalle joitakin ominaisuuksia, joita hyödyntämällä voidaan luoda sarakeasennusta, päällekkäistä asennusta osasta asennusta toiseen ja myös tehtäviä, jotka usein vaativat useita taulukoita, vuosien ajan.

Sijoittamisen perusajatus on yksinkertainen, se mahdollistaa elementin kehyskoon sijoittamisen sen normaalista sijainnista, tai suhteessa isäelementtiin, toiseen elementtiin tai jopa selaimen ikkunaa itseään. Ilmeisesti tämä ominaisuus on erittäin voimakas ja myös erittäin yllättävä. On huomattava, että käyttäjäagentin tuki CSS2:n sijoittamiselle on paljon parempaa kuin muille tukille, mikä ei ole yllättävää.

Toisaalta CSS1 ensimmäisen kerran ehdotti kelluvaan, joka perustuu Netscape:n Webin kehityksen alkuvaiheessa lisäämään ominaisuuteen. Kellunta ei ole täysin sijoittaminen, mutta se ei tietenkään ole myöskään tavallinen virtojen asettelu. Selitämme kelluvan merkityksen myöhemmin luvuissa.

Everything is a box

Elements like div, h1, or p are often called block-level elements. This means that these elements are displayed asA block of contenti.e., 'block box.' Conversely, elements like span and strong are called 'inline elements' because their content is displayed in the line, i.e., 'inline box'.

You can use Display propertyChange the type of the generated box. This means that by setting the display property to block, inline elements (such as <a> elements) can be made to behave like block-level elements. You can also set display to none to make the generated element have no box. In this way, the box and all its content will not be displayed and will not occupy space in the document.

But in one case, even without explicit definition, a block-level element is created. This happens when some text is added to the beginning of a block-level element (such as a div). Even if these texts are not defined as paragraphs, they will be treated as paragraphs:

<div>
some text
<p>Some more text.</p>
</div>

In this case, this box is called an anonymous block box because it is not associated with any specifically defined element.

The text lines of block-level elements also have a similar situation. Suppose there is a paragraph containing three lines of text. Each line of text forms an anonymous box. Styles cannot be directly applied to anonymous blocks or line boxes because there is no place to apply styles (note that line boxes and inline boxes are two different concepts). However, this helps to understand that everything we see on the screen is formed into some kind of box.

CSS positioning mechanism

CSS has three basic positioning mechanisms: normal flow, floating, and absolute positioning.

Unless specified otherwise, all boxes are positioned in the normal flow. That is, the position of elements in the normal flow is determined by the position of the elements in (X)HTML.

Block-level boxes are arranged one after another from top to bottom, and the vertical distance between boxes is calculated from the vertical outer margin of the boxes.

Inline boxes are horizontally arranged in a line. Horizontal padding, borders, and margins can be used to adjust their spacing. However, vertical padding, borders, and margins do not affect the height of the inline box. The horizontal box formed by a line is calledLine box (Line Box)The height of the line box is always sufficient to contain all the inline boxes it contains. However, setting line height can increase the height of this box.

In the following chapters, we will explain in detail relative positioning, absolute positioning, and floating for you.

CSS position ominaisuus

By using Position attributeWe can choose 4 different types of positioning, which will affect the way the element box is generated.

The meaning of the position attribute value:

static

Element box is generated normally. Block-level elements generate a rectangular box as part of the document flow, while inline elements create one or more line boxes, placed within their parent element.

relative

Elementin kehys siirtyy tiettyyn etäisyyteen. Elementti säilyttää alkuperäisen muotonsa, ja se alkuperäinen tila säilyy.

absolute

Elementin kehys poistetaan kokonaan dokumenttifluosta ja sijoitetaan sen sisältökehykseen. Sisältökehys voi olla dokumentissa oleva toinen elementti tai alkuperäinen sisältökehys. Elementtiä normaalissa dokumenttifluossa vallitseva tila suljetaan, ikään kuin elementtiä ei olisi olemassa. Elementti sijoitettu jälkeen luo blokkipohjaisen kehysrakenteen, riippumatta siitä, mikä tyyppi kehysrakenteesta normaalissa virrassa olisi ollut.

fixed

Elementin kehys toimii samalla tavalla kuin position asetetaan absolute, mutta sen sisältökehys on ikkunana.

Vinkki:Suhteellinen sijoittelu katsotaan todellisuudessa osaksi tavallista virrasta sijoittelu mallia, koska elementin sijainti on suhteessa sen sijaintiin tavallisessa virrassa.

CSS sijoittelumääritykset

CSS sijoittelumääritykset mahdollistavat elementtien sijoittamisen.

Työkalupakka

CSS viittauskäsikirja

CSS esimerkit

CSS testit

CSS kurssit

Sponsorointilinkit